Add option to use a secure connection for the daemon

ext/src/_locales/en/messages.json

@@ -309,8 +309,12 @@
         "message": "If the regular bridge connection fails, attempt to connect to a bridge running in daemon mode.",
         "description": "Backup daemon checkbox description."
     },
+    "optionsBridgeBackupSecure": {
+        "message": "Use a secure daemon connection",
+        "description": "Daemon secure option checkbox label."
+    },
     "optionsBridgeBackupPassword": {
-        "message": "...with password:",
+        "message": "Password:",
         "description": "Daemon password option label."
     },
 

ext/src/defaultOptions.ts

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

ext/src/lib/nativeMessaging.ts

@@ -10,11 +10,15 @@ type MessageListener = (message: Message) => void;
  * Create backup server URL from configured options.
  */
 async function getBackupServerUrl() {
-    const { bridgeBackupHost, bridgeBackupPort, bridgeBackupPassword } =
-        await options.getAll();
+    const {
+        bridgeBackupHost,
+        bridgeBackupPort,
+        bridgeBackupSecure,
+        bridgeBackupPassword
+    } = await options.getAll();
 
     const url = new URL(
-        `ws://${
+        `${bridgeBackupSecure ? "wss" : "ws"}://${
             // Handle IPv6 address formatting
             bridgeBackupHost.includes(":")
                 ? `[${bridgeBackupHost}]`
@@ -168,7 +172,9 @@ export async function sendNativeMessage(application: string, message: Message) {
     try {
         return await browser.runtime.sendNativeMessage(application, message);
     } catch {
-        const bridgeBackupEnabled = await options.get("bridgeBackupEnabled");
+        const { bridgeBackupEnabled, bridgeBackupSecure } =
+            await options.getAll();
+
         if (!bridgeBackupEnabled) {
             throw logger.error(
                 "Bridge connection failed and backup not enabled."
@@ -178,7 +184,7 @@ export async function sendNativeMessage(application: string, message: Message) {
         const backupServerUrl = await getBackupServerUrl();
 
         const backupServerHttpUrl = new URL(backupServerUrl);
-        backupServerHttpUrl.protocol = "http";
+        backupServerHttpUrl.protocol = bridgeBackupSecure ? "https" : "http";
 
         // Send HTTP request to check authentication
         if ((await fetch(backupServerHttpUrl)).status === 401) {

ext/src/ui/options/Bridge.svelte

@@ -272,24 +272,41 @@
                     bind:value={opts.bridgeBackupPort}
                 />
                 {backupMessageEnd}
+            </label>
+            <div class="option__description">
+                {_("optionsBridgeBackupEnabledDescription")}
+            </div>
+        </div>
 
-                {#if opts.showAdvancedOptions}
-                    <label class="bridge__backup-password">
+        {#if opts.showAdvancedOptions}
+            <fieldset class="category" disabled={!opts.bridgeBackupEnabled}>
+                <div class="option option--inline">
+                    <div class="option__control">
+                        <input
+                            id="bridgeBackupSecure"
+                            type="checkbox"
+                            bind:checked={opts.bridgeBackupSecure}
+                        />
+                    </div>
+                    <label class="option__label" for="bridgeBackupSecure">
+                        {_("optionsBridgeBackupSecure")}
+                    </label>
+                </div>
+                <div class="option">
+                    <label class="option__label" for="bridgeBackupPassword">
                         {_("optionsBridgeBackupPassword")}
-
+                    </label>
+                    <div class="option__control">
                         <input
                             id="bridgeBackupPassword"
                             placeholder="Password"
                             type="password"
                             bind:value={opts.bridgeBackupPassword}
                         />
-                    </label>
-                {/if}
-            </label>
-            <div class="option__description">
-                {_("optionsBridgeBackupEnabledDescription")}
-            </div>
-        </div>
+                    </div>
+                </div>
+            </fieldset>
+        {/if}
     </div>
 
     {#if !isLoadingInfo}

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

@@ -208,6 +208,10 @@ input:placeholder-shown {
     padding: 10px 0;
 }
 
+.bridge__options > .category {
+    grid-template-columns: 100px minmax(0, 1fr);
+}
+
 .form > .category {
     border-bottom: 1px solid var(--border-color);
 }
@@ -274,6 +278,11 @@ input:placeholder-shown {
     display: inline-block;
 }
 
+.category:disabled .option__label,
+.category:disabled .option__description {
+    opacity: 0.65;
+}
+
 .option__recommended {
     background-color: var(--blue-60);
     border-radius: 2px;