Respond with 401 if wrong web socket token

commit 79e595b added a secret token
which is required to connect via web socket (to prevent random websites
from connecting to elm-watch). However, I somehow messed up the fix. The
web socket still connects. But it is at least given a difference state,
which makes the web socket connection less useful. No messages with
interesting information was sent to the client, and all commands sent
from the client except one were ignored. The only command the client
could perform is `PressedOpenEditor`, which would execute your
configured command for opening your editor. Not that harmful (unless you
have an insecure editor command), but very annoying (and scary) if it would happen.

This commit responds with 401 and does not initiate a web socket
connection if the secret is wrong. This completely fixes the issue.

It results in worse error messages if this were to happen on `localhost`
for some reason. I include the header `X-Reason: Invalid token` or
`X-Reason: Invalid URL`. They are intentionally vague to not expose too
much to an unauthorized requester, but should help debugging slightly at
least, if needed. And small info message is printed in the terminal.

Author: lydell

src/Errors.ts

@@ -1368,48 +1368,23 @@ ${text(error.message)}
   `;
 }
 
-export function webSocketBadUrl(
-  expectedStart: string,
-  actualUrlString: string,
-): string {
-  return `
-I expected the web socket connection URL to start with:
-
-${expectedStart}
-
-But it looks like this:
-
-${actualUrlString}
-
-The web socket code I generate is supposed to always connect using a correct URL, so something is up here.
-  `.trim();
-}
-
 export function webSocketParamsDecodeError(
   error: Codec.DecoderError,
-  actualUrlString: string,
+  urlParams: URLSearchParams,
 ): string {
   return `
 I ran into trouble parsing the web socket connection URL parameters:
 
 ${printJsonError(error).text}
 
-The URL looks like this:
+The URL parameters look like this:
 
