Typescriptify & use service worker for MSC3916 authentication

src/serviceworker/index.ts

@@ -54,59 +54,76 @@ self.addEventListener("fetch", (event: FetchEvent) => {
     // We only intercept v3 download and thumbnail requests as presumably everything else is deliberate.
     // For example, `/_matrix/media/unstable` or `/_matrix/media/v3/preview_url` are something well within
     // the control of the application, and appear to be choices made at a higher level than us.
-    if (url.includes("/_matrix/media/v3/download") || url.includes("/_matrix/media/v3/thumbnail")) {
-        // We need to call respondWith synchronously, otherwise we may never execute properly. This means
-        // later on we need to proxy the request through if it turns out the server doesn't support authentication.
-        event.respondWith(
-            (async (): Promise<Response> => {
-                let fetchConfig: { headers?: { [key: string]: string } } = {};
-                try {
-                    // Figure out which homeserver we're communicating with
-                    const csApi = url.substring(0, url.indexOf("/_matrix/media/v3"));
-
-                    // Add jitter to reduce request spam, particularly to `/versions` on initial page load
-                    await new Promise<void>((resolve) => setTimeout(() => resolve(), Math.random() * 10));
-
-                    // Locate our access token, and populate the fetchConfig with the authentication header.
-                    // @ts-expect-error - service worker types are not available. See 'fetch' event handler.
-                    const client = await self.clients.get(event.clientId);
-                    const accessToken = await getAccessToken(client);
-                    if (accessToken) {
-                        fetchConfig = {
-                            headers: {
-                                Authorization: `Bearer ${accessToken}`,
-                            },
-                        };
-                    }
-
-                    // Update or populate the server support map using a (usually) authenticated `/versions` call.
-                    if (!serverSupportMap[csApi] || serverSupportMap[csApi].cacheExpires <= new Date().getTime()) {
-                        const versions = await (await fetch(`${csApi}/_matrix/client/versions`, fetchConfig)).json();
-                        serverSupportMap[csApi] = {
-                            supportsMSC3916: Boolean(versions?.unstable_features?.["org.matrix.msc3916"]),
-                            cacheExpires: new Date().getTime() + 2 * 60 * 60 * 1000, // 2 hours from now
-                        };
-                    }
-
-                    // If we have server support (and a means of authentication), rewrite the URL to use MSC3916 endpoints.
-                    if (serverSupportMap[csApi].supportsMSC3916 && accessToken) {
-                        // Currently unstable only.
-                        // TODO: Support stable endpoints when available.
-                        url = url.replace(/\/media\/v3\/(.*)\//, "/client/unstable/org.matrix.msc3916/media/$1/");
-                    } // else by default we make no changes
-                } catch (err) {
-                    console.error("SW: Error in request rewrite.", err);
-                }
-
-                // Add authentication and send the request. We add authentication even if MSC3916 endpoints aren't
-                // being used to ensure patches like this work:
-                // https://github.com/matrix-org/synapse/commit/2390b66bf0ec3ff5ffb0c7333f3c9b239eeb92bb
-                return fetch(url, fetchConfig);
-            })(),
-        );
+    if (!url.includes("/_matrix/media/v3/download") && !url.includes("/_matrix/media/v3/thumbnail")) {
+        return; // not a URL we care about
     }
+
+    // We need to call respondWith synchronously, otherwise we may never execute properly. This means
+    // later on we need to proxy the request through if it turns out the server doesn't support authentication.
+    event.respondWith(
+        (async (): Promise<Response> => {
+            let accessToken: string | undefined;
+            try {
+                // Figure out which homeserver we're communicating with
+                const csApi = url.substring(0, url.indexOf("/_matrix/media/v3"));
+
+                // Add jitter to reduce request spam, particularly to `/versions` on initial page load
+                await new Promise<void>((resolve) => setTimeout(() => resolve(), Math.random() * 10));
+
+                // Locate our access token, and populate the fetchConfig with the authentication header.
+                // @ts-expect-error - service worker types are not available. See 'fetch' event handler.
+                const client = await self.clients.get(event.clientId);
+                accessToken = await getAccessToken(client);
+
+                // Update or populate the server support map using a (usually) authenticated `/versions` call.
+                await tryUpdateServerSupportMap(csApi, accessToken);
+
+                // If we have server support (and a means of authentication), rewrite the URL to use MSC3916 endpoints.
+                if (serverSupportMap[csApi].supportsMSC3916 && accessToken) {
+                    // Currently unstable only.
+                    // TODO: Support stable endpoints when available.
+                    url = url.replace(/\/media\/v3\/(.*)\//, "/client/unstable/org.matrix.msc3916/media/$1/");
+                } // else by default we make no changes
+            } catch (err) {
+                console.error("SW: Error in request rewrite.", err);
+            }
+
+            // Add authentication and send the request. We add authentication even if MSC3916 endpoints aren't
+            // being used to ensure patches like this work:
+            // https://github.com/matrix-org/synapse/commit/2390b66bf0ec3ff5ffb0c7333f3c9b239eeb92bb
+            const config = !accessToken
+                ? undefined
+                : {
+                      headers: {
+                          Authorization: `Bearer ${accessToken}`,
+                      },
+                  };
+            return fetch(url, config);
+        })(),
+    );
 });
 
+async function tryUpdateServerSupportMap(clientApiUrl: string, accessToken?: string): Promise<void> {
+    // only update if we don't know about it, or if the data is stale
+    if (serverSupportMap[clientApiUrl]?.cacheExpires > new Date().getTime()) {
+        return; // up to date
+    }
+
+    const config = !accessToken
+        ? undefined
+        : {
+              headers: {
+                  Authorization: `Bearer ${accessToken}`,
+              },
+          };
+    const versions = await (await fetch(`${clientApiUrl}/_matrix/client/versions`, config)).json();
+
+    serverSupportMap[clientApiUrl] = {
+        supportsMSC3916: Boolean(versions?.unstable_features?.["org.matrix.msc3916"]),
+        cacheExpires: new Date().getTime() + 2 * 60 * 60 * 1000, // 2 hours from now
+    };
+}
+
 // Ideally we'd use the `Client` interface for `client`, but since it's not available (see 'fetch' listener), we use
 // unknown for now and force-cast it to something close enough later.
 async function getAccessToken(client: unknown): Promise<string | undefined> {
@@ -139,6 +156,15 @@ async function getAccessToken(client: unknown): Promise<string | undefined> {
 // unknown for now and force-cast it to something close enough inside the function.
 async function askClientForUserIdParams(client: unknown): Promise<{ userId: string; deviceId: string }> {
     return new Promise((resolve, reject) => {
+        // Dev note: this uses postMessage, which is a highly insecure channel. postMessage is typically visible to other
+        // tabs, windows, browser extensions, etc, making it far from ideal for sharing sensitive information. This is
+        // why our service worker calculates/decrypts the access token manually: we don't want the user's access token
+        // to be available to (potentially) malicious listeners. We do require some information for that decryption to
+        // work though, and request that in the least sensitive way possible.
+        //
+        // We could also potentially use some version of TLS to encrypt postMessage, though that feels way more involved
+        // than just reading IndexedDB ourselves.
+
         // Avoid stalling the tab in case something goes wrong.
         const timeoutId = setTimeout(() => reject(new Error("timeout in postMessage")), 1000);
 

src/vector/platform/WebPlatform.ts

@@ -44,38 +44,47 @@ export default class WebPlatform extends VectorBasePlatform {
 
     public constructor() {
         super();
-        // Register service worker if available on this platform
-        if ("serviceWorker" in navigator) {
-            // sw.js is exported by webpack, sourced from `/src/serviceworker/index.ts`
-            const swPromise = navigator.serviceWorker.register("sw.js");
-
-            // Jest causes `register()` to return undefined, so swallow that case.
-            if (swPromise) {
-                swPromise
-                    .then(async (r) => {
-                        // always ask the browser to update. The browser might not actually do it, but at least we asked.
-                        await r.update();
-                        return r;
-                    })
-                    .then((r) => {
-                        navigator.serviceWorker.addEventListener("message", (e) => {
-                            try {
-                                if (e.data?.["type"] === "userinfo" && e.data?.["responseKey"]) {
-                                    const userId = localStorage.getItem("mx_user_id");
-                                    const deviceId = localStorage.getItem("mx_device_id");
-                                    r.active!.postMessage({
-                                        responseKey: e.data["responseKey"],
-                                        userId,
-                                        deviceId,
-                                    });
-                                }
-                            } catch (e) {
-                                console.error("Error responding to service worker: ", e);
-                            }
-                        });
-                    })
-                    .catch((e) => console.error("Error registering/updating service worker:", e));
+
+        // noinspection JSIgnoredPromiseFromCall - can run async
+        this.tryRegisterServiceWorker();
+    }
+
+    private async tryRegisterServiceWorker(): Promise<void> {
+        if (!("serviceWorker" in navigator)) {
+            return; // not available on this platform - don't try to register the service worker
+        }
+
+        // sw.js is exported by webpack, sourced from `/src/serviceworker/index.ts`
+        const swPromise = navigator.serviceWorker.register("sw.js");
+        if (!swPromise) {
+            // Registration didn't return a promise for some reason - assume failed and ignore.
+            // This typically happens in Jest.
+            return;
+        }
+
+        try {
+            const registration = await swPromise;
+            await registration.update();
+            navigator.serviceWorker.addEventListener("message", this.onServiceWorkerPostMessage.bind(this));
+        } catch (e) {
+            console.error("Error registering/updating service worker:", e);
+            // otherwise ignore the error and remain unregistered
+        }
+    }
+
+    private onServiceWorkerPostMessage(event: MessageEvent): void {
+        try {
+            if (event.data?.["type"] === "userinfo" && event.data?.["responseKey"]) {
+                const userId = localStorage.getItem("mx_user_id");
+                const deviceId = localStorage.getItem("mx_device_id");
+                event.source!.postMessage({
+                    responseKey: event.data["responseKey"],
+                    userId,
+                    deviceId,
+                });
             }
+        } catch (e) {
+            console.error("Error responding to service worker: ", e);
         }
     }