求助：如何用JavaScript结合CryptoJS实现视频文件加密解密？

我来帮你排查下问题所在，你遇到的解密后视频无法播放的核心原因是二进制数据的处理流程出错了，咱们一步步来梳理和修正：

原代码的问题分析 #

第一个版本的核心错误 #

• 用readAsText()读取视频文件：视频是二进制格式，强行转成文本会破坏原始字节结构，导致加密解密后数据不可逆丢失。
• 解密后用toString(CryptoJS.enc.Utf8)：视频不是UTF-8编码的文本内容，转成字符串会进一步损坏二进制数据，自然无法播放。

第二个版本的进步与剩余问题 #

你改成readAsArrayBuffer()读取二进制、用CryptoJS.lib.WordArray.create()处理数据是正确的方向，但最后解密后的videoDesencriptado是CryptoJS专属的WordArray对象，不能直接传入Blob构造函数——浏览器无法识别这种格式，必须先转换成原生的Uint8Array二进制数组，否则生成的Blob不是有效的视频文件。

修正后的完整代码 #

input.on('change', function (e) {
  let file = e.target.files[0];
  if (!file) return; // 空文件判断
  let reader = new FileReader();
  
  reader.onload = function () {
    // 1. 将ArrayBuffer转换为CryptoJS可处理的WordArray
    let fileWordArray = CryptoJS.lib.WordArray.create(reader.result);
    console.log('原始文件转WordArray:', fileWordArray);

    // 2. 加密：使用更安全的CBC模式+随机IV，注意密钥的正确处理
    let key = CryptoJS.enc.Utf8.parse(getCookie('clave'));
    let iv = CryptoJS.lib.WordArray.random(16); // AES块固定为16字节，IV长度要匹配
    let videoEncriptado = CryptoJS.AES.encrypt(fileWordArray, key, { iv: iv });
    
    // 提示：如果需要存储加密数据，要把IV一起保存（比如转成base64拼接在加密字符串后）
    // 示例：let storedData = `${videoEncriptado.toString()}|${iv.toString(CryptoJS.enc.Base64)}`;

    // 3. 解密：必须使用加密时的同一个IV
    let videoDesencriptado = CryptoJS.AES.decrypt(videoEncriptado, key, { iv: iv });
    console.log('解密后的WordArray:', videoDesencriptado);

    // 4. 关键步骤：将WordArray转换为浏览器可识别的Uint8Array
    let uint8Array = wordArrayToUint8Array(videoDesencriptado);
    
    // 5. 创建有效的视频Blob并处理播放/下载
    let blob = new Blob([uint8Array], { type: file.type }); // 用原文件的MIME类型更可靠
    let url = URL.createObjectURL(blob);
    
    // 修正视频元素的属性：应该设置src而非href
    var videoNode = document.getElementsByTagName('video')[0];
    videoNode.src = url;
    videoNode.play().catch(err => console.error('视频播放失败:', err));

    // 下载逻辑优化：保留原文件名
    let element = document.createElement('a');
    element.href = url;
    element.download = `decrypted-${file.name}`;
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
    
    // 6. 释放临时URL，避免内存泄漏
    setTimeout(() => URL.revokeObjectURL(url), 1000);
  };

  reader.readAsArrayBuffer(file);
});

// 辅助函数：将CryptoJS WordArray转换为Uint8Array
function wordArrayToUint8Array(wordArray) {
  let arrayOfWords = wordArray.words || [];
  let byteLength = wordArray.sigBytes || arrayOfWords.length * 4;
  let uInt8Array = new Uint8Array(byteLength);
  let byteIndex = 0;
  
  for (let i = 0; i < byteLength; i++) {
    let word = arrayOfWords[i];
    // 从Word的高位到低位提取字节
    uInt8Array[byteIndex++] = word >> 24;
    uInt8Array[byteIndex++] = (word >> 16) & 0xff;
    uInt8Array[byteIndex++] = (word >> 8) & 0xff;
    uInt8Array[byteIndex++] = word & 0xff;
  }
  
  return uInt8Array.slice(0, byteLength);
}

关键改进点说明 #

1. 密钥与IV的正确处理：

   • 把字符串密钥转成WordArray，避免因编码差异导致加密解密的密钥不一致。
   • 添加随机IV（初始化向量），AES-CBC模式下使用随机IV能大幅提高加密安全性，解密时必须复用同一个IV，所以要记得和加密数据一起存储。

2. 二进制格式转换：
   CryptoJS的WordArray是内部格式，必须通过辅助函数转成浏览器原生的Uint8Array，才能让Blob正确解析为视频文件。

3. 视频元素属性修正：
   HTML5 video元素是通过src属性设置播放地址的，之前的setAttribute('href', url)是错误的。

4. 内存与兼容性优化：

   • 使用URL.revokeObjectURL释放临时URL，避免长时间占用浏览器内存。
   • 复用原文件的MIME类型和文件名，提升跨浏览器兼容性和用户体验。

额外注意事项 #

• 大视频处理：如果视频文件很大，readAsArrayBuffer会一次性把整个文件加载到内存，可能导致卡顿或内存溢出，建议改用流式处理（比如用File.slice()分段读取加密）。
• 密钥安全性：不要直接用简单的字符串作为密钥，建议用PBKDF2等密钥派生算法从用户密码生成高强度密钥。

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