Optional client encryption (silverbulletmd#1640)

Implements silverbulletmd#1268

Author: zefhemel

client/boot.ts

@@ -1,4 +1,4 @@
-import { safeRun } from "@silverbulletmd/silverbullet/lib/async";
+import { race, safeRun, sleep } from "@silverbulletmd/silverbullet/lib/async";
 import {
   notAuthenticatedError,
   offlineError,
@@ -11,8 +11,9 @@ import {
   flushCachesAndUnregisterServiceWorker,
 } from "./service_worker/util.ts";
 import "./lib/polyfills.ts";
-import type { BootConfig } from "./types/ui.ts";
+import type { BootConfig, ServiceWorkerTargetMessage } from "./types/ui.ts";
 import { BoxProxy } from "./lib/box_proxy.ts";
+import { importKey } from "@silverbulletmd/silverbullet/lib/crypto";
 
 const logger = initLogger("[Client]");
 
@@ -50,6 +51,57 @@ safeRun(async () => {
     return;
   }
 
+  let encryptionKey: CryptoKey | undefined;
+  // If client encryption is enabled (from auth page) AND the server signals it
+  if (
+    localStorage.getItem("enableEncryption") &&
+    bootConfig?.enableClientEncryption
+  ) {
+    // Init encryption
+    console.log("Initializing encryption");
+    const swController = navigator.serviceWorker.controller;
+    if (swController) {
+      // Service is already running, let's see if has an encryption key for me
+      console.log(
+        "Service worker already running, querying it for an encryption key",
+      );
+      swController.postMessage(
+        { type: "get-encryption-key" } as ServiceWorkerTargetMessage,
+      );
+      await race([
+        new Promise<void>((resolve) => {
+          function keyListener(e: any) {
+            if (e.data.type === "encryption-key") {
+              navigator.serviceWorker.removeEventListener(
+                "message",
+                keyListener,
+              );
+              importKey(e.data.key).then((key) => {
+                encryptionKey = key;
+                resolve();
+              });
+            }
+          }
+          navigator.serviceWorker.addEventListener("message", keyListener);
+        }),
+        sleep(200),
+      ]);
+      if (!encryptionKey) {
+        // No encryption key, redirecting to the auth page
+        console.warn("Not authenticated, redirecting to auth page");
+        location.href = ".auth";
+        throw new Error("Not authenticated");
+      }
+    } else {
+      // No service worker, no encryption key, redirecting to the auth page
+      console.warn("Not authenticated, redirecting to auth page");
+      location.href = ".auth";
+      throw new Error("Not authenticated");
+    }
+  } else {
+    bootConfig!.enableClientEncryption = false;
+  }
+
   await augmentBootConfig(bootConfig!, config!);
 
   // Update the browser URL to no longer contain the query parameters using pushState
@@ -68,7 +120,7 @@ safeRun(async () => {
     let lastStartNotification = 0;
     navigator.serviceWorker.addEventListener("message", (event) => {
       if (event.data.type === "service-worker-started") {
-        // Service worker started, let's make sure it the current config
+        // Service worker started, let's make sure it has the current config
         console.log(
           "Got notified that service worker has just started, sending config",
           bootConfig,
@@ -88,7 +140,7 @@ safeRun(async () => {
         if (startNotificationCount > 2) {
           // This is not normal. Safari sometimes gets stuck on a database connection if the service worker is updated which means it cannot boot properly
           // the only know fix is to quit the browser and restart it
-          alert(
+          console.warn(
             "Something is wrong with the sync engine, please quit your browser and restart it.",
           );
         }
@@ -134,13 +186,6 @@ safeRun(async () => {
           }
         });
       });
-
-    // // Handle service worker controlled changes (when a new service worker takes over)
-    // navigator.serviceWorker.addEventListener("controllerchange", async () => {
-    //   console.log(
-    //     "New service worker activated!",
-    //   );
-    // });
   } else {
     console.info("Service worker disabled.");
   }
@@ -157,7 +202,7 @@ safeRun(async () => {
   // @ts-ignore: on purpose
   globalThis.client = client;
   clientProxy.setTarget(client);
-  await client.init();
+  await client.init(encryptionKey);
   if (navigator.serviceWorker) {
     navigator.serviceWorker.addEventListener("message", (event) => {
       client.handleServiceWorkerMessage(event.data);
@@ -237,7 +282,7 @@ async function cachedFetch(path: string): Promise<string> {
     }
     const redirectHeader = response.headers.get("location");
     if (redirectHeader) {
-      alert(
+      console.info(
         "Received an (authentication) redirect, redirecting to URL: " +
           redirectHeader,
       );

client/client.ts

@@ -39,7 +39,6 @@ import type { StyleObject } from "../plugs/index/style.ts";
 import { jitter, throttle } from "@silverbulletmd/silverbullet/lib/async";
 import { PlugSpacePrimitives } from "./spaces/plug_space_primitives.ts";
 import { EventedSpacePrimitives } from "./spaces/evented_space_primitives.ts";
-import { simpleHash } from "@silverbulletmd/silverbullet/lib/crypto";
 import { HttpSpacePrimitives } from "./spaces/http_space_primitives.ts";
 import {
   encodePageURI,
@@ -79,6 +78,9 @@ import {
   offlineError,
 } from "@silverbulletmd/silverbullet/constants";
 import { Augmenter } from "./data/data_augmenter.ts";
+import { EncryptedKvPrimitives } from "./data/encrypted_kv_primitives.ts";
+import type { KvPrimitives } from "./data/kv_primitives.ts";
+import { deriveDbName } from "@silverbulletmd/silverbullet/lib/crypto";
 
 const frontMatterRegex = /^---\n(([^\n]|\n)*?)---\n/;
 
@@ -92,7 +94,6 @@ declare global {
 }
 
 type WidgetCacheItem = {
-  height: number;
   html: string;
   block?: boolean;
   copyContent?: string;
@@ -138,7 +139,6 @@ export class Client {
   // Set to true once the system is ready (plugs loaded)
   public systemReady: boolean = false;
   private pageNavigator!: PathPageNavigator;
-  private dbName: string;
   private onLoadRef: Ref;
   // Progress circle handling
   private progressTimeout?: number;
@@ -150,7 +150,7 @@ export class Client {
         console.error,
       );
   }, 2000);
-  private widgetHeightCache = new LimitedMap<number>(100); // bodytext -> height
+  private widgetHeightCache = new LimitedMap<number>(1000); // bodytext -> height
   debouncedWidgetHeightCacheFlush = throttle(() => {
     this.ds.set(
       ["cache", "widgetHeight"],
@@ -167,11 +167,6 @@ export class Client {
     readonly config: Config,
   ) {
     this.eventHook = new EventHook(this.config);
-    // Generate a semi-unique prefix for the database so not to reuse databases for different space paths
-    this.dbName = "" +
-      simpleHash(
-        `${bootConfig.spaceFolderPath}:${document.baseURI.replace(/\/*$/, "")}`,
-      ) + "_data";
     // The third case should only ever happen when the user provides an invalid index env variable
     this.onLoadRef = parseRefFromURI() || this.getIndexRef();
   }
@@ -180,10 +175,28 @@ export class Client {
    * Initialize the client
    * This is a separated from the constructor to allow for async initialization
    */
-  async init() {
+  async init(encryptionKey?: CryptoKey) {
+    const dbName = await deriveDbName(
+      "data",
+      this.bootConfig.spaceFolderPath,
+      document.baseURI.replace(/\/$/, ""),
+      encryptionKey,
+    );
     // Setup the KV (database)
-    const kvPrimitives = new IndexedDBKvPrimitives(this.dbName);
-    await kvPrimitives.init();
+    let kvPrimitives: KvPrimitives = new IndexedDBKvPrimitives(dbName);
+    await (kvPrimitives as IndexedDBKvPrimitives).init();
+
+    console.log("Using IndexedDB database", dbName);
+
+    // See if we need to encrypt this
+    if (encryptionKey) {
+      kvPrimitives = new EncryptedKvPrimitives(
+        kvPrimitives,
+        encryptionKey,
+      );
+      await (kvPrimitives as EncryptedKvPrimitives).init();
+      console.log("Enabled client-side encryption");
+    }
     // Wrap it in a datastore
     this.ds = new DataStore(kvPrimitives);
 
@@ -1312,7 +1325,7 @@ export class Client {
         "cache",
         "widgetHeight",
       ], ["cache", "widgets"]]);
-    this.widgetHeightCache = new LimitedMap(100, widgetHeightCache || {});
+    this.widgetHeightCache = new LimitedMap(1000, widgetHeightCache || {});
     this.widgetCache = new LimitedMap(100, widgetCache || {});
   }
 

client/codemirror/lua_widget.ts

@@ -60,8 +60,7 @@ export class LuaWidget extends WidgetType {
   }
 
   override get estimatedHeight(): number {
-    const cacheItem = this.client.getWidgetCache(this.cacheKey);
-    return cacheItem ? cacheItem.height : -1;
+    return this.client.getCachedWidgetHeight(this.cacheKey);
   }
 
   toDOM(): HTMLElement {
@@ -96,8 +95,9 @@ export class LuaWidget extends WidgetType {
         div.innerHTML = "";
         this.client.setWidgetCache(
           this.cacheKey,
-          { height: div.clientHeight, html: "", block: false },
+          { html: "", block: false },
         );
+        this.client.setCachedWidgetHeight(this.cacheKey, div.clientHeight);
         return;
       }
       widgetContent = { markdown: "nil", _isWidget: true };
@@ -159,8 +159,9 @@ export class LuaWidget extends WidgetType {
         div.innerHTML = "";
         this.client.setWidgetCache(
           this.cacheKey,
-          { height: div.clientHeight, html: "", block: false },
+          { html: "", block: false },
         );
+        this.client.setCachedWidgetHeight(this.cacheKey, div.clientHeight);
         return;
       }
 
@@ -207,12 +208,12 @@ export class LuaWidget extends WidgetType {
       this.client.setWidgetCache(
         this.cacheKey,
         {
-          height: div.offsetHeight,
           html: html?.outerHTML || "",
           block,
           copyContent: copyContent,
         },
       );
+      this.client.setCachedWidgetHeight(this.cacheKey, div.offsetHeight);
       // Because of the rejiggering of the DOM, we need to do a no-op cursor move to make sure it's positioned correctly
       this.client.editorView.dispatch({
         selection: this.client.editorView.state.selection,

client/codemirror/top_bottom_panels.ts

@@ -20,8 +20,7 @@ class ArrayWidget extends WidgetType {
   }
 
   override get estimatedHeight(): number {
-    const cacheItem = this.client.getWidgetCache(this.cacheKey);
-    return cacheItem ? cacheItem.height : -1;
+    return this.client.getCachedWidgetHeight(this.cacheKey);
   }
 
   toDOM(): HTMLElement {
@@ -91,13 +90,13 @@ class ArrayWidget extends WidgetType {
 
     div.replaceChildren(...renderedWidgets);
 
+    this.client.setWidgetCache(this.cacheKey, {
+      block: true,
+      html: div.innerHTML,
+    });
     // Wait for the clientHeight to settle
     setTimeout(() => {
-      this.client.setWidgetCache(this.cacheKey, {
-        height: div.clientHeight,
-        block: true,
-        html: div.innerHTML,
-      });
+      this.client.setCachedWidgetHeight(this.cacheKey, div.clientHeight);
     });
   }
 

client/data/encrypted_kv_primitives.test.ts

@@ -0,0 +1,64 @@
+import { assert, assertEquals } from "@std/assert";
+import { EncryptedKvPrimitives } from "./encrypted_kv_primitives.ts";
+import { MemoryKvPrimitives } from "./memory_kv_primitives.ts";
+import { deriveCTRKeyFromPassword } from "@silverbulletmd/silverbullet/lib/crypto";
+
+Deno.test("Test Encrypted KV Primitives", async () => {
+  const memoryKv = new MemoryKvPrimitives();
+  const salt = new Uint8Array(32);
+  const key = await deriveCTRKeyFromPassword("test", salt);
+  const kv = new EncryptedKvPrimitives(memoryKv, key);
+  await kv.init();
+
+  // Store a basic key
+  await kv.batchSet([{ key: ["key"], value: 10 }]);
+  const [value] = await kv.batchGet([["key"]]);
+  assertEquals(value, 10);
+
+  // Store a binary blob
+  const blob = new Uint8Array([1, 2, 3, 4, 5]);
+  await kv.batchSet([{ key: ["blob"], value: blob }]);
+  const [blobValue] = await kv.batchGet([["blob"]]);
+  assertEquals(blobValue, blob);
+
+  // Store a nested JSON and blob structure
+  const nested = {
+    json: { a: 1, b: 2 },
+    blob: new Uint8Array([6, 7, 8, 9, 10]),
+  };
+  await kv.batchSet([{ key: ["nested"], value: nested }]);
+  const [nestedValue] = await kv.batchGet([["nested"]]);
+  assertEquals(nestedValue, nested);
+
+  // Put a few objects with a person prefix
+  await kv.batchSet([
+    { key: ["person", "alice"], value: { name: "Alice", age: 30 } },
+    { key: ["person", "bob"], value: { name: "Bob", age: 25 } },
+  ]);
+
+  // Then query based on the prefix
+  let counter = 0;
+  for await (const { key, value } of kv.query({ prefix: ["person"] })) {
+    assertEquals(key[0], "person");
+    assert(key[1] === "alice" || key[1] === "bob");
+    assert(value.age);
+    counter++;
+  }
+  assertEquals(counter, 2);
+
+  // Delete something
+  await kv.batchDelete([["person", "alice"]]);
+  // Check it's gone
+  const [deletedValue] = await kv.batchGet([["person", "alice"]]);
+  assertEquals(deletedValue, undefined);
+
+  console.log(memoryKv);
+
+  // Clear
+  await kv.clear();
+  counter = 0;
+  for await (const _ of kv.query({ prefix: ["person"] })) {
+    counter++;
+  }
+  assertEquals(counter, 0);
+});