Factor out collaboration code (#2313)

Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/excalidraw-app/data/index.ts

@@ -0,0 +1,230 @@
+import { t } from "../../i18n";
+import { ExcalidrawElement } from "../../element/types";
+import { AppState } from "../../types";
+import { ImportedDataState } from "../../data/types";
+import { restore } from "../../data/restore";
+import { EVENT_ACTION, trackEvent } from "../../analytics";
+
+const byteToHex = (byte: number): string => `0${byte.toString(16)}`.slice(-2);
+
+const BACKEND_GET = process.env.REACT_APP_BACKEND_V1_GET_URL;
+const BACKEND_V2_GET = process.env.REACT_APP_BACKEND_V2_GET_URL;
+
+const generateRandomID = async () => {
+  const arr = new Uint8Array(10);
+  window.crypto.getRandomValues(arr);
+  return Array.from(arr, byteToHex).join("");
+};
+
+const generateEncryptionKey = async () => {
+  const key = await window.crypto.subtle.generateKey(
+    {
+      name: "AES-GCM",
+      length: 128,
+    },
+    true, // extractable
+    ["encrypt", "decrypt"],
+  );
+  return (await window.crypto.subtle.exportKey("jwk", key)).k;
+};
+
+export const SOCKET_SERVER = process.env.REACT_APP_SOCKET_SERVER_URL;
+
+export type EncryptedData = {
+  data: ArrayBuffer;
+  iv: Uint8Array;
+};
+
+export type SocketUpdateDataSource = {
+  SCENE_INIT: {
+    type: "SCENE_INIT";
+    payload: {
+      elements: readonly ExcalidrawElement[];
+    };
+  };
+  SCENE_UPDATE: {
+    type: "SCENE_UPDATE";
+    payload: {
+      elements: readonly ExcalidrawElement[];
+    };
+  };
+  MOUSE_LOCATION: {
+    type: "MOUSE_LOCATION";
+    payload: {
+      socketId: string;
+      pointer: { x: number; y: number };
+      button: "down" | "up";
+      selectedElementIds: AppState["selectedElementIds"];
+      username: string;
+    };
+  };
+};
+
+export type SocketUpdateDataIncoming =
+  | SocketUpdateDataSource[keyof SocketUpdateDataSource]
+  | {
+      type: "INVALID_RESPONSE";
+    };
+
+export type SocketUpdateData = SocketUpdateDataSource[keyof SocketUpdateDataSource] & {
+  _brand: "socketUpdateData";
+};
+
+export const createIV = () => {
+  const arr = new Uint8Array(12);
+  return window.crypto.getRandomValues(arr);
+};
+
+export const encryptAESGEM = async (
+  data: Uint8Array,
+  key: string,
+): Promise<EncryptedData> => {
+  const importedKey = await getImportedKey(key, "encrypt");
+  const iv = createIV();
+  return {
+    data: await window.crypto.subtle.encrypt(
+      {
+        name: "AES-GCM",
+        iv,
+      },
+      importedKey,
+      data,
+    ),
+    iv,
+  };
+};
+
+export const decryptAESGEM = async (
+  data: ArrayBuffer,
+  key: string,
+  iv: Uint8Array,
+): Promise<SocketUpdateDataIncoming> => {
+  try {
+    const importedKey = await getImportedKey(key, "decrypt");
+    const decrypted = await window.crypto.subtle.decrypt(
+      {
+        name: "AES-GCM",
+        iv,
+      },
+      importedKey,
+      data,
+    );
+
+    const decodedData = new TextDecoder("utf-8").decode(
+      new Uint8Array(decrypted) as any,
+    );
+    return JSON.parse(decodedData);
+  } catch (error) {
+    window.alert(t("alerts.decryptFailed"));
+    console.error(error);
+  }
+  return {
+    type: "INVALID_RESPONSE",
+  };
+};
+
+export const getCollaborationLinkData = (link: string) => {
+  if (link.length === 0) {
+    return;
+  }
+  const hash = new URL(link).hash;
+  return hash.match(/^#room=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/);
+};
+
+export const generateCollaborationLink = async () => {
+  const id = await generateRandomID();
+  const key = await generateEncryptionKey();
+  return `${window.location.origin}${window.location.pathname}#room=${id},${key}`;
+};
+
+export const getImportedKey = (key: string, usage: KeyUsage) =>
+  window.crypto.subtle.importKey(
+    "jwk",
+    {
+      alg: "A128GCM",
+      ext: true,
+      k: key,
+      key_ops: ["encrypt", "decrypt"],
+      kty: "oct",
+    },
+    {
+      name: "AES-GCM",
+      length: 128,
+    },
+    false, // extractable
+    [usage],
+  );
+
+const importFromBackend = async (
+  id: string | null,
+  privateKey?: string | null,
+): Promise<ImportedDataState> => {
+  try {
+    const response = await fetch(
+      privateKey ? `${BACKEND_V2_GET}${id}` : `${BACKEND_GET}${id}.json`,
+    );
+    if (!response.ok) {
+      window.alert(t("alerts.importBackendFailed"));
+      return {};
+    }
+    let data: ImportedDataState;
+    if (privateKey) {
+      const buffer = await response.arrayBuffer();
+      const key = await getImportedKey(privateKey, "decrypt");
+      const iv = new Uint8Array(12);
+      const decrypted = await window.crypto.subtle.decrypt(
+        {
+          name: "AES-GCM",
+          iv,
+        },
+        key,
+        buffer,
+      );
+      // We need to convert the decrypted array buffer to a string
+      const string = new window.TextDecoder("utf-8").decode(
+        new Uint8Array(decrypted) as any,
+      );
+      data = JSON.parse(string);
+    } else {
+      // Legacy format
+      data = await response.json();
+    }
+
+    trackEvent(EVENT_ACTION, "import");
+    return {
+      elements: data.elements || null,
+      appState: data.appState || null,
+    };
+  } catch (error) {
+    window.alert(t("alerts.importBackendFailed"));
+    console.error(error);
+    return {};
+  }
+};
+
+export const loadScene = async (
+  id: string | null,
+  privateKey: string | null,
+  // Supply initialData even if importing from backend to ensure we restore
+  // localStorage user settings which we do not persist on server.
+  // Non-optional so we don't forget to pass it even if `undefined`.
+  initialData: ImportedDataState | undefined | null,
+) => {
+  let data;
+  if (id != null) {
+    // the private key is used to decrypt the content from the server, take
+    // extra care not to leak it
+    data = restore(
+      await importFromBackend(id, privateKey),
+      initialData?.appState,
+    );
+  } else {
+    data = restore(initialData || null, null);
+  }
+
+  return {
+    elements: data.elements,
+    appState: data.appState,
+    commitToHistory: false,
+  };
+};