@@ -148,10 +145,11 @@ function BottomBar(props: {
{connectedClients}
{startTime}
-
+
@@ -172,12 +170,14 @@ class ErrorBoundary extends React.Component {
componentDidCatch(error: any, errorInfo: any) {
// You can also log the error to an error reporting service
// logErrorToMyService(error, errorInfo);
+ console.error(error);
+ console.error(errorInfo);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
- return
Something went wrong.
; + returnSomething went wrong.
; } return this.props.children; @@ -206,7 +206,7 @@ function CopyCommand(props: { command: string }) {
{props.command}
@@ -230,15 +230,130 @@ function CopyCommand(props: { command: string }) {
);
}
-function LandingPageContent() {
- return (
-
-
- Welcome to TermPair!
- Easily share terminals with end-to-end encryption 🔒. Terminal data is
- always encrypted before being routed through the server.{" "}
- Learn more.
+function LandingPageContent(props: {
+ isStaticallyHosted: Nullable;
+ setCustomTermpairServer: (customServer: string) => void;
+ setTerminalId: (newTerminalId: string) => void;
+}) {
+ const [terminalIdInput, setTerminalIdInput] = React.useState("");
+ const [customHostInput, setCustomHostInput] = React.useState("");
+ const connectToUserTerminal = () => {
+ if (!terminalIdInput) {
+ toast.dark("Terminal ID cannot be empty");
+ return;
+ }
+ if (!props.isStaticallyHosted) {
+ props.setTerminalId(terminalIdInput);
+ }
+ if (!customHostInput) {
+ toast.dark("Host name cannot be empty");
+ return;
+ }
+ try {
+ new URL(customHostInput);
+ } catch (e) {
+ toast.dark(`${customHostInput} is not a valid url`);
+ return;
+ }
+ props.setCustomTermpairServer(customHostInput);
+ props.setTerminalId(terminalIdInput);
+ };
+ const inputClass = "text-black px-2 py-3 m-2 w-full font-mono";
+
+ const terminalIdInputEl = (
+
+ Terminal ID
+ {
+ setTerminalIdInput(event.target.value);
+ }}
+ value={terminalIdInput}
+ placeholder="abcdef123456789abcded123456789"
+ onKeyPress={(e) => {
+ if (e.key === "Enter") {
+ connectToUserTerminal();
+ }
+ }}
+ />
+
+ );
+ const terminalServerUrlEl = (
+
+
+ TermPair Server URL
+
+ {
+ setCustomHostInput(event.target.value);
+ }}
+ value={customHostInput}
+ onKeyPress={(e) => {
+ if (e.key === "Enter") {
+ connectToUserTerminal();
+ }
+ }}
+ />
+
+ );
+
+ const canConnect = props.isStaticallyHosted
+ ? terminalIdInput.length !== 0
+ : terminalIdInput.length !== 0 && customHostInput.length !== 0;
+
+ const connectButton = (
+
+
+
+ );
+ const staticLandingContent = (
+
+ This page is statically hosted
+
+ This is a static page serving the TermPair JavaScript app. It is
+ optional to use a statically served TermPair webapp, but it facilitates
+ easily building and self-serving to be certain the JavaScript app has
+ not been tampered with by an untrusted server.
+
+
+ Connect to a broadcasting terminal by entering the fields below and
+ clicking Connect.
+
+
+ );
+
+ const regularServerContent = (
+ <>
Quick Start
@@ -256,13 +371,51 @@ function LandingPageContent() {
+ Connecting to a Terminal?
+ If a terminal is already broadcasting and you'd like to connect to it,
+ you don't need to install or run anything. Just enter the Terminal ID
+ below and click Connect.
+
+
+
+ );
+
+ const termpairDemoContent = (
+
+ TermPair Demo
+
+
+
+
+ );
+
+ return (
+
+
+
+ Welcome to TermPair!
+ Easily share terminals with end-to-end encryption 🔒. Terminal data is
+ always encrypted before being routed through the server.{" "}
+ Learn more.
+ {props.isStaticallyHosted === null
+ ? null
+ : props.isStaticallyHosted === true
+ ? staticLandingContent
+ : regularServerContent}
+
+ {termpairDemoContent}
);
@@ -277,7 +430,9 @@ type Status =
| "Browser is not running in a secure context"
| "No Terminal provided"
| "Failed to obtain encryption keys"
- | "Developer Error: RSA key not ready";
+ | "Ready for websocket connection"
+ | "Developer Error: RSA key not ready"
+ | "Failed to fetch terminal data";
type TerminalServerData = {
terminal_id: string;
@@ -306,7 +461,6 @@ function handleStatusChange(
prevStatus: Status,
setPrevStatus: (prevStatus: Status) => void
): void {
- // console.log(`Terminal connection status: ${status}`);
const noToast = ["No Terminal provided"];
if (status && noToast.indexOf(status) === -1) {
toastStatus(Terminal status: {status});
@@ -389,6 +543,8 @@ function handleStatusChange(
break;
case "No Terminal provided":
+ case "Failed to fetch terminal data":
+ case "Ready for websocket connection":
break;
default:
@@ -400,6 +556,8 @@ function handleStatusChange(
}
function App() {
+ const [isStaticallyHosted, setIsStaticallyHosted] =
+ useState>(null);
const [terminalServerData, setTerminalServerData] =
useState>(null);
const [numClients, setNumClients] = useState(0);
@@ -427,6 +585,45 @@ function App() {
const [status, setStatus] = useState(null);
const [prevStatus, setPrevStatus] = useState(null);
+ const defaultTermpairServer = new URL(
+ `${window.location.protocol}//${window.location.hostname}:${window.location.port}${window.location.pathname}`
+ );
+ const [customTermpairServer, setCustomTermpairServer] = useState(
+ new URLSearchParams(window.location.search).get("termpair_server_url")
+ );
+ const termpairHttpServer =
+ isStaticallyHosted === true ? customTermpairServer : defaultTermpairServer;
+
+ useEffect(() => {
+ if (isStaticallyHosted === true && customTermpairServer) {
+ toast.dark(
+ `Terminal data is being routed through ${customTermpairServer.toString()}`
+ );
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [customTermpairServer]);
+
+ useEffect(() => {
+ const fetchIsStaticallyHosted = async () => {
+ try {
+ const ret = await fetch(defaultTermpairServer.toString() + "ping", {
+ mode: "same-origin",
+ });
+ const text = await ret.json();
+ const pong = text === "pong";
+ const isTermpairServer = ret.status === 200 && pong;
+ setIsStaticallyHosted(!isTermpairServer);
+ } catch (e) {
+ setIsStaticallyHosted(true);
+ }
+ };
+ fetchIsStaticallyHosted();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const termpairWebsocketServer = termpairHttpServer
+ ? new URL(termpairHttpServer.toString().replace(/^http/, "ws"))
+ : null;
const [xterm] = useState(
new Xterm({
cursorBlink: true,
@@ -434,7 +631,7 @@ function App() {
scrollback: 1000,
})
);
- const [terminalId] = useState(
+ const [terminalId, setTerminalId] = useState(
new URLSearchParams(window.location.search).get("terminal_id")
);
@@ -450,6 +647,7 @@ function App() {
xterm.writeln(`Welcome to TermPair! https://github.com/cs01/termpair`);
xterm.writeln("");
setXtermWasOpened(true);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [status]);
const changeStatus = (newStatus: Status) => {
@@ -468,18 +666,43 @@ function App() {
changeStatus("Browser is not running in a secure context");
return;
}
-
+ if (isStaticallyHosted && !customTermpairServer) {
+ toast.dark(
+ "Page is statically hosted but no custom server was provided"
+ );
+ return;
+ }
+ if (!termpairHttpServer) {
+ console.error("no termpair server");
+ return;
+ }
rsaKeyPair.current = await generateRSAKeyPair();
- const response = await fetch(`terminal/${terminalId}`);
- if (response.status === 200) {
- setTerminalServerData(await response.json());
- } else {
- changeStatus("Terminal ID is invalid");
+ try {
+ const response = await fetch(
+ new URL(`terminal/${terminalId}`, termpairHttpServer).toString()
+ );
+ if (response.status === 200) {
+ setTerminalServerData(await response.json());
+ setStatus("Ready for websocket connection");
+ } else {
+ changeStatus("Terminal ID is invalid");
+ setTerminalServerData(null);
+ }
+ } catch (e) {
+ changeStatus(`Failed to fetch terminal data`);
+ toast.dark(
+ `Error fetching terminal data from ${termpairHttpServer.toString()}. Is the URL correct? Error message: ${String(
+ e.message
+ )}`,
+
+ { autoClose: false }
+ );
setTerminalServerData(null);
}
}
getTerminalData();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [terminalId]);
useEffect(() => {
@@ -491,11 +714,12 @@ function App() {
xterm.resize(terminalSize.cols, terminalSize.rows);
}, 500)
);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [terminalSize, xterm]);
useEffect(() => {
function setupWebsocketConnection() {
- if (status !== null) {
+ if (status !== "Ready for websocket connection") {
return;
}
if (
@@ -503,12 +727,15 @@ function App() {
) {
return;
}
+ if (!termpairWebsocketServer) {
+ return;
+ }
changeStatus("Connecting...");
-
- const ws_protocol = window.location.protocol === "https:" ? "wss" : "ws";
- const webSocket = new WebSocket(
- `${ws_protocol}://${window.location.hostname}:${window.location.port}${window.location.pathname}connect_browser_to_terminal?terminal_id=${terminalServerData.terminal_id}`
+ const connectWebsocketUrl = new URL(
+ `connect_browser_to_terminal?terminal_id=${terminalId}`,
+ termpairWebsocketServer
);
+ const webSocket = new WebSocket(connectWebsocketUrl.toString());
xterm.attachCustomKeyEventHandler(
getCustomKeyEventHandler(
@@ -706,7 +933,9 @@ function App() {
aesKeys.current.maxIvCount == null
) {
console.error(e);
+ console.error(data);
changeStatus("Failed to obtain encryption keys");
+ return;
}
}
} else if (data.event === "aes_key_rotation") {
@@ -744,12 +973,22 @@ function App() {
});
}
setupWebsocketConnection();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [terminalServerData, status]);
+ const showLandingPage =
+ [null, "No Terminal provided", "Failed to fetch terminal data"].indexOf(
+ status
+ ) > -1 || isStaticallyHosted === null;
+
const content = (
- {[null, "No Terminal provided"].indexOf(status) > -1 ? (
- str:
plaintext = encryption.aes_decrypt(self.secret_browser_key, ciphertext)
return plaintext
- def get_max_iv_count(self, start_iv_count: int) -> int:
+ def get_max_iv_for_browser(self, start_iv_count: int) -> int:
+ # each browser for this session encrypts using the same AES key.
+ # To avoid re-using an IV, we assign each a window to operate within.
+ # If the end of the window is hit, a new key is requested.
max_iv_count = floor(
start_iv_count
+ self.message_count_rotation_required
@@ -148,8 +149,7 @@ async def register_broadcast_with_server(self) -> TerminalId:
)
event, payload = await self.receive_data_from_websocket()
if event == "start_broadcast":
- terminal_id = payload
- return terminal_id
+ return payload
elif event == "fatal_error":
raise TermPairError(fatal_server_error_msg(payload))
else:
@@ -161,7 +161,6 @@ async def register_broadcast_with_server(self) -> TerminalId:
async def run(self):
self.terminal_id = await self.register_broadcast_with_server()
- self.share_url = self.get_share_url(self.url, self.terminal_id)
self.print_broadcast_init_message()
@@ -269,7 +268,7 @@ async def task_receive_websocket_messages(self):
"b64_pk_browser_aes_key": b64_pk_browser_aes_key,
"encoding": "browser_public_key",
"iv_count": iv_count,
- "max_iv_count": self.aes_keys.get_max_iv_count(
+ "max_iv_count": self.aes_keys.get_max_iv_for_browser(
iv_count
),
"salt": base64.b64encode(
@@ -301,28 +300,37 @@ async def receive_data_from_websocket(self):
return parsed["event"], parsed.get("payload")
def print_broadcast_init_message(self):
- cmd_str = " ".join(shlex.quote(c) for c in self.cmd)
_, cols = utils.get_terminal_size(sys.stdin)
- dashes = "-" * cols
- print(
- textwrap.dedent(
- f""" {dashes}
- \033[1m\033[0;32mConnection established with end-to-end encryption\033[0m 🔒
- Sharing {cmd_str!r} at
- {self.share_url}
+ msg = [
+ "\033[1m\033[0;32mConnection established with end-to-end encryption\033[0m 🔒",
+ f"Terminal ID: {self.terminal_id}",
+ f"TermPair Server URL: {self.url}",
+ "Sharable link (expires when this process ends):",
+ " " + self.get_share_url(self.url, self.terminal_id),
+ "Type 'exit' or close terminal to stop sharing.",
+ ]
- Type 'exit' or close terminal to stop sharing.
- {dashes}"""
- )
- )
+ dashes = "-" * cols
+ print(dashes)
+ for m in msg:
+ print(m)
+ print(dashes)
def get_share_url(
- self,
- url,
- ws_id,
+ self, url: str, terminal_id: str, static_url: Optional[str] = None
):
- return urljoin(url, f"?terminal_id={ws_id}")
+ if static_url:
+ qp = {
+ "terminal_id": terminal_id,
+ "termpair_server_url": url,
+ }
+ return urljoin(static_url, f"?{urlencode(qp)}")
+ else:
+ qp = {
+ "terminal_id": terminal_id,
+ }
+ return urljoin(url, f"?{urlencode(qp)}")
def handle_new_pty_output(self, cleanup: Callable):
"""forwards pty's output to local stdout AND to websocket"""