frontend: store secretKey in service worker.

This fixes an issue where a potentially malicious custom firmware could steal the secretKey

Author: ffreddow

frontend/src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { useLocation } from "preact-iso";
 import Nav from "react-bootstrap/Nav";
-import { AppState, bc, fetchClient, FRONTEND_URL, loggedIn, pub_key, resetSecret, secret } from "../utils";
+import { AppState, bc, fetchClient, FRONTEND_URL, loggedIn, pub_key, resetSecret, secret, clearSecretKeyFromServiceWorker } from "../utils";
 import { useTranslation } from "react-i18next";
 import { Navbar } from "react-bootstrap";
 import Median from "median-js-bridge";
@@ -23,7 +23,7 @@ export async function logout(logout_all: boolean) {
 
         resetSecret();
         localStorage.removeItem("loginSalt");
-        localStorage.removeItem("secretKey");
+        await clearSecretKeyFromServiceWorker();
 
         loggedIn.value = AppState.LoggedOut;
         bc.postMessage("logout");

frontend/src/components/login.tsx

@@ -1,7 +1,7 @@
 import { Component } from "preact";
 import Button from "react-bootstrap/Button"
 import Form from "react-bootstrap/Form";
-import { AppState, bc, fetchClient, loggedIn } from "../utils";
+import { AppState, bc, fetchClient, loggedIn, storeSecretKeyInServiceWorker } from "../utils";
 import { showAlert } from "./Alert";
 import { generate_hash, get_salt_for_user } from "../utils";
 import { Modal } from "react-bootstrap";
@@ -80,7 +80,7 @@ export class Login extends Component<{}, LoginState> {
         const secret_key = await generate_hash(this.state.password, new Uint8Array(secret_salt), sodium.crypto_secretbox_KEYBYTES);
         const encoded_key = Base64.fromUint8Array(secret_key);
 
-        localStorage.setItem("secretKey", encoded_key);
+        await storeSecretKeyInServiceWorker(encoded_key);
         loggedIn.value = AppState.LoggedIn;
         bc.postMessage("login");
     }

frontend/src/index.tsx

@@ -39,6 +39,7 @@ import Median from "median-js-bridge";
 import { Footer } from "./components/Footer";
 import favicon from "favicon";
 import logo from "logo";
+import { Message, MessageType } from './types';
 
 import "./styles/main.scss";
 import { docs } from "links";
@@ -96,6 +97,19 @@ export function App() {
         }
     }, [loggedIn.value])
 
+    // Migrate secret from localStorage to service worker
+    useEffect(() => {
+        const secretFromLocalStorage = localStorage.getItem("secretKey");
+        if (secretFromLocalStorage) {
+            localStorage.removeItem("secretKey");
+            const msg: Message = {
+                type: MessageType.StoreSecret,
+                data: secretFromLocalStorage
+            };
+            navigator.serviceWorker.controller?.postMessage(msg);
+        }
+    }, []);
+
     if (!window.ServiceWorker) {
         return <Row fluid className="align-content-center justify-content-center vh-100">
             {t("no_service_worker")}

frontend/src/pages/Frame.tsx

@@ -351,7 +351,12 @@ export class Frame extends Component<{}, FrameState> {
                         }}>{t("abort")}</Button>
                 </Row>
                 <Row className="flex-grow-1 m-0">
-                    <iframe class="p-0" hidden={this.state.show_spinner} width="100%" height="100%" id="interface"></iframe>
+                    <iframe
+                        class="p-0"
+                        hidden={this.state.show_spinner}
+                        width="100%"
+                        height="100%"
+                        id="interface" />
                 </Row>
                 {downLoadButton}
             </Container>

frontend/src/sw.ts

@@ -104,21 +104,89 @@ self.addEventListener("activate", () => {
     self.clients.claim();
 });
 
