feat: compress shareLink data when uploading to json server (#4225)

src/data/encode.ts

@@ -234,7 +234,19 @@ const splitBuffers = (concatenatedBuffer: Uint8Array) => {
 
   let cursor = 0;
 
-  // first chunk is the version (ignored for now)
+  // first chunk is the version
+  const version = dataView(
+    concatenatedBuffer,
+    NEXT_CHUNK_SIZE_DATAVIEW_BYTES,
+    cursor,
+  );
+  // If version is outside of the supported versions, throw an error.
+  // This usually means the buffer wasn't encoded using this API, so we'd only
+  // waste compute.
+  if (version > CONCAT_BUFFERS_VERSION) {
+    throw new Error(`invalid version ${version}`);
+  }
+
   cursor += VERSION_DATAVIEW_BYTES;
 
   while (true) {

src/excalidraw-app/data/index.ts

@@ -1,6 +1,6 @@
+import { compressData, decompressData } from "../../data/encode";
 import {
   decryptData,
-  encryptData,
   generateEncryptionKey,
   IV_LENGTH_BYTES,
 } from "../../data/encryption";
@@ -109,29 +109,28 @@ export const getCollaborationLink = (data: {
   return `${window.location.origin}${window.location.pathname}#room=${data.roomId},${data.roomKey}`;
 };
 
-const importFromBackend = async (
+/**
-  id: string,
+ * Decodes shareLink data using the legacy buffer format.
-  privateKey: string,
+ * @deprecated
-): Promise<ImportedDataState> => {
+ */
-  try {
+const legacy_decodeFromBackend = async ({
-    const response = await fetch(`${BACKEND_V2_GET}${id}`);
+  buffer,
-
+  decryptionKey,
-    if (!response.ok) {
+}: {
-      window.alert(t("alerts.importBackendFailed"));
+  buffer: ArrayBuffer;
-      return {};
+  decryptionKey: string;
-    }
+}) => {
-    const buffer = await response.arrayBuffer();
-
   let decrypted: ArrayBuffer;
+
   try {
     // Buffer should contain both the IV (fixed length) and encrypted data
     const iv = buffer.slice(0, IV_LENGTH_BYTES);
     const encrypted = buffer.slice(IV_LENGTH_BYTES, buffer.byteLength);
-      decrypted = await decryptData(new Uint8Array(iv), encrypted, privateKey);
+    decrypted = await decryptData(new Uint8Array(iv), encrypted, decryptionKey);
   } catch (error: any) {
     // Fixed IV (old format, backward compatibility)
     const fixedIv = new Uint8Array(IV_LENGTH_BYTES);
-      decrypted = await decryptData(fixedIv, buffer, privateKey);
+    decrypted = await decryptData(fixedIv, buffer, decryptionKey);
   }
 
   // We need to convert the decrypted array buffer to a string
@@ -144,6 +143,43 @@ const importFromBackend = async (
     elements: data.elements || null,
     appState: data.appState || null,
   };
+};
+
+const importFromBackend = async (
+  id: string,
+  decryptionKey: string,
+): Promise<ImportedDataState> => {
+  try {
+    const response = await fetch(`${BACKEND_V2_GET}${id}`);
+
+    if (!response.ok) {
+      window.alert(t("alerts.importBackendFailed"));
+      return {};
+    }
+    const buffer = await response.arrayBuffer();
+
+    try {
+      const { data: decodedBuffer } = await decompressData(
+        new Uint8Array(buffer),
+        {
+          decryptionKey,
+        },
+      );
+      const data: ImportedDataState = JSON.parse(
+        new TextDecoder().decode(decodedBuffer),
+      );
+
+      return {
+        elements: data.elements || null,
+        appState: data.appState || null,
+      };
+    } catch (error: any) {
+      console.warn(
+        "error when decoding shareLink data using the new format:",
+        error,
+      );
+      return legacy_decodeFromBackend({ buffer, decryptionKey });
+    }
   } catch (error: any) {
     window.alert(t("alerts.importBackendFailed"));
     console.error(error);
@@ -188,20 +224,14 @@ export const exportToBackend = async (
   appState: AppState,
   files: BinaryFiles,
 ) => {
-  const json = serializeAsJSON(elements, appState, files, "database");
+  const encryptionKey = await generateEncryptionKey("string");
-  const encoded = new TextEncoder().encode(json);
 
-  const cryptoKey = await generateEncryptionKey("cryptoKey");
+  const payload = await compressData(
-
+    new TextEncoder().encode(
-  const { encryptedBuffer, iv } = await encryptData(cryptoKey, encoded);
+      serializeAsJSON(elements, appState, files, "database"),
-
+    ),
-  // Concatenate IV with encrypted data (IV does not have to be secret).
+    { encryptionKey },
-  const payloadBlob = new Blob([iv.buffer, encryptedBuffer]);
+  );
-  const payload = await new Response(payloadBlob).arrayBuffer();
-
-  // We use jwk encoding to be able to extract just the base64 encoded key.
-  // We will hardcode the rest of the attributes when importing back the key.
-  const exportedKey = await window.crypto.subtle.exportKey("jwk", cryptoKey);
 
   try {
     const filesMap = new Map<FileId, BinaryFileData>();
@@ -211,8 +241,6 @@ export const exportToBackend = async (
       }
     }
 
-    const encryptionKey = exportedKey.k!;
-
     const filesToUpload = await encodeFilesForUpload({
       files: filesMap,
       encryptionKey,
@@ -221,7 +249,7 @@ export const exportToBackend = async (
 
     const response = await fetch(BACKEND_V2_POST, {
       method: "POST",
-      body: payload,
+      body: payload.buffer,
     });
     const json = await response.json();
     if (json.id) {