feat: add xiami crypto & have a working decryption workflow (#2, #9)

package.json

@@ -22,6 +22,7 @@
     "react-redux": "^8.0.5"
   },
   "devDependencies": {
+    "@types/node": "^20.1.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.57.1",

pnpm-lock.yaml

@@ -33,6 +33,9 @@ dependencies:
     version: 8.0.5(@types/react-dom@18.0.11)(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
 
 devDependencies:
+  '@types/node':
+    specifier: ^20.1.1
+    version: 20.1.1
   '@types/react':
     specifier: ^18.0.28
     version: 18.0.28
@@ -65,7 +68,7 @@ devDependencies:
     version: 5.0.2
   vite:
     specifier: ^4.3.2
-    version: 4.3.2
+    version: 4.3.2(@types/node@20.1.1)
 
 packages:
 
@@ -1867,6 +1870,10 @@ packages:
     resolution: {integrity: sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==}
     dev: false
 
+  /@types/node@20.1.1:
+    resolution: {integrity: sha512-uKBEevTNb+l6/aCQaKVnUModfEMjAl98lw2Si9P5y4hLu9tm6AlX2ZIoXZX6Wh9lJueYPrGPKk5WMCNHg/u6/A==}
+    dev: true
+
   /@types/parse-json@4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
     dev: false
@@ -2037,7 +2044,7 @@ packages:
       '@babel/plugin-transform-react-jsx-self': 7.21.0(@babel/core@7.21.8)
       '@babel/plugin-transform-react-jsx-source': 7.19.6(@babel/core@7.21.8)
       react-refresh: 0.14.0
-      vite: 4.3.2
+      vite: 4.3.2(@types/node@20.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -3388,7 +3395,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /vite@4.3.2:
+  /vite@4.3.2(@types/node@20.1.1):
     resolution: {integrity: sha512-9R53Mf+TBoXCYejcL+qFbZde+eZveQLDYd9XgULILLC1a5ZwPaqgmdVpL8/uvw2BM/1TzetWjglwm+3RO+xTyw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -3413,6 +3420,7 @@ packages:
       terser:
         optional: true
     dependencies:
+      '@types/node': 20.1.1
       esbuild: 0.17.18
       postcss: 8.4.23
       rollup: 3.21.5

src/SelectFile.tsx

@@ -24,7 +24,7 @@ export function SelectFile() {
             fileName,
           })
         );
-        dispatch(processFile(fileId));
+        dispatch(processFile({ fileId }));
       }
     }
 

src/decrypt-worker/client.ts

@@ -1,5 +1,5 @@
-import { ConcurrentQueue } from '../util/ConcurrentQueue';
-import { WorkerClientBus } from '../util/WorkerEventBus';
+import { ConcurrentQueue } from '~/util/ConcurrentQueue';
+import { WorkerClientBus } from '~/util/WorkerEventBus';
 import { DECRYPTION_WORKER_ACTION_NAME } from './constants';
 
 // TODO: Worker pool?

src/decrypt-worker/constants.ts

@@ -1,3 +1,7 @@
 export enum DECRYPTION_WORKER_ACTION_NAME {
   DECRYPT = 'DECRYPT',
 }
+
+export interface DecryptionResult {
+  decrypted: string; // blob uri
+}

src/decrypt-worker/crypto/CryptoBase.ts

@@ -0,0 +1,6 @@
+export interface CryptoBase {
+  isSupported(blob: Blob): Promise<boolean>;
+  decrypt(blob: Blob): Promise<Blob>;
+}
+
+export type CryptoFactory = () => CryptoBase;

src/decrypt-worker/crypto/xiami/xiami.ts

@@ -0,0 +1,47 @@
+// Xiami file header
+// offset  description
+//   0x00  "ifmt"
+//   0x04  Format name, e.g. "FLAC".
+//   0x08  0xfe, 0xfe, 0xfe, 0xfe
+//   0x0C  (3 bytes) Little-endian, size of data to copy without modification.
+//         e.g. [ 8a 19 00 ] = 6538 bytes of plaintext data.
+//   0x0F  (1 byte) File key, applied to
+//   0x10  Plaintext data
+//   ????  Encrypted data
+
+import type { CryptoBase } from '../CryptoBase';
+
+const XIAMI_FILE_MAGIC = new Uint8Array('ifmt'.split('').map((x) => x.charCodeAt(0)));
+const XIAMI_EXPECTED_PADDING = new Uint8Array([0xfe, 0xfe, 0xfe, 0xfe]);
+
+const u8Sub = (a: number, b: number) => {
+  if (a > b) {
+    return a - b;
+  }
+
+  return a + 0xff - b;
+};
+
+export class XiamiCrypto implements CryptoBase {
+  async isSupported(blob: Blob): Promise<boolean> {
+    const headerBuffer = await blob.slice(0, 0x10).arrayBuffer();
+    const header = new Uint8Array(headerBuffer);
+
+    return (
+      header.slice(0x00, 0x04).every((b, i) => b === XIAMI_FILE_MAGIC[i]) &&
+      header.slice(0x08, 0x0c).every((b, i) => b === XIAMI_EXPECTED_PADDING[i])
+    );
+  }
+
+  async decrypt(blob: Blob): Promise<Blob> {
+    const headerBuffer = await blob.slice(0, 0x10).arrayBuffer();
+    const header = new Uint8Array(headerBuffer);
+    const key = u8Sub(header[0x0f], 1);
+    const plainTextSize = header[0x0c] | (header[0x0d] << 8) | (header[0x0e] << 16);
+    const decrypted = new Uint8Array(await blob.slice(0x10).arrayBuffer());
+    for (let i = decrypted.byteLength - 1; i >= plainTextSize; i--) {
+      decrypted[i] = u8Sub(key, decrypted[i]);
+    }
+    return new Blob([decrypted]);
+  }
+}

