Add basic daemon connection authentication

app/src/daemon.ts

@@ -1,24 +1,25 @@
 "use strict";
 
+import http, { IncomingMessage } from "http";
+import WebSocket from "ws";
+
 import { spawn } from "child_process";
 import { Readable } from "stream";
 
-import WebSocket from "ws";
-
 import { DecodeTransform, EncodeTransform } from "./transforms";
 
-export function init(port: number) {
+export function init(port: number, serverPassword?: string) {
+    const server = http.createServer();
+    const wss = new WebSocket.Server({ noServer: true });
+
     process.stdout.write("Starting WebSocket server... ");
 
-    const wss = new WebSocket.Server({ port }, () => {
+    server.on("listening", () => {
-        // eslint-disable-next-line no-console
+        process.stdout.write("Done!\n");
-        console.log("Done!");
     });
-
     wss.on("error", err => {
-        // eslint-disable-next-line no-console
+        console.error("Failed!");
-        console.log("Failed!");
+        console.error(err.message);
-        console.error(err);
     });
 
     wss.on("connection", socket => {
@@ -42,14 +43,64 @@ export function init(port: number) {
 
         // bridge.stdout -> socket
         bridge.stdout.pipe(new DecodeTransform()).on("data", data => {
-            // Socket can be CLOSING here
+            if (socket.readyState !== WebSocket.OPEN) {
-            if (socket.readyState === WebSocket.OPEN) {
+                return;
-                socket.send(JSON.stringify(data));
             }
+
+            socket.send(JSON.stringify(data));
         });
 
         // Handle termination
         socket.on("close", () => bridge.kill());
         bridge.on("exit", () => socket.close());
     });
+
+    /**
+     * Authenticates requests by checking password URL param against
+     * server password specified in launch options.
+     */
+    function authenticate(req: IncomingMessage) {
+        if (!serverPassword) return true;
+
+        const password = new URL(
+            req.url!,
+            `http://${req.headers.host}`
+        ).searchParams.get("password");
+
+        return password === serverPassword;
+    }
+
+    server.on("upgrade", (req, socket, head) => {
+        if (
+            // Only accept WebSocket requests from extension origins
+            !req.headers.origin?.startsWith("moz-extension://") ||
+            !authenticate(req)
+        ) {
+            socket.write("HTTP/1.1 401 Unauthorized\r\n\r\n");
+            socket.destroy();
+            return;
+        }
+
+        wss.handleUpgrade(req, socket, head, ws => {
+            wss.emit("connection", ws, req);
+        });
+    });
+
+    /**
+     * JS WebSocket API does not allow access to connection errors, so
+     * provide an endpoint for feedback on invalid authentication.
+     */
+    server.on("request", (req, res) => {
+        if (!authenticate(req)) {
+            res.writeHead(401);
+            res.end();
+
+            return;
+        }
+
+        res.writeHead(200);
+        res.end();
+    });
+
+    server.listen(port);
 }

app/src/main.ts

@@ -6,7 +6,7 @@ import { __applicationVersion } from "../package.json";
 
 const argv = minimist(process.argv.slice(2), {
     boolean: ["daemon", "help", "version"],
-    string: ["__name", "port"],
+    string: ["__name", "port", "password"],
     alias: {
         d: "daemon",
         h: "help",
@@ -36,6 +36,11 @@ Options:
                    options.
   -p, --port       Set port number for WebSocket server. This must match the
                    port set in the extension options.
+  --password       Set an optional password for the WebSocket server. This must
+                   match the password set in the extension options.
+                   WARNING: This password is intended only as a basic access
+                   control measure and is transmitted in plain text even over
+                   remote connections!
 `
     );
 } else if (argv.daemon) {
@@ -46,7 +51,7 @@ Options:
     }
 
     import("./daemon").then(daemon => {
-        daemon.init(port);
+        daemon.init(port, argv.password);
     });
 } else {
     import("./bridge");

ext/src/_locales/en/messages.json

@@ -144,6 +144,14 @@
         "message": "Bridge issue",
         "description": "Bridge error status title text."
     },
+    "optionsBridgeIssueStatusTextTimedOut": {
+        "message": "Connection timed out.",
+        "description": "Bridge timed out issue additional description text."
+    },
+    "optionsBridgeIssueStatusTextAuthentication": {
+        "message": "Failed to authenticate connection.",
+        "description": "Bridge authentication issue additional description text."
+    },
     "optionsBridgeNotFoundStatusTitle": {
         "message": "Bridge not found",
         "description": "Bridge missing status title text."
@@ -197,6 +205,10 @@
         "message": "No action needed.",
         "description": "Recommended action for when both bridge and extension versions are compatible or likely compatible."
     },
+    "optionsBridgeRefresh": {
+        "message": "Refresh bridge status",
+        "description": "Bridge status refresh button title."
+    },
     "optionsBridgeUpdateCheck": {
         "message": "Check for Updates",
         "description": "Update check button title."
@@ -241,6 +253,10 @@
         "message": "If the regular bridge connection fails, attempt to connect to a bridge running in daemon mode.",
         "description": "Backup daemon checkbox description."
     },
+    "optionsBridgeBackupPassword": {
+        "message": "...with password:",
+        "description": "Daemon password option label."
+    },
 
     "optionsMediaCategoryName": {
         "message": "Media casting",

ext/src/defaultOptions.ts

@@ -7,6 +7,7 @@ export interface Options {
     bridgeBackupEnabled: boolean;
     bridgeBackupHost: string;
     bridgeBackupPort: number;
+    bridgeBackupPassword: string;
     mediaEnabled: boolean;
     mediaSyncElement: boolean;
     mediaStopOnUnload: boolean;
@@ -29,6 +30,7 @@ export default {
     bridgeBackupEnabled: false,
     bridgeBackupHost: "localhost",
     bridgeBackupPort: 9556,
+    bridgeBackupPassword: "",
     mediaEnabled: true,
     mediaSyncElement: false,
     mediaStopOnUnload: false,

ext/src/lib/bridge.ts

@@ -44,6 +44,7 @@ export interface BridgeInfo {
 
 export class BridgeConnectionError extends Error {}
 export class BridgeTimedOutError extends Error {}
+export class BridgeAuthenticationError extends Error {}
 
 /**
  * Creates a temporary bridge to query the version info,
@@ -73,10 +74,14 @@ const getInfo = () =>
                 { subject: "bridge:/getInfo", data: version }
             );
         } catch (err) {
-            logger.error("Bridge connection failed.");
+            if (err === 401) {
-            reject(new BridgeConnectionError());
+                reject(new BridgeAuthenticationError());
-            clearTimeout(bridgeTimeoutId);
+            } else {
+                logger.error("Bridge connection failed.");
+                reject(new BridgeConnectionError());
+            }
 
+            clearTimeout(bridgeTimeoutId);
             return;
         }
 

ext/src/lib/nativeMessaging.ts

@@ -97,8 +97,12 @@ function connectNative(application: string): Port {
     };
 
     port.onDisconnect.addListener(async () => {
-        const { bridgeBackupEnabled, bridgeBackupHost, bridgeBackupPort } =
+        const {
-            await options.getAll();
+            bridgeBackupEnabled,
+            bridgeBackupHost,
+            bridgeBackupPort,
+            bridgeBackupPassword
+        } = await options.getAll();
 
         if (!bridgeBackupEnabled) {
             portObject.error = {
@@ -117,9 +121,12 @@ function connectNative(application: string): Port {
         if (port.error && !isNativeHostStatusKnown) {
             isNativeHostStatusKnown = true;
 
-            socket = new WebSocket(
+            const url = new URL(`ws://${bridgeBackupHost}:${bridgeBackupPort}`);
-                `ws://${bridgeBackupHost}:${bridgeBackupPort}`
+            if (bridgeBackupPassword) {
-            );
+                url.searchParams.append("password", bridgeBackupPassword);
+            }
+
+            socket = new WebSocket(url.href);
 
             socket.addEventListener("open", () => {
                 // Send all messages in queue
@@ -167,8 +174,12 @@ async function sendNativeMessage(application: string, message: Message) {
     try {
         return await browser.runtime.sendNativeMessage(application, message);
     } catch {
-        const { bridgeBackupEnabled, bridgeBackupHost, bridgeBackupPort } =
+        const {
-            await options.getAll();
+            bridgeBackupEnabled,
+            bridgeBackupHost,
+            bridgeBackupPort,
+            bridgeBackupPassword
+        } = await options.getAll();
 
         if (!bridgeBackupEnabled) {
             throw logger.error(
@@ -176,11 +187,25 @@ async function sendNativeMessage(application: string, message: Message) {
             );
         }
 
-        return await new Promise((resolve, reject) => {
+        const url = new URL(`http://${bridgeBackupHost}:${bridgeBackupPort}`);
-            const ws = new WebSocket(
+        if (bridgeBackupPassword) {
-                `ws://${bridgeBackupHost}:${bridgeBackupPort}`
+            url.searchParams.append("password", bridgeBackupPassword);
+        }
+
+        const res = await fetch(url.href);
+        if (res.status === 401) {
+            logger.error(
+                "Bridge daemon connection failed due to authentication error."
             );
 
+            throw 401;
+        }
+
+        url.protocol = "ws";
+
+        return await new Promise((resolve, reject) => {
+            const ws = new WebSocket(url.href);
+
             ws.addEventListener("open", () => {
                 ws.send(JSON.stringify(message));
             });
@@ -191,7 +216,7 @@ async function sendNativeMessage(application: string, message: Message) {
             });
 
             ws.addEventListener("error", () => {
-                logger.error("No bridge application found.");
+                logger.error("Bridge daemon connection error.");
                 reject();
             });
         });

ext/src/ui/options/Bridge.svelte

@@ -4,7 +4,11 @@
 
     import LoadingIndicator from "../LoadingIndicator.svelte";
 
-    import bridge, { BridgeInfo, BridgeTimedOutError } from "../../lib/bridge";
+    import bridge, {
+        BridgeInfo,
+        BridgeTimedOutError,
+        BridgeAuthenticationError
+    } from "../../lib/bridge";
     import logger from "../../lib/logger";
 
     import { Options } from "../../lib/options";
@@ -14,42 +18,54 @@
     export let opts: Options;
 
     let bridgeInfo: Nullable<BridgeInfo> = null;
+    let bridgeInfoError: Nullable<Error> = null;
     let isLoadingInfo = true;
-    let isLoadingInfoTimedOut = false;
 
     // Status
-    let infoClass = "bridge__info";
     let statusIcon: string;
     let statusTitle: string;
     let statusText: Nullable<string> = null;
 
-    onMount(async () => {
+    async function checkBridgeStatus() {
+        // Reset state
+        bridgeInfo = null;
+        bridgeInfoError = null;
+        isLoadingInfo = true;
+        statusText = null;
+
         try {
             bridgeInfo = await bridge.getInfo();
         } catch (err) {
             logger.error("Failed to fetch bridge/platform info.");
-            if (err instanceof BridgeTimedOutError) {
+            if (err instanceof Error) {
-                isLoadingInfoTimedOut = true;
+                bridgeInfoError = err;
             }
         }
 
         isLoadingInfo = false;
 
-        infoClass += ` ${
-            !bridgeInfo
-                ? isLoadingInfoTimedOut
-                    ? "bridge__info--timed-out"
-                    : "bridge__info--not-found"
-                : "bridge__info--found"
-        }`;
-
         if (!bridgeInfo) {
-            statusIcon = "assets/icons8-cancel-120.png";
+            if (
-            statusTitle = _("optionsBridgeNotFoundStatusTitle");
+                bridgeInfoError instanceof BridgeTimedOutError ||
-            statusText = _("optionsBridgeNotFoundStatusText");
+                bridgeInfoError instanceof BridgeAuthenticationError
-        } else if (isLoadingInfoTimedOut) {
+            ) {
-            statusIcon = "assets/icons8-warn-120.png";
+                statusIcon = "assets/icons8-warn-120.png";
-            statusTitle = _("optionsBridgeIssueStatusTitle");
+                statusTitle = _("optionsBridgeIssueStatusTitle");
+
+                if (bridgeInfoError instanceof BridgeTimedOutError) {
+                    statusText = _("optionsBridgeIssueStatusTextTimedOut");
+                } else if (
+                    bridgeInfoError instanceof BridgeAuthenticationError
+                ) {
+                    statusText = _(
+                        "optionsBridgeIssueStatusTextAuthentication"
+                    );
+                }
+            } else {
+                statusIcon = "assets/icons8-cancel-120.png";
+                statusTitle = _("optionsBridgeNotFoundStatusTitle");
+                statusText = _("optionsBridgeNotFoundStatusText");
+            }
         } else {
             if (bridgeInfo.isVersionCompatible) {
                 statusIcon = "assets/icons8-ok-120.png";
@@ -59,6 +75,10 @@
                 statusTitle = _("optionsBridgeIssueStatusTitle");
             }
         }
+    }
+
+    onMount(() => {
+        checkBridgeStatus();
     });
 
     // Updates
@@ -155,7 +175,11 @@
             <progress />
         </div>
     {:else}
-        <div class={infoClass}>
+        <div
+            class="bridge__info"
+            class:bridge__info--found={!!bridgeInfo}
+            class:bridge__info--error={!bridgeInfo}
+        >
             <div class="bridge__status">
                 <img
                     class="bridge__status-icon"
@@ -168,6 +192,15 @@
                 {#if statusText}
                     <p class="bridge__status-text">{statusText}</p>
                 {/if}
+
+                <button
+                    type="button"
+                    class="ghost bridge__refresh"
+                    title={_("optionsBridgeRefresh")}
+                    on:click={checkBridgeStatus}
+                >
+                    <img src="assets/photon_refresh.svg" alt="icon, refresh" />
+                </button>
             </div>
 
             {#if bridgeInfo}
@@ -209,44 +242,59 @@
                 </table>
             {/if}
         </div>
+    {/if}
 
-        <div class="bridge__options">
+    <div class="bridge__options">
-            <div class="option option--inline">
+        <div class="option option--inline">
-                <div class="option__control">
+            <div class="option__control">
-                    <input
+                <input
-                        name="bridgeBackupEnabled"
+                    name="bridgeBackupEnabled"
-                        id="bridgeBackupEnabled"
+                    id="bridgeBackupEnabled"
-                        type="checkbox"
+                    type="checkbox"
-                        bind:checked={opts.bridgeBackupEnabled}
+                    bind:checked={opts.bridgeBackupEnabled}
-                    />
+                />
-                </div>
+            </div>
-                <label class="option__label" for="bridgeBackupEnabled">
+            <label class="option__label" for="bridgeBackupEnabled">
-                    {backupMessageStart}
+                {backupMessageStart}
-                    <input
+                <input
-                        class="bridge__backup-host"
+                    class="bridge__backup-host"
-                        name="bridgeBackupHost"
+                    name="bridgeBackupHost"
-                        type="text"
+                    type="text"
-                        required
+                    required
-                        bind:value={opts.bridgeBackupHost}
+                    bind:value={opts.bridgeBackupHost}
-                    />
+                />
-                    :
+                :
-                    <input
+                <input
-                        class="bridge__backup-port"
+                    class="bridge__backup-port"
-                        name="bridgeBackupPort"
+                    name="bridgeBackupPort"
-                        type="number"
+                    type="number"
-                        required
+                    required
-                        min="1025"
+                    min="1025"
-                        max="65535"
+                    max="65535"
-                        bind:value={opts.bridgeBackupPort}
+                    bind:value={opts.bridgeBackupPort}
-                    />
+                />
-                    {backupMessageEnd}
+                {backupMessageEnd}
-                </label>
+
-                <div class="option__description">
+                {#if opts.showAdvancedOptions}
-                    {_("optionsBridgeBackupEnabledDescription")}
+                    <label class="bridge__backup-password">
-                </div>
+                        {_("optionsBridgeBackupPassword")}
+
+                        <input
+                            id="bridgeBackupPassword"
+                            placeholder="Password"
+                            type="password"
+                            bind:value={opts.bridgeBackupPassword}
+                        />
+                    </label>
+                {/if}
+            </label>
+            <div class="option__description">
+                {_("optionsBridgeBackupEnabledDescription")}
             </div>
         </div>
+    </div>
 
+    {#if !isLoadingInfo}
         <div class="bridge__update-info">
             {#if isUpdateAvailable}
                 <div class="bridge__update">

ext/src/ui/options/assets/photon_refresh.svg

@@ -0,0 +1,13 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <style>
+        @media (prefers-color-scheme: dark) {
+            path {
+                fill: rgba(249, 249, 250, .8);
+            }
+        }
+    </style>
+    <path fill="rgba(12, 12, 13, .8)" d="M15 1a1 1 0 0 0-1 1v2.418A6.995 6.995 0 1 0 8 15a6.954 6.954 0 0 0 4.95-2.05 1 1 0 0 0-1.414-1.414A5.019 5.019 0 1 1 12.549 6H10a1 1 0 0 0 0 2h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"></path>
+</svg>

ext/src/ui/options/styles/index.css

@@ -99,16 +99,10 @@ button.ghost:not(:hover) {
 .bridge__info {
     display: flex;
     padding-inline-start: 25px;
+    position: relative;
 }
 
-.bridge__status {
+.bridge__info--error {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    margin-inline-end: 25px;
-}
-
-.bridge__info--not-found {
     padding-inline-end: 25px;
 }
 .bridge__info--found .bridge__status {
@@ -116,13 +110,36 @@ button.ghost:not(:hover) {
     padding-inline-end: 25px;
 }
 
-.bridge__info--timed-out .bridge__status {
+.bridge__info--error .bridge__status {
-    display: flex;
+    display: grid;
-    flex-direction: row;
+    grid-template-columns: min-content 1fr;
-    gap: 20px;
+    grid-template-rows: min-content 1fr;
+    grid-template-areas:
+        "status-icon status-title"
+        "status-icon status-text";
+    gap: 5px 20px;
 }
-.bridge__info--timed-out .bridge__status-title {
+.bridge__info--found .bridge__status-icon {
-    font-size: 1.75em;
+    margin-block-end: 5px;
+}
+.bridge__info--error .bridge__status-icon {
+    grid-area: status-icon;
+}
+.bridge__info--error .bridge__status-title {
+    grid-area: status-title;
+    white-space: normal;
+}
+.bridge__info--error .bridge__status-text {
+    grid-area: status-text;
+    margin-top: initial;
+    align-self: start;
+}
+
+.bridge__status {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin-inline-end: 25px;
 }
 
 .bridge__status-title {
@@ -138,31 +155,6 @@ button.ghost:not(:hover) {
     font-size: 1.15em;
     text-align: center;
 }
-
-.bridge__info--not-found .bridge__status {
-    display: grid;
-    grid-template-columns: min-content 1fr;
-    grid-template-rows: min-content min-content;
-    grid-template-areas:
-        "status-icon status-title"
-        "status-icon status-text";
-}
-.bridge__info--found .bridge__status-icon {
-    margin-block-end: 5px;
-}
-.bridge__info--not-found .bridge__status-icon {
-    grid-area: status-icon;
-    margin-inline-end: 10px;
-}
-.bridge__info--not-found .bridge__status-title {
-    grid-area: status-title;
-    white-space: normal;
-}
-.bridge__info--not-found .bridge__status-text {
-    grid-area: status-text;
-    margin-top: initial;
-}
-
 .bridge__stats {
     border-collapse: collapse;
     border-spacing: 0;
@@ -176,6 +168,12 @@ button.ghost:not(:hover) {
     white-space: nowrap;
 }
 
+.bridge__refresh {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
 .bridge__options {
     margin-top: 30px;
 }
@@ -215,10 +213,14 @@ button.ghost:not(:hover) {
 .bridge__backup-host {
     width: 125px;
 }
-
 .bridge__backup-port {
     width: 75px;
 }
+.bridge__backup-password {
+    display: block;
+    margin-left: 20px;
+    margin-top: 5px;
+}
 
 .category {
     border: initial;
@@ -423,6 +425,9 @@ button.ghost:not(:hover) {
 input[id^="customUserAgentString-"] {
     width: -moz-available;
 }
+#bridgeBackupPassword {
+    margin-inline-start: 5px;
+}
 
 @media (prefers-color-scheme: dark) {
     .whitelist__item:nth-child(even) {