使用CryptoJS在React客户端解密大文件时栈溢出问题求助

问题根源分析 #

你遇到的Maximum Call Stack Size Exceeded错误，核心原因是wordArrayToByteArray函数里的[].concat.apply([], result)这行代码。当处理9MB的视频文件时，result数组会包含海量子数组（每个子数组对应4字节数据），而apply方法会把这些子数组作为单独参数传递给concat，JS引擎对函数参数数量有上限，参数过多时就会触发栈溢出。

另外，你的解密流程还有个隐藏坑：把二进制加密文件转成UTF-8字符串再处理，这会直接损坏数据——UTF-8是字符编码，不是二进制数据的安全容器，很多二进制字节序列无法被正确解码为UTF-8字符，后续转回来时数据会丢失或变形。

修复方案 #

1. 修复栈溢出：替换数组扁平化方式

把嵌套数组的扁平化逻辑改成循环直接拼接，彻底避免apply带来的参数数量限制问题：

wordArrayToByteArray = (wordArray, length) => { 
  if(wordArray.hasOwnProperty("sigBytes") && wordArray.hasOwnProperty("words")){
    length = wordArray.sigBytes; 
    wordArray = wordArray.words; 
  } 
  let result = []; 
  let bytes; 
  let i = 0; 
  while(length > 0){ 
    bytes = this.wordToByteArray(wordArray[i], Math.min(4, length)); 
    length -= bytes.length;
    // 直接循环push每个字节，避免子数组嵌套
    for (let b of bytes) {
      result.push(b);
    }
    i++; 
  } 
  return result; 
}

2. 优化解密流程：避免UTF-8转换损坏数据

二进制文件的加解密应该直接操作二进制数据，跳过不必要的字符串转换。可以直接在Uint8Array和CryptoJS的WordArray之间转换：

// 新增：把Uint8Array直接转成WordArray，无需UTF-8中转
uintArrayToWordArray = (uintArray) => {
  const words = [];
  for (let i = 0; i < uintArray.length; i++) {
    words[i >>> 2] |= (uintArray[i] & 0xff) << (24 - (i % 4) * 8);
  }
  return CryptoJS.lib.WordArray.create(words, uintArray.length);
}

decryptFile = (downloaded) => { 
  // 直接转换加密文件的Uint8Array为WordArray
  const encryptedWordArray = this.uintArrayToWordArray(downloaded);
  // 解密得到WordArray
  const decrypted = CryptoJS.AES.decrypt({ ciphertext: encryptedWordArray }, "123");
  // 直接把解密后的WordArray转成Uint8Array，跳过Hex和UTF-8步骤
  const uint8Array = new Uint8Array(decrypted.sigBytes);
  let offset = 0;
  for (let i = 0; i < decrypted.words.length; i++) {
    const word = decrypted.words[i];
    uint8Array[offset++] = (word >> 24) & 0xff;
    if (offset < decrypted.sigBytes) uint8Array[offset++] = (word >> 16) & 0xff;
    if (offset < decrypted.sigBytes) uint8Array[offset++] = (word >> 8) & 0xff;
    if (offset < decrypted.sigBytes) uint8Array[offset++] = word & 0xff;
  }
  return uint8Array;
}

onDownload = () => { 
  ipfs.get(this.state.ipfsHash,(error,files)=>{ 
    files.forEach((file)=>{ 
      console.log(file.path); 
      const decryptedFile = this.decryptFile(file.content); 
      const blob = new Blob([decryptedFile],{type: "video/mp4"}); 
      console.log(blob); 
      fileSaver.saveAs(blob,"curseTheInternet.mp4"); 
    }) 
  }) 
}

这个优化后的流程完全规避了UTF-8转换的风险，同时提升了处理大文件的效率。

推荐的客户端加密库 #

如果经常处理大文件，CryptoJS并非最优选择，推荐以下更适配的工具：

• Web Crypto API：浏览器原生加密接口，专为二进制数据设计，支持异步操作和流式处理，性能拉满且无需额外依赖，SubtleCrypto接口提供了AES等主流算法的实现。
• libsodium-wrappers：知名加密库libsodium的JS封装，接口安全易用，支持大文件分块处理，在客户端和Node.js环境都能稳定运行。
• Forge：功能全面的加密工具库，支持多种算法和二进制数据操作，对大文件的兼容性更好，文档也很详尽。

内容的提问来源于stack exchange，提问作者CloudWave