-${actualUrlString}
+${urlParams.toString()}
 
 The web socket code I generate is supposed to always connect using a correct URL, so something is up here. Maybe the JavaScript code running in the browser was compiled with an older version of elm-watch? If so, try reloading the page.
   `;
 }
 
-export function webSocketWrongToken(): string {
-  return `
-The web socket connected with the wrong security token. The security token is used to block malicious connections.
-
-The web socket code I generate is supposed to always connect using the correct token, so something is up here. Maybe the JavaScript code running in the browser was compiled with an older version of elm-watch? If so, try reloading the page.
-    `.trim();
-}
-
 export function webSocketWrongVersion(
   expectedVersion: string,
   actualVersion: string,

src/Hot.ts

@@ -1,6 +1,5 @@
 import * as childProcess from "child_process";
 import * as chokidar from "chokidar";
-import * as crypto from "crypto";
 import * as fs from "fs";
 import * as path from "path";
 import * as Codec from "tiny-decoders";
@@ -68,7 +67,11 @@ import {
   TargetName,
   WebSocketToken,
 } from "./Types";
-import { WebSocketServer, WebSocketServerMsg } from "./WebSocketServer";
+import {
+  WebSocketConnectionRejectedReason,
+  WebSocketServer,
+  WebSocketServerMsg,
+} from "./WebSocketServer";
 
 type WatcherEventName = "added" | "changed" | "removed";
 
@@ -111,6 +114,12 @@ type WebSocketRelatedEvent =
       tag: "WebSocketConnectedWithErrors";
       date: Date;
     }
+  | {
+      tag: "WebSocketConnectionRejected";
+      date: Date;
+      origin: string | undefined;
+      reason: WebSocketConnectionRejectedReason;
+    }
   | {
       tag: "WorkersLimitedAfterWebSocketClosed";
       date: Date;
@@ -190,6 +199,12 @@ type Msg =
       webSocket: WebSocket;
       parseWebSocketConnectRequestUrlResult: ParseWebSocketConnectRequestUrlResult;
     }
+  | {
+      tag: "WebSocketConnectionRejected";
+      date: Date;
+      origin: string | undefined;
+      reason: WebSocketConnectionRejectedReason;
+    }
   | {
       tag: "WebSocketMessageReceived";
       date: Date;
@@ -516,7 +531,7 @@ const initMutable =
     );
 
     const {
-      webSocketServer = new WebSocketServer(portChoice),
+      webSocketServer = new WebSocketServer(portChoice, webSocketToken),
       webSocketConnections = [],
     } = webSocketState ?? {};
 
@@ -540,7 +555,6 @@ const initMutable =
         getNow(),
         logger,
         mutable,
-        webSocketToken,
         dispatch,
         resolvePromise,
         rejectPromise,
@@ -1054,6 +1068,23 @@ function update(
       }
     }
 
+    case "WebSocketConnectionRejected":
+      return [
+        {
+          ...model,
+          latestEvents: [
+            ...model.latestEvents,
+            {
+              tag: "WebSocketConnectionRejected",
+              date: msg.date,
+              origin: msg.origin,
+              reason: msg.reason,
+            },
+          ],
+        },
+        [],
+      ];
+
     case "WebSocketMessageReceived": {
       const result = parseWebSocketToServerMessage(msg.data);
 
@@ -1788,7 +1819,6 @@ function onWebSocketServerMsg(
   now: Date,
   logger: Logger,
   mutable: Mutable,
-  webSocketToken: WebSocketToken,
   dispatch: (msg: Msg) => void,
   resolvePromise: (result: HotRunResult) => void,
   rejectPromise: (error: Error) => void,
@@ -1798,8 +1828,7 @@ function onWebSocketServerMsg(
     case "WebSocketConnected": {
       const result = parseWebSocketConnectRequestUrl(
         mutable.project,
-        webSocketToken,
-        msg.urlString,
+        msg.urlParams,
       );
       const webSocketConnection: WebSocketConnection = {
         webSocket: msg.webSocket,
@@ -1816,6 +1845,15 @@ function onWebSocketServerMsg(
       return;
     }
 
+    case "WebSocketConnectionRejected":
+      dispatch({
+        tag: "WebSocketConnectionRejected",
+        date: now,
+        origin: msg.origin,
+        reason: msg.reason,
+      });
+      return;
+
     case "WebSocketClosed": {
       const removedConnection = mutable.webSocketConnections.find(
         (connection) => connection.webSocket === msg.webSocket,
@@ -2187,15 +2225,10 @@ type ParseWebSocketConnectRequestUrlResult =
     };
 
 type ParseWebSocketConnectRequestUrlError =
-  | {
-      tag: "BadUrl";
-      expectedStart: typeof WEBSOCKET_URL_EXPECTED_START;
-      actualUrlString: string;
-    }
   | {
       tag: "ParamsDecodeError";
       error: Codec.DecoderError;
-      actualUrlString: string;
+      urlParams: URLSearchParams;
     }
   | {
       tag: "TargetDisabled";
@@ -2209,60 +2242,28 @@ type ParseWebSocketConnectRequestUrlError =
       enabledOutputs: Array<OutputPath>;
       disabledOutputs: Array<OutputPath>;
     }
-  | {
-      tag: "WrongToken";
-    }
   | {
       tag: "WrongVersion";
       expectedVersion: "%VERSION%";
       actualVersion: string;
     };
 
-// We used to require `/?`. Putting “elm-watch” in the path is useful for people
-// running elm-watch behind a proxy: They can use the same port for both the web
-// site and elm-watch, and direct traffic by path matching.
-const WEBSOCKET_URL_EXPECTED_START = "/elm-watch?";
-
 function parseWebSocketConnectRequestUrl(
   project: Project,
-  webSocketToken: WebSocketToken,
-  urlString: string,
+  urlParams: URLSearchParams,
 ): ParseWebSocketConnectRequestUrlResult {
-  if (!urlString.startsWith(WEBSOCKET_URL_EXPECTED_START)) {
-    return {
-      tag: "BadUrl",
-      expectedStart: WEBSOCKET_URL_EXPECTED_START,
-      actualUrlString: urlString,
-    };
-  }
-
-  // This never throws as far as I can tell.
-  const params = new URLSearchParams(
-    urlString.slice(WEBSOCKET_URL_EXPECTED_START.length),
-  );
-
   const webSocketConnectedParamsResult = WebSocketConnectedParams.decoder(
-    Object.fromEntries(params),
+    Object.fromEntries(urlParams),
   );
   if (webSocketConnectedParamsResult.tag === "DecoderError") {
     return {
       tag: "ParamsDecodeError",
       error: webSocketConnectedParamsResult.error,
-      actualUrlString: urlString,
+      urlParams,
     };
   }
   const webSocketConnectedParams = webSocketConnectedParamsResult.value;
 
-  const actualToken = Buffer.from(webSocketConnectedParams.webSocketToken);
-  const expectedToken = Buffer.from(webSocketToken);
-  const tokenIsCorrect =
-    Buffer.byteLength(actualToken) === Buffer.byteLength(expectedToken) &&
-    crypto.timingSafeEqual(actualToken, expectedToken);
-
-  if (!tokenIsCorrect) {
-    return { tag: "WrongToken" };
-  }
-
   if (webSocketConnectedParams.elmWatchVersion !== "%VERSION%") {
     return {
       tag: "WrongVersion",
@@ -2340,17 +2341,8 @@ function webSocketConnectRequestUrlErrorToString(
   error: ParseWebSocketConnectRequestUrlError,
 ): string {
   switch (error.tag) {
-    case "BadUrl":
-      return Errors.webSocketBadUrl(error.expectedStart, error.actualUrlString);
-
     case "ParamsDecodeError":
-      return Errors.webSocketParamsDecodeError(
-        error.error,
-        error.actualUrlString,
-      );
-
-    case "WrongToken":
-      return Errors.webSocketWrongToken();
+      return Errors.webSocketParamsDecodeError(error.error, error.urlParams);
 
     case "WrongVersion":
       return Errors.webSocketWrongVersion(
@@ -2763,6 +2755,7 @@ function getLatestEventSleepMs(event: LatestEvent): number {
     case "WebSocketConnectedNeedingCompilation":
     case "WebSocketConnectedNeedingNoAction":
     case "WebSocketConnectedWithErrors":
+    case "WebSocketConnectionRejected":
     case "WorkersLimitedAfterWebSocketClosed":
       return 100;
 
@@ -2923,6 +2916,12 @@ function printEventMessage(event: LatestEvent): string {
     case "WebSocketConnectedWithErrors":
       return `Web socket connected with errors (see the browser for details)`;
 
+    case "WebSocketConnectionRejected": {
+      const origin =
+        event.origin === undefined ? "unknown origin" : quote(event.origin);
+      return `Web socket connection from ${origin} rejected due to: ${printWebSocketConnectionRejectedReason(event.reason)}`;
+    }
+
     case "WebSocketChangedBrowserUiPosition":
       return `Changed browser UI position to ${quote(
         event.browserUiPosition,
@@ -2965,3 +2964,14 @@ function printEventsMessage(
     ? `FYI: The above Elm ${what1} not imported by ${what2}. Nothing to do!`
     : "Everything up to date.";
 }
+
+function printWebSocketConnectionRejectedReason(
+  reason: WebSocketConnectionRejectedReason,
+): string {
+  switch (reason.tag) {
+    case "BadUrl":
+      return `wrong URL prefix – ${quote(reason.expectedStart)} != ${quote(reason.actualUrlString.slice(0, reason.expectedStart.length))}`;
+    case "WrongToken":
+      return "invalid security token";
+  }
+}