IV를 암호화된 파일 및 썸네일 앞에 합쳐서 전송하도록 변경

src/lib/modules/crypto/aes.ts

@@ -89,11 +89,15 @@ export const encryptData = async (data: BufferSource, dataKey: CryptoKey) => {
   return { ciphertext, iv: encodeToBase64(iv.buffer) };
 };
 
-export const decryptData = async (ciphertext: BufferSource, iv: string, dataKey: CryptoKey) => {
+export const decryptData = async (
+  ciphertext: BufferSource,
+  iv: string | BufferSource,
+  dataKey: CryptoKey,
+) => {
   return await window.crypto.subtle.decrypt(
     {
       name: "AES-GCM",
-      iv: decodeFromBase64(iv),
+      iv: typeof iv === "string" ? decodeFromBase64(iv) : iv,
     } satisfies AesGcmParams,
     dataKey,
     ciphertext,

src/lib/modules/file/download.svelte.ts

@@ -62,15 +62,14 @@ const requestFileDownload = limitFunction(
 );
 
 const decryptFile = limitFunction(
-  async (
-    state: FileDownloadState,
-    fileEncrypted: ArrayBuffer,
-    fileEncryptedIv: string,
-    dataKey: CryptoKey,
-  ) => {
+  async (state: FileDownloadState, fileEncrypted: ArrayBuffer, dataKey: CryptoKey) => {
     state.status = "decrypting";
 
-    const fileBuffer = await decryptData(fileEncrypted, fileEncryptedIv, dataKey);
+    const fileBuffer = await decryptData(
+      fileEncrypted.slice(12),
+      fileEncrypted.slice(0, 12),
+      dataKey,
+    );
 
     state.status = "decrypted";
     state.result = fileBuffer;
@@ -79,7 +78,7 @@ const decryptFile = limitFunction(
   { concurrency: 4 },
 );
 
-export const downloadFile = async (id: number, fileEncryptedIv: string, dataKey: CryptoKey) => {
+export const downloadFile = async (id: number, dataKey: CryptoKey) => {
   downloadingFiles.push({
     id,
     status: "download-pending",
@@ -87,7 +86,7 @@ export const downloadFile = async (id: number, fileEncryptedIv: string, dataKey:
   const state = downloadingFiles.at(-1)!;
 
   try {
-    return await decryptFile(state, await requestFileDownload(state, id), fileEncryptedIv, dataKey);
+    return await decryptFile(state, await requestFileDownload(state, id), dataKey);
   } catch (e) {
     state.status = "error";
     throw e;

src/lib/modules/file/thumbnail.ts

@@ -5,7 +5,6 @@ import { decryptData } from "$lib/modules/crypto";
 import type { SummarizedFileInfo } from "$lib/modules/filesystem";
 import { readFile, writeFile, deleteFile, deleteDirectory } from "$lib/modules/opfs";
 import { getThumbnailUrl } from "$lib/modules/thumbnail";
-import { isTRPCClientError, trpc } from "$trpc/client";
 
 const loadedThumbnails = new LRUCache<number, Writable<string>>({ max: 100 });
 const loadingThumbnails = new Map<number, Writable<string | undefined>>();
@@ -18,25 +17,18 @@ const fetchFromOpfs = async (fileId: number) => {
 };
 
 const fetchFromServer = async (fileId: number, dataKey: CryptoKey) => {
-  try {
-    const [thumbnailEncrypted, { contentIv: thumbnailEncryptedIv }] = await Promise.all([
-      fetch(`/api/file/${fileId}/thumbnail/download`),
-      trpc().file.thumbnail.query({ id: fileId }),
-    ]);
-    const thumbnailBuffer = await decryptData(
-      await thumbnailEncrypted.arrayBuffer(),
-      thumbnailEncryptedIv,
-      dataKey,
-    );
+  const res = await fetch(`/api/file/${fileId}/thumbnail/download`);
+  if (!res.ok) return null;
 
-    void writeFile(`/thumbnail/file/${fileId}`, thumbnailBuffer);
-    return getThumbnailUrl(thumbnailBuffer);
-  } catch (e) {
-    if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
-      return null;
-    }
-    throw e;
-  }
+  const thumbnailEncrypted = await res.arrayBuffer();
+  const thumbnailBuffer = await decryptData(
+    thumbnailEncrypted.slice(12),
+    thumbnailEncrypted.slice(0, 12),
+    dataKey,
+  );
+
+  void writeFile(`/thumbnail/file/${fileId}`, thumbnailBuffer);
+  return getThumbnailUrl(thumbnailBuffer);
 };
 
 export const getFileThumbnail = (file: SummarizedFileInfo) => {

src/lib/modules/filesystem/file.ts

@@ -50,7 +50,6 @@ const cache = new FilesystemCache<number, MaybeFileInfo>({
         parentId: file.parent,
         dataKey: metadata.dataKey,
         contentType: file.contentType,
-        contentIv: file.contentIv,
         name: metadata.name,
         createdAt: metadata.createdAt,
         lastModifiedAt: metadata.lastModifiedAt,
@@ -118,7 +117,6 @@ const cache = new FilesystemCache<number, MaybeFileInfo>({
           exists: true as const,
           parentId: metadataRaw.parent,
           contentType: metadataRaw.contentType,
-          contentIv: metadataRaw.contentIv,
           categories,
           ...metadata,
         };

src/lib/modules/filesystem/types.ts

@@ -31,7 +31,6 @@ export interface FileInfo {
   parentId: DirectoryId;
   dataKey?: DataKey;
   contentType: string;
-  contentIv?: string;
   name: string;
   createdAt?: Date;
   lastModifiedAt: Date;
@@ -42,7 +41,7 @@ export type MaybeFileInfo =
   | (FileInfo & { exists: true })
   | ({ id: number; exists: false } & AllUndefined<Omit<FileInfo, "id">>);
 
-export type SummarizedFileInfo = Omit<FileInfo, "contentIv" | "categories">;
+export type SummarizedFileInfo = Omit<FileInfo, "categories">;
 export type CategoryFileInfo = SummarizedFileInfo & { isRecursive: boolean };
 
 interface LocalCategoryInfo {

src/lib/server/modules/http.ts

@@ -0,0 +1,14 @@
+export const parseRangeHeader = (rangeHeader: string | null) => {
+  if (!rangeHeader) return undefined;
+
+  const firstRange = rangeHeader.split(",")[0]!.trim();
+  const parts = firstRange.replace(/bytes=/, "").split("-");
+  return {
+    start: parts[0] ? parseInt(parts[0], 10) : undefined,
+    end: parts[1] ? parseInt(parts[1], 10) : undefined,
+  };
+};
+
+export const getContentRangeHeader = (range?: { start: number; end: number; total: number }) => {
+  return range && { "Content-Range": `bytes ${range.start}-${range.end}/${range.total}` };
+};

src/lib/server/services/file.ts

@@ -10,30 +10,69 @@ import { FileRepo, MediaRepo, IntegrityError } from "$lib/server/db";
 import env from "$lib/server/loadenv";
 import { safeUnlink } from "$lib/server/modules/filesystem";
 
-export const getFileStream = async (userId: number, fileId: number) => {
+const createEncContentStream = async (
+  path: string,
+  iv: Buffer,
+  range?: { start?: number; end?: number },
+) => {
+  const { size: fileSize } = await stat(path);
+  const ivSize = iv.byteLength;
+  const totalSize = fileSize + ivSize;
+
+  const start = range?.start ?? 0;
+  const end = range?.end ?? totalSize - 1;
+  if (start > end || start < 0 || end >= totalSize) {
+    error(416, "Invalid range");
+  }
+
+  return {
+    encContentStream: Readable.toWeb(
+      Readable.from(
+        (async function* () {
+          if (start < ivSize) {
+            yield iv.subarray(start, Math.min(end + 1, ivSize));
+          }
+          if (end >= ivSize) {
+            yield* createReadStream(path, {
+              start: Math.max(0, start - ivSize),
+              end: end - ivSize,
+            });
+          }
+        })(),
+      ),
+    ),
+    range: { start, end, total: totalSize },
+  };
+};
+
+export const getFileStream = async (
+  userId: number,
+  fileId: number,
+  range?: { start?: number; end?: number },
+) => {
   const file = await FileRepo.getFile(userId, fileId);
   if (!file) {
     error(404, "Invalid file id");
   }
 
-  const { size } = await stat(file.path);
-  return {
-    encContentStream: Readable.toWeb(createReadStream(file.path)),
-    encContentSize: size,
-  };
+  return createEncContentStream(file.path, Buffer.from(file.encContentIv, "base64"), range);
 };
 
-export const getFileThumbnailStream = async (userId: number, fileId: number) => {
+export const getFileThumbnailStream = async (
+  userId: number,
+  fileId: number,
+  range?: { start?: number; end?: number },
+) => {
   const thumbnail = await MediaRepo.getFileThumbnail(userId, fileId);
   if (!thumbnail) {
     error(404, "File or its thumbnail not found");
   }
 
-  const { size } = await stat(thumbnail.path);
-  return {
-    encContentStream: Readable.toWeb(createReadStream(thumbnail.path)),
-    encContentSize: size,
-  };
+  return createEncContentStream(
+    thumbnail.path,
+    Buffer.from(thumbnail.encContentIv, "base64"),
+    range,
+  );
 };
 
 export const uploadFileThumbnail = async (

src/lib/services/file.ts

@@ -9,15 +9,11 @@ import {
 import type { FileThumbnailUploadRequest } from "$lib/server/schemas";
 import { trpc } from "$trpc/client";
 
-export const requestFileDownload = async (
-  fileId: number,
-  fileEncryptedIv: string,
-  dataKey: CryptoKey,
-) => {
+export const requestFileDownload = async (fileId: number, dataKey: CryptoKey) => {
   const cache = await getFileCache(fileId);
   if (cache) return cache;
 
-  const fileBuffer = await downloadFile(fileId, fileEncryptedIv, dataKey);
+  const fileBuffer = await downloadFile(fileId, dataKey);
   storeFileCache(fileId, fileBuffer); // Intended
   return fileBuffer;
 };