From 283c755765b93769299c59d1a4a300aecbbfad38 Mon Sep 17 00:00:00 2001 From: Chad Smith Date: Tue, 31 Aug 2021 08:39:03 -0700 Subject: [PATCH] show error on on lading page for insecure contexts (#89) --- .vscode/extensions.json | 3 + .vscode/settings.json | 4 + CHANGELOG.md | 95 ++++++++++--------- termpair/constants.py | 2 +- termpair/frontend_src/src/App.tsx | 17 +++- .../frontend_src/src/LandingPageContent.tsx | 40 +++++--- .../src/{constants.ts => constants.tsx} | 13 ++- 7 files changed, 113 insertions(+), 61 deletions(-) create mode 100644 .vscode/extensions.json rename termpair/frontend_src/src/{constants.ts => constants.tsx} (74%) diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..79e80ed --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["esbenp.prettier-vscode"] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index a557a37..c28d4fd 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,5 +5,9 @@ }, "[json]": { "editor.formatOnSave": true + }, + "[typescriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true } } \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 049a20a..e639e59 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,81 +1,90 @@ -## 0.3.1.2 -* [bugfix] `termpair --version` was throwing an error. Fix the argument parsing so this command works. -* remove full screen css to avoid unnecesary horizontal scroll bar +## 0.3.1.4 -## 0.3.1.2 -* [bugfix] Require command in command line. `termpair` now results in an error instead of displaying no output and returning 0. -* Upgrade JavaScript dependencies +- Show user a clear error if the browser is not running in a secure context + +## 0.3.1.3 + +- [bugfix] Require command in command line. `termpair` now results in an error instead of displaying no output and returning 0. +- Upgrade JavaScript dependencies ## 0.3.1.1 -* [feature] add small, dark grey outline around the terminal -* [bugfix] center the terminal instead of left aligning it -* [bugfix] better text spacing in bottom status bar + +- [feature] add small, dark grey outline around the terminal +- [bugfix] center the terminal instead of left aligning it +- [bugfix] better text spacing in bottom status bar ## 0.3.1.0 -* [feature] Store user input values of the terminal id, key, and host, and restore them when the page loads -* [bugfix] Ensure width fits on mobile devies + +- [feature] Store user input values of the terminal id, key, and host, and restore them when the page loads +- [bugfix] Ensure width fits on mobile devies ## 0.3.0.0 + **Breaking API Changes** In this version, TermPair clients from previous versions cannot connect to this TermPair server -* Use new key sharing scheme: Different keys used in different directions; keys rotated -* [bugfix] Terminal dimensions in browser match upon initial connection, instead of after resizing -* Allow static site to route terminal traffic through other server. If static site is detected, user can enter the terminal id and server url in the browser UI. -* Allow Terminal ID and initial encryption key to be entered on landing page -* Add additional random string to each encrypted message -* Display version in webpage -* Add troubleshooting instructions to webpage -* Rename `--no-browser-control` argument of `termpair share` to `--read-only` +- Use new key sharing scheme: Different keys used in different directions; keys rotated +- [bugfix] Terminal dimensions in browser match upon initial connection, instead of after resizing +- Allow static site to route terminal traffic through other server. If static site is detected, user can enter the terminal id and server url in the browser UI. +- Allow Terminal ID and initial encryption key to be entered on landing page +- Add additional random string to each encrypted message +- Display version in webpage +- Add troubleshooting instructions to webpage +- Rename `--no-browser-control` argument of `termpair share` to `--read-only` ## 0.2.0.0 -* Add ability to copy+paste using keystrokes (copy with ctrl+shift+c or ctrl+shift+x, and paste with ctrl+shift+v) -* Add a status bar to the bottom of the page -* Show terminal dimensions in bottom status bar -* Add toasts to notify user of various events -* Fix bug where connected browsers do not have their websocket connection closed when terminal closes, which makes it look like the terminal is still connected when it is not. -* Improve error messages, in particular if there is no server running -* Fixed bug where websocket connection is briefly accepted regardless of whether a valid terminal id is provided to `/terminal/{terminal_id}`. Instead of returning a JSON object with the TermPair version, a 404 error is now returned. -* [dev] migrate codebase to typescript -* [dev] use React functional component instead of class component for main application + +- Add ability to copy+paste using keystrokes (copy with ctrl+shift+c or ctrl+shift+x, and paste with ctrl+shift+v) +- Add a status bar to the bottom of the page +- Show terminal dimensions in bottom status bar +- Add toasts to notify user of various events +- Fix bug where connected browsers do not have their websocket connection closed when terminal closes, which makes it look like the terminal is still connected when it is not. +- Improve error messages, in particular if there is no server running +- Fixed bug where websocket connection is briefly accepted regardless of whether a valid terminal id is provided to `/terminal/{terminal_id}`. Instead of returning a JSON object with the TermPair version, a 404 error is now returned. +- [dev] migrate codebase to typescript +- [dev] use React functional component instead of class component for main application ## 0.1.1.1 -* Fix server bug when using SSL certs (#44) + +- Fix server bug when using SSL certs (#44) ## 0.1.1.0 -* Ensure error message is printed to browser's terminal if site is not served in a secure context (#39) -* Make default TermPair terminal client port 8000 to match default server port (#38) -* Always display port to connect to in browser's connection instructions + +- Ensure error message is printed to browser's terminal if site is not served in a secure context (#39) +- Make default TermPair terminal client port 8000 to match default server port (#38) +- Always display port to connect to in browser's connection instructions ## 0.1.0.2 -* Change default sharing port to None due to difficulties sharing to port 80/reverse proxies -* Print port in web UI's sharing command + +- Change default sharing port to None due to difficulties sharing to port 80/reverse proxies +- Print port in web UI's sharing command ## 0.1.0.1 -* Remove debug message from server + +- Remove debug message from server ## 0.1.0.0 -* Pin dependencies -* Change default sharing port to 8000 to match default server port +- Pin dependencies +- Change default sharing port to 8000 to match default server port ## 0.0.1.3 -* Upgrade xtermjs +- Upgrade xtermjs ## 0.0.1.2 -* Update landing page when terminal id is not provided +- Update landing page when terminal id is not provided ## 0.0.1.1 -* Fix pipx install link in frontend +- Fix pipx install link in frontend ## 0.0.1.0 -* Add end-to-end encryption -* Change `termpair serve` to allow browser control by default, and update CLI API by replacing `-a` flag with `-n` flag. +- Add end-to-end encryption +- Change `termpair serve` to allow browser control by default, and update CLI API by replacing `-a` flag with `-n` flag. ## 0.0.3.0 -* Use FastAPI on backend and update UI +- Use FastAPI on backend and update UI diff --git a/termpair/constants.py b/termpair/constants.py index 64848c0..f4ac050 100644 --- a/termpair/constants.py +++ b/termpair/constants.py @@ -6,4 +6,4 @@ class TermPairError(Exception): # this must match constants.ts -TERMPAIR_VERSION = "0.3.1.3" +TERMPAIR_VERSION = "0.3.1.4" diff --git a/termpair/frontend_src/src/App.tsx b/termpair/frontend_src/src/App.tsx index 0e3e98e..c015fc4 100644 --- a/termpair/frontend_src/src/App.tsx +++ b/termpair/frontend_src/src/App.tsx @@ -10,7 +10,12 @@ import { AesKeysRef, Status, TerminalServerData, TerminalSize } from "./types"; import { TopBar } from "./TopBar"; import { ErrorBoundary } from "./ErrorBoundary"; import { BottomBar } from "./BottomBar"; -import { defaultTerminalId, defaultTermpairServer, xterm } from "./constants"; +import { + defaultTerminalId, + defaultTermpairServer, + secureContextHelp, + xterm, +} from "./constants"; import { toastStatus, websocketUrlFromHttpUrl } from "./utils"; import { getCustomKeyEventHandler, @@ -62,10 +67,7 @@ function handleStatusChange( break; case "Browser is not running in a secure context": - toast.dark( - "Fatal Error: TermPair only works on secure connections. Ensure url starts with https. " + - "See https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts and `termpair serve --help` for more information." - ); + toast.dark(secureContextHelp); break; case "Connecting...": @@ -127,6 +129,10 @@ function App() { const [terminalId, setTerminalId] = useState(defaultTerminalId); useEffect(() => { + if (!window.isSecureContext) { + changeStatus("Browser is not running in a secure context"); + return; + } // run once when initially opened const initialize = async () => { let staticallyHosted; @@ -317,6 +323,7 @@ function App() { > ) : ( diff --git a/termpair/frontend_src/src/LandingPageContent.tsx b/termpair/frontend_src/src/LandingPageContent.tsx index 56c35db..975b2a9 100644 --- a/termpair/frontend_src/src/LandingPageContent.tsx +++ b/termpair/frontend_src/src/LandingPageContent.tsx @@ -6,6 +6,7 @@ import { defaultTermpairServer, localStorageKeys, pipxTermpairShareCommand, + secureContextHelp, termpairShareCommand, TERMPAIR_VERSION, } from "./constants"; @@ -14,6 +15,7 @@ import { getAESKey } from "./encryption"; import { websocketUrlFromHttpUrl } from "./utils"; export function LandingPageContent(props: { + isSecureContext: boolean; isStaticallyHosted: Nullable; connectToTerminalAndWebsocket: ( terminalId: string, @@ -177,7 +179,7 @@ export function LandingPageContent(props: { {connectButton} ); - const staticLandingContent = ( + const staticLandingContent = props.isSecureContext ? (
This page is statically hosted
@@ -192,7 +194,7 @@ export function LandingPageContent(props: {
{connectForm}
- ); + ) : null; const regularServerContent = ( <> @@ -247,21 +249,37 @@ export function LandingPageContent(props: { always encrypted before being routed through the server.{" "} Learn more. + {!props.isSecureContext ? ( +
+

Error

+ {secureContextHelp} +
+ ) : null} {props.isStaticallyHosted === null ? null : props.isStaticallyHosted === true ? staticLandingContent : regularServerContent} -
-
Troubleshooting
-
- Initial connection fails or is rejected -
-
- Ensure you are using a TermPair client compatible with{" "} - v{TERMPAIR_VERSION} (the version - of this webpage) +
+
Troubleshooting
+
+
+
+ Initial connection fails or is rejected +
+
+ Ensure you are using a TermPair client compatible with{" "} + v{TERMPAIR_VERSION} (the + version of this webpage) +
+
+
+
+ Browser is not running in a secure context +
+
{secureContextHelp}
+
{termpairDemoContent} diff --git a/termpair/frontend_src/src/constants.ts b/termpair/frontend_src/src/constants.tsx similarity index 74% rename from termpair/frontend_src/src/constants.ts rename to termpair/frontend_src/src/constants.tsx index db0fc51..88cad5d 100644 --- a/termpair/frontend_src/src/constants.ts +++ b/termpair/frontend_src/src/constants.tsx @@ -1,6 +1,6 @@ import { Terminal as Xterm } from "xterm"; // this must match constants.py -export const TERMPAIR_VERSION = "0.3.1.3"; +export const TERMPAIR_VERSION = "0.3.1.4"; export const defaultTermpairServer = new URL( `${window.location.protocol}//${window.location.hostname}:${window.location.port}${window.location.pathname}` @@ -42,3 +42,14 @@ export const localStorageKeys = { terminalId: "termpairTerminalId", host: "termpairCustomHost", }; + +export const secureContextHelp = ( +
+ TermPair only works on secure connections. The server must be configured to + serve this page over https. See termpair serve --help and{" "} + + https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts + {" "} + for more information. +
+);