show error on on lading page for insecure contexts (#89)

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -5,5 +5,9 @@
     },
     "[json]": {
         "editor.formatOnSave": true
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
     }
 }

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

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"

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() {
         ></div>
       ) : (
         <LandingPageContent
+          isSecureContext={window.isSecureContext}
           isStaticallyHosted={isStaticallyHosted}
           connectToTerminalAndWebsocket={connectToTerminalAndWebsocket}
         />

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<boolean>;
   connectToTerminalAndWebsocket: (
     terminalId: string,
@@ -177,7 +179,7 @@ export function LandingPageContent(props: {
       {connectButton}
     </form>
   );
-  const staticLandingContent = (
+  const staticLandingContent = props.isSecureContext ? (
     <div className="py-2">
       <div className="text-2xl py-2">This page is statically hosted</div>
       <div>
@@ -192,7 +194,7 @@ export function LandingPageContent(props: {
       </div>
       {connectForm}
     </div>
-  );
+  ) : null;
 
   const regularServerContent = (
     <>
@@ -247,21 +249,37 @@ export function LandingPageContent(props: {
           always encrypted before being routed through the server.{" "}
           <a href="https://github.com/cs01/termpair">Learn more.</a>
         </div>
+        {!props.isSecureContext ? (
+          <div className="bg-red-800 p-2">
+            <h1>Error</h1>
+            {secureContextHelp}
+          </div>
+        ) : null}
         {props.isStaticallyHosted === null
           ? null
           : props.isStaticallyHosted === true
           ? staticLandingContent
           : regularServerContent}
 
-        <div className="py-2">
-          <div className="text-2xl py-2">Troubleshooting</div>
-          <div className="text-xl ">
-            Initial connection fails or is rejected
-          </div>
-          <div>
-            Ensure you are using a TermPair client compatible with{" "}
-            <span className="font-bold">v{TERMPAIR_VERSION}</span> (the version
-            of this webpage)
+        <div className="py-2 ">
+          <div className="text-2xl py-2 ">Troubleshooting</div>
+          <div className="space-y-5">
+            <div>
+              <div className="text-xl ">
+                Initial connection fails or is rejected
+              </div>
+              <div>
+                Ensure you are using a TermPair client compatible with{" "}
+                <span className="font-bold">v{TERMPAIR_VERSION}</span> (the
+                version of this webpage)
+              </div>
+            </div>
+            <div>
+              <div className="text-xl ">
+                Browser is not running in a secure context
+              </div>
+              <div>{secureContextHelp} </div>
+            </div>
           </div>
         </div>
         {termpairDemoContent}

termpair/frontend_src/src/constants.ts → 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 = (
+  <div>
+    TermPair only works on secure connections. The server must be configured to
+    serve this page over https. See <code>termpair serve --help</code> and{" "}
+    <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts">
+      https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts
+    </a>{" "}
+    for more information.
+  </div>
+);