Service Worker를 활용한 스트리밍 방식 파일 복호화 구현

src/lib/constants/index.ts

@@ -1 +1,2 @@
+export * from "./serviceWorker";
 export * from "./upload";

src/lib/constants/serviceWorker.ts

@@ -0,0 +1 @@
+export const DECRYPTED_FILE_URL_PREFIX = "/_internal/decrypted-file/";

src/lib/constants/upload.ts

@@ -1,5 +1,6 @@
-export const CHUNK_SIZE = 4 * 1024 * 1024;
-
 export const AES_GCM_IV_SIZE = 12;
 export const AES_GCM_TAG_SIZE = 16;
 export const ENCRYPTION_OVERHEAD = AES_GCM_IV_SIZE + AES_GCM_TAG_SIZE;
+
+export const CHUNK_SIZE = 4 * 1024 * 1024;
+export const ENCRYPTED_CHUNK_SIZE = CHUNK_SIZE + ENCRYPTION_OVERHEAD;

src/lib/modules/crypto/aes.ts

@@ -9,7 +9,7 @@ import {
 
 export const generateMasterKey = async () => {
   return {
-    masterKey: await window.crypto.subtle.generateKey(
+    masterKey: await crypto.subtle.generateKey(
       {
         name: "AES-KW",
         length: 256,
@@ -22,7 +22,7 @@ export const generateMasterKey = async () => {
 
 export const generateDataKey = async () => {
   return {
-    dataKey: await window.crypto.subtle.generateKey(
+    dataKey: await crypto.subtle.generateKey(
       {
         name: "AES-GCM",
         length: 256,
@@ -35,9 +35,9 @@ export const generateDataKey = async () => {
 };
 
 export const makeAESKeyNonextractable = async (key: CryptoKey) => {
-  return await window.crypto.subtle.importKey(
+  return await crypto.subtle.importKey(
     "raw",
-    await window.crypto.subtle.exportKey("raw", key),
+    await crypto.subtle.exportKey("raw", key),
     key.algorithm,
     false,
     key.usages,
@@ -45,12 +45,12 @@ export const makeAESKeyNonextractable = async (key: CryptoKey) => {
 };
 
 export const wrapDataKey = async (dataKey: CryptoKey, masterKey: CryptoKey) => {
-  return encodeToBase64(await window.crypto.subtle.wrapKey("raw", dataKey, masterKey, "AES-KW"));
+  return encodeToBase64(await crypto.subtle.wrapKey("raw", dataKey, masterKey, "AES-KW"));
 };
 
 export const unwrapDataKey = async (dataKeyWrapped: string, masterKey: CryptoKey) => {
   return {
-    dataKey: await window.crypto.subtle.unwrapKey(
+    dataKey: await crypto.subtle.unwrapKey(
       "raw",
       decodeFromBase64(dataKeyWrapped),
       masterKey,
@@ -63,12 +63,12 @@ export const unwrapDataKey = async (dataKeyWrapped: string, masterKey: CryptoKey
 };
 
 export const wrapHmacSecret = async (hmacSecret: CryptoKey, masterKey: CryptoKey) => {
-  return encodeToBase64(await window.crypto.subtle.wrapKey("raw", hmacSecret, masterKey, "AES-KW"));
+  return encodeToBase64(await crypto.subtle.wrapKey("raw", hmacSecret, masterKey, "AES-KW"));
 };
 
 export const unwrapHmacSecret = async (hmacSecretWrapped: string, masterKey: CryptoKey) => {
   return {
-    hmacSecret: await window.crypto.subtle.unwrapKey(
+    hmacSecret: await crypto.subtle.unwrapKey(
       "raw",
       decodeFromBase64(hmacSecretWrapped),
       masterKey,
@@ -84,8 +84,8 @@ export const unwrapHmacSecret = async (hmacSecretWrapped: string, masterKey: Cry
 };
 
 export const encryptData = async (data: BufferSource, dataKey: CryptoKey) => {
-  const iv = window.crypto.getRandomValues(new Uint8Array(12));
-  const ciphertext = await window.crypto.subtle.encrypt(
+  const iv = crypto.getRandomValues(new Uint8Array(12));
+  const ciphertext = await crypto.subtle.encrypt(
     {
       name: "AES-GCM",
       iv,
@@ -101,7 +101,7 @@ export const decryptData = async (
   iv: string | BufferSource,
   dataKey: CryptoKey,
 ) => {
-  return await window.crypto.subtle.decrypt(
+  return await crypto.subtle.decrypt(
     {
       name: "AES-GCM",
       iv: typeof iv === "string" ? decodeFromBase64(iv) : iv,

src/lib/modules/crypto/rsa.ts

@@ -1,7 +1,7 @@
 import { encodeString, encodeToBase64, decodeFromBase64 } from "./util";
 
 export const generateEncryptionKeyPair = async () => {
-  const keyPair = await window.crypto.subtle.generateKey(
+  const keyPair = await crypto.subtle.generateKey(
     {
       name: "RSA-OAEP",
       modulusLength: 4096,
@@ -18,7 +18,7 @@ export const generateEncryptionKeyPair = async () => {
 };
 
 export const generateSigningKeyPair = async () => {
-  const keyPair = await window.crypto.subtle.generateKey(
+  const keyPair = await crypto.subtle.generateKey(
     {
       name: "RSA-PSS",
       modulusLength: 4096,
@@ -37,7 +37,7 @@ export const generateSigningKeyPair = async () => {
 export const exportRSAKey = async (key: CryptoKey) => {
   const format = key.type === "public" ? ("spki" as const) : ("pkcs8" as const);
   return {
-    key: await window.crypto.subtle.exportKey(format, key),
+    key: await crypto.subtle.exportKey(format, key),
     format,
   };
 };
@@ -54,14 +54,14 @@ export const importEncryptionKeyPairFromBase64 = async (
     name: "RSA-OAEP",
     hash: "SHA-256",
   };
-  const encryptKey = await window.crypto.subtle.importKey(
+  const encryptKey = await crypto.subtle.importKey(
     "spki",
     decodeFromBase64(encryptKeyBase64),
     algorithm,
     true,
     ["encrypt", "wrapKey"],
   );
-  const decryptKey = await window.crypto.subtle.importKey(
+  const decryptKey = await crypto.subtle.importKey(
     "pkcs8",
     decodeFromBase64(decryptKeyBase64),
     algorithm,
@@ -79,14 +79,14 @@ export const importSigningKeyPairFromBase64 = async (
     name: "RSA-PSS",
     hash: "SHA-256",
   };
-  const signKey = await window.crypto.subtle.importKey(
+  const signKey = await crypto.subtle.importKey(
     "pkcs8",
     decodeFromBase64(signKeyBase64),
     algorithm,
     true,
     ["sign"],
   );
-  const verifyKey = await window.crypto.subtle.importKey(
+  const verifyKey = await crypto.subtle.importKey(
     "spki",
     decodeFromBase64(verifyKeyBase64),
     algorithm,
@@ -98,17 +98,11 @@ export const importSigningKeyPairFromBase64 = async (
 
 export const makeRSAKeyNonextractable = async (key: CryptoKey) => {
   const { key: exportedKey, format } = await exportRSAKey(key);
-  return await window.crypto.subtle.importKey(
-    format,
-    exportedKey,
-    key.algorithm,
-    false,
-    key.usages,
-  );
+  return await crypto.subtle.importKey(format, exportedKey, key.algorithm, false, key.usages);
 };
 
 export const decryptChallenge = async (challenge: string, decryptKey: CryptoKey) => {
-  return await window.crypto.subtle.decrypt(
+  return await crypto.subtle.decrypt(
     {
       name: "RSA-OAEP",
     } satisfies RsaOaepParams,
@@ -119,7 +113,7 @@ export const decryptChallenge = async (challenge: string, decryptKey: CryptoKey)
 
 export const wrapMasterKey = async (masterKey: CryptoKey, encryptKey: CryptoKey) => {
   return encodeToBase64(
-    await window.crypto.subtle.wrapKey("raw", masterKey, encryptKey, {
+    await crypto.subtle.wrapKey("raw", masterKey, encryptKey, {
       name: "RSA-OAEP",
     } satisfies RsaOaepParams),
   );
@@ -131,7 +125,7 @@ export const unwrapMasterKey = async (
   extractable = false,
 ) => {
   return {
-    masterKey: await window.crypto.subtle.unwrapKey(
+    masterKey: await crypto.subtle.unwrapKey(
       "raw",
       decodeFromBase64(masterKeyWrapped),
       decryptKey,
@@ -146,7 +140,7 @@ export const unwrapMasterKey = async (
 };
 
 export const signMessageRSA = async (message: BufferSource, signKey: CryptoKey) => {
-  return await window.crypto.subtle.sign(
+  return await crypto.subtle.sign(
     {
       name: "RSA-PSS",
       saltLength: 32, // SHA-256
@@ -161,7 +155,7 @@ export const verifySignatureRSA = async (
   signature: BufferSource,
   verifyKey: CryptoKey,
 ) => {
-  return await window.crypto.subtle.verify(
+  return await crypto.subtle.verify(
     {
       name: "RSA-PSS",
       saltLength: 32, // SHA-256

src/lib/modules/crypto/sha.ts

@@ -1,10 +1,10 @@
 export const digestMessage = async (message: BufferSource) => {
-  return await window.crypto.subtle.digest("SHA-256", message);
+  return await crypto.subtle.digest("SHA-256", message);
 };
 
 export const generateHmacSecret = async () => {
   return {
-    hmacSecret: await window.crypto.subtle.generateKey(
+    hmacSecret: await crypto.subtle.generateKey(
       {
         name: "HMAC",
         hash: "SHA-256",
@@ -16,5 +16,5 @@ export const generateHmacSecret = async () => {
 };
 
 export const signMessageHmac = async (message: BufferSource, hmacSecret: CryptoKey) => {
-  return await window.crypto.subtle.sign("HMAC", hmacSecret, message);
+  return await crypto.subtle.sign("HMAC", hmacSecret, message);
 };

src/lib/modules/opfs.ts

@@ -1,13 +1,5 @@
-let rootHandle: FileSystemDirectoryHandle | null = null;
-
-export const prepareOpfs = async () => {
-  rootHandle = await navigator.storage.getDirectory();
-};
-
 const getFileHandle = async (path: string, create = true) => {
-  if (!rootHandle) {
-    throw new Error("OPFS not prepared");
-  } else if (path[0] !== "/") {
+  if (path[0] !== "/") {
     throw new Error("Path must be absolute");
   }
 
@@ -17,7 +9,7 @@ const getFileHandle = async (path: string, create = true) => {
   }
 
   try {
-    let directoryHandle = rootHandle;
+    let directoryHandle = await navigator.storage.getDirectory();
     for (const part of parts.slice(0, -1)) {
       if (!part) continue;
       directoryHandle = await directoryHandle.getDirectoryHandle(part, { create });
@@ -34,12 +26,15 @@ const getFileHandle = async (path: string, create = true) => {
   }
 };
 
-export const readFile = async (path: string) => {
+export const getFile = async (path: string) => {
   const { fileHandle } = await getFileHandle(path, false);
   if (!fileHandle) return null;
 
-  const file = await fileHandle.getFile();
-  return await file.arrayBuffer();
+  return await fileHandle.getFile();
+};
+
+export const readFile = async (path: string) => {
+  return (await getFile(path))?.arrayBuffer() ?? null;
 };
 
 export const writeFile = async (path: string, data: ArrayBuffer) => {
@@ -61,9 +56,7 @@ export const deleteFile = async (path: string) => {
 };
 
 const getDirectoryHandle = async (path: string) => {
-  if (!rootHandle) {
-    throw new Error("OPFS not prepared");
-  } else if (path[0] !== "/") {
+  if (path[0] !== "/") {
     throw new Error("Path must be absolute");
   }
 
@@ -73,7 +66,7 @@ const getDirectoryHandle = async (path: string) => {
   }
 
   try {
-    let directoryHandle = rootHandle;
+    let directoryHandle = await navigator.storage.getDirectory();
     let parentHandle;
     for (const part of parts.slice(1)) {
       if (!part) continue;

src/lib/serviceWorker/client.ts

@@ -0,0 +1,39 @@
+import { DECRYPTED_FILE_URL_PREFIX } from "$lib/constants";
+import type { FileMetadata, ServiceWorkerMessage, ServiceWorkerResponse } from "./types";
+
+const PREPARE_TIMEOUT_MS = 5000;
+
+const getServiceWorker = async () => {
+  const registration = await navigator.serviceWorker.ready;
+  const sw = registration.active;
+  if (!sw) {
+    throw new Error("Service worker not activated");
+  }
+  return sw;
+};
+
+export const prepareFileDecryption = async (id: number, metadata: FileMetadata) => {
+  const sw = await getServiceWorker();
+  return new Promise<void>((resolve, reject) => {
+    const timeout = setTimeout(
+      () => reject(new Error("Service worker timeout")),
+      PREPARE_TIMEOUT_MS,
+    );
+    const handler = (event: MessageEvent<ServiceWorkerResponse>) => {
+      if (event.data.type === "decryption-ready" && event.data.fileId === id) {
+        clearTimeout(timeout);
+        navigator.serviceWorker.removeEventListener("message", handler);
+        resolve();
+      }
+    };
+    navigator.serviceWorker.addEventListener("message", handler);
+
+    sw.postMessage({
+      type: "decryption-prepare",
+      fileId: id,
+      ...metadata,
+    } satisfies ServiceWorkerMessage);
+  });
+};
+
+export const getDecryptedFileUrl = (id: number) => `${DECRYPTED_FILE_URL_PREFIX}${id}`;

src/lib/serviceWorker/index.ts

@@ -0,0 +1,2 @@
+export * from "./client";
+export * from "./types";

src/lib/serviceWorker/types.ts

@@ -0,0 +1,19 @@
+export interface FileMetadata {
+  isLegacy: boolean;
+  dataKey: CryptoKey;
+  encContentSize: number;
+  contentType: string;
+}
+
+export interface DecryptionPrepareMessage extends FileMetadata {
+  type: "decryption-prepare";
+  fileId: number;
+}
+
+export interface DecryptionReadyMessage {
+  type: "decryption-ready";
+  fileId: number;
+}
+
+export type ServiceWorkerMessage = DecryptionPrepareMessage;
+export type ServiceWorkerResponse = DecryptionReadyMessage;