src/decrypt-worker/worker.ts

@@ -1,12 +1,27 @@
-import { WorkerServerBus } from '../util/WorkerEventBus';
+import { WorkerServerBus } from '~/util/WorkerEventBus';
 import { DECRYPTION_WORKER_ACTION_NAME } from './constants';
 
+import type { CryptoFactory } from './crypto/CryptoBase';
+import { XiamiCrypto } from './crypto/xiami/xiami';
+
 const bus = new WorkerServerBus();
 onmessage = bus.onmessage;
 
+const decryptorFactories: CryptoFactory[] = [
+  // Xiami (*.xm)
+  () => new XiamiCrypto(),
+];
+
 bus.addEventHandler(DECRYPTION_WORKER_ACTION_NAME.DECRYPT, async (blobURI) => {
-  const blob = await fetch(blobURI).then((r) => r.arrayBuffer());
-  // TODO: Implement decryptor for blob received here.
-  console.log(blob);
-  return { hello: true };
+  const blob = await fetch(blobURI).then((r) => r.blob());
+
+  for (const factory of decryptorFactories) {
+    const decryptor = factory();
+    if (await decryptor.isSupported(blob)) {
+      const decrypted = await decryptor.decrypt(blob);
+      return { decrypted: URL.createObjectURL(decrypted) };
+    }
+  }
+
+  throw new Error('could not decrypt file: no working decryptor found');
 });

src/features/file-listing/fileListingSlice.ts

@@ -1,7 +1,9 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
-import type { RootState } from '../../store';
-import { decryptionQueue } from '../../decrypt-worker/client';
+import type { RootState } from '~/store';
+import { decryptionQueue } from '~/decrypt-worker/client';
+
+import type { DecryptionResult } from '~/decrypt-worker/constants';
 
 export enum ProcessState {
   UNTOUCHED = 'UNTOUCHED',
@@ -40,10 +42,15 @@ const initialState: FileListingState = {
   displayMode: ListingMode.LIST,
 };
 
-export const processFile = createAsyncThunk('fileListing/processFile', async (fileId: string, thunkAPI) => {
+export const processFile = createAsyncThunk<
+  DecryptionResult,
+  { fileId: string },
+  { rejectValue: { message: string; stack?: string } }
+>('fileListing/processFile', async ({ fileId }, thunkAPI) => {
   const file = selectFiles(thunkAPI.getState() as RootState)[fileId];
   if (!file) {
-    return thunkAPI.rejectWithValue('ERROR: File not found');
+    const { message, stack } = new Error('ERROR: File not found');
+    return thunkAPI.rejectWithValue({ message, stack });
   }
 
   return decryptionQueue.add({ id: fileId, blobURI: file.raw });
@@ -76,6 +83,29 @@ export const fileListingSlice = createSlice({
       }
     },
   },
+  extraReducers(builder) {
+    builder.addCase(processFile.fulfilled, (state, action) => {
+      const { fileId } = action.meta.arg;
+      const file = state.files[fileId];
+      if (!file) return;
+
+      file.state = ProcessState.COMPLETE;
+      file.decrypted = action.payload.decrypted;
+      // TODO: populate file metadata
+    });
+
+    builder.addCase(processFile.rejected, (state, action) => {
+      const { fileId } = action.meta.arg;
+      const file = state.files[fileId];
+      if (!file) return;
+
+      if (action.payload) {
+        file.errorMessage = action.payload.message;
+      } else {
+        file.errorMessage = action.error.message || 'unknown error';
+      }
+    });
+  },
 });
 
 export const { addNewFile, setDecryptedContent } = fileListingSlice.actions;

tsconfig.json

@@ -17,7 +17,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

vite.config.ts

@@ -1,7 +1,13 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import path from 'path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  resolve: {
+    alias: {
+      '~': path.resolve(__dirname, 'src'),
+    },
+  },
+});