-self.addEventListener("message", (e) => {
+const SECRET_CACHE_NAME = 'secret-cache-v1';
+
+async function storeSecretKeyInCache(secretKey: string): Promise<void> {
+    const cache = await caches.open(SECRET_CACHE_NAME);
+    const response = new Response(secretKey);
+    await cache.put('secret-key', response);
+}
+
+async function getSecretKeyFromCache(): Promise<string | null> {
+    try {
+        const cache = await caches.open(SECRET_CACHE_NAME);
+        const response = await cache.match('secret-key');
+        if (response) {
+            const secretKey = await response.text();
+            return secretKey;
+        }
+    } catch (e) {
+        console.error('Service Worker: Failed to get secretKey from cache:', e);
+    }
+    return null;
+}
+
+async function clearSecretKeyFromCache(): Promise<void> {
+    try {
+        const cache = await caches.open(SECRET_CACHE_NAME);
+        await cache.delete('secret-key');
+    } catch (e) {
+        console.error('Service Worker: Failed to clear secretKey from cache:', e);
+    }
+}
+
+function isIframeMessage(e: ExtendableMessageEvent): boolean {
+    const source = e.source;
+    if (source instanceof WindowClient && source.url.indexOf("wg-") !== -1) {
+        return true;
+    }
+    return false;
+}
+
+self.addEventListener("message", async (e: ExtendableMessageEvent) => {
+    if (isIframeMessage(e)) {
+        console.warn("Service Worker ignoring message from invalid origin or iframe:", e.source);
+        return;
+    }
+
     const msg = e.data as Message;
-    if (msg.type === MessageType.FetchResponse) {
-        const resp_message = msg.data as ResponseMessage;
-        const response = new Response(
-            resp_message.body,
-            {
-                status: resp_message.status,
-                statusText: resp_message.statusText,
-                headers: new Headers(resp_message.headers)
+
+    switch (msg.type) {
+        case MessageType.FetchResponse:
+            const resp_message = msg.data as ResponseMessage;
+            const response = new Response(
+                resp_message.body,
+                {
+                    status: resp_message.status,
+                    statusText: resp_message.statusText,
+                    headers: new Headers(resp_message.headers)
+                }
+            );
+
+            const event = new CustomEvent(msg.id as string, {detail: response});
+            self.dispatchEvent(event);
+            break;
+
+        case MessageType.StoreSecret:
+            await storeSecretKeyInCache(msg.data);
+            break;
+
+        case MessageType.RequestSecret:
+            const secretKey = await getSecretKeyFromCache();
+            if (secretKey) {
+                const responseMsg: Message = {
+                    type: MessageType.StoreSecret,
+                    data: secretKey
+                };
+                e.source?.postMessage(responseMsg);
             }
-        );
+            break;
+
+        case MessageType.ClearSecret:
+            await clearSecretKeyFromCache();
+            break;
 
-        // msg.id is never undefined when type is FetchResponse
-        const event = new CustomEvent(msg.id as string, {detail: response});
-        self.dispatchEvent(event);
+        default:
+            break;
     }
 });

frontend/src/types.tsx

@@ -4,7 +4,10 @@ export enum MessageType {
     Fetch,
     FetchResponse,
     Setup,
-    Error
+    Error,
+    StoreSecret,
+    RequestSecret,
+    ClearSecret,
 }
 
 export interface Message {

frontend/src/utils.tsx

@@ -7,6 +7,7 @@ import { logout } from "./components/Navbar";
 import i18n from "./i18n";
 import { showAlert } from "./components/Alert";
 import { Base64 } from "js-base64";
+import { Message, MessageType } from "./types";
 
 export async function get_salt() {
     const {data, response} = await fetchClient.GET("/auth/generate_salt");
@@ -101,21 +102,25 @@ export async function refresh_access_token() {
         });
 
         if (!error || response.status === 502) {
-            if (!localStorage.getItem("loginSalt") || !localStorage.getItem("secretKey")) {
+            const hasLoginSalt = localStorage.getItem("loginSalt");
+            const hasSecret = await getSecretKeyFromServiceWorker();
+            if (!hasLoginSalt || !hasSecret) {
                 logout(false);
             }
             loggedIn.value = AppState.LoggedIn;
         } else {
             auth_already_failed = true;
             resetSecret();
             localStorage.removeItem("loginSalt");
-            localStorage.removeItem("secretKey");
+            await clearSecretKeyFromServiceWorker();
             loggedIn.value = AppState.LoggedOut;
         }
     } catch (e) {
         resetSecret();
         //This means we are logged in but the refresh failed
-        if (localStorage.getItem("loginSalt") && localStorage.getItem("secretKey")) {
+        const hasLoginSalt = localStorage.getItem("loginSalt");
+        const hasSecret = await getSecretKeyFromServiceWorker();
+        if (hasLoginSalt && hasSecret) {
             loggedIn.value = AppState.LoggedIn;
         }
         console.error(e);
@@ -125,6 +130,61 @@ export async function refresh_access_token() {
 export let secret: Uint8Array | null = null;
 export let pub_key: Uint8Array | null = null;
 
+// Service Worker communication functions
+export async function storeSecretKeyInServiceWorker(secretKey: string): Promise<void> {
+    if (!navigator.serviceWorker.controller) {
+        return;
+    }
+
+    const msg: Message = {
+        type: MessageType.StoreSecret,
+        data: secretKey
+    };
+    navigator.serviceWorker.controller.postMessage(msg);
+}
+
+export async function getSecretKeyFromServiceWorker(): Promise<string | null> {
+    return new Promise((resolve) => {
+        if (!navigator.serviceWorker.controller) {
+            resolve(null);
+            return;
+        }
+
+        const timeout = setTimeout(() => {
+            resolve(null);
+        }, 5000); // 5 second timeout
+
+        const handleMessage = (event: MessageEvent) => {
+            const msg = event.data as Message;
+            if (msg.type === MessageType.StoreSecret) {
+                clearTimeout(timeout);
+                navigator.serviceWorker.removeEventListener('message', handleMessage);
+                resolve(msg.data);
+            }
+        };
+
+        navigator.serviceWorker.addEventListener('message', handleMessage);
+
+        const requestMsg: Message = {
+            type: MessageType.RequestSecret,
+            data: null
+        };
+        navigator.serviceWorker.controller.postMessage(requestMsg);
+    });
+}
+
+export async function clearSecretKeyFromServiceWorker(): Promise<void> {
+    if (!navigator.serviceWorker.controller) {
+        return;
+    }
+
+    const msg: Message = {
+        type: MessageType.ClearSecret,
+        data: null
+    };
+    navigator.serviceWorker.controller.postMessage(msg);
+}
+
 export async function get_decrypted_secret() {
     await sodium.ready;
     const t = i18n.t;
@@ -134,9 +194,9 @@ export async function get_decrypted_secret() {
         showAlert(t("chargers.loading_secret_failed", {status, response: error}), "danger");
         return;
     }
-    const encoded_key = localStorage.getItem("secretKey");
+    const encoded_key = await getSecretKeyFromServiceWorker();
     if (!encoded_key) {
-        showAlert(t("chargers.loading_secret_failed", {status: 'no_key', response: 'No secretKey in localStorage'}), "danger");
+        showAlert(t("chargers.loading_secret_failed", {status: 'no_key', response: 'No secretKey in service worker cache'}), "danger");
         return;
     }
     const secret_key = Base64.toUint8Array(encoded_key);
@@ -147,6 +207,8 @@ export async function get_decrypted_secret() {
 export function resetSecret() {
     secret = null;
     pub_key = null;
+    // Also clear the secret from service worker cache
+    clearSecretKeyFromServiceWorker().catch((e: any) => console.warn("Failed to clear secret from service worker:", e));
 }
 
 export const isDebugMode = signal(false);