HTML5怎样用WebCryptoAPI加密文件_HTML5WebCryptoAPI文件加密流程【说明】

HTML5 Web Crypto API 可在浏览器端实现端到端文件加密：读取文件为ArrayBuffer，生成或导入AES-GCM密钥，用唯一IV加密并封装元数据，全程密钥不离设备。

HTML5 的 Web Crypto API 可以在浏览器端对文件进行加密，无需上传服务器，保护用户数据隐私。核心思路是：读取文件 → 生成密钥或导入密钥 → 使用 AES-GCM 等算法加密 → 输出加密后的二进制数据（如 ArrayBuffer 或 Blob）。整个过程全程在客户端完成，密钥不离开用户设备。

1. 读取文件并转为 ArrayBuffer

加密前需将文件内容加载为可操作的二进制格式：

• 使用 FileReader.readAsArrayBuffer() 读取用户选择的文件
• 确保在 onload 回调中获取 reader.result（即 ArrayBuffer）
• 注意：大文件需考虑内存占用，必要时可分块处理（Web Crypto 本身不支持流式加密，需自行分段）

2. 生成或导入加密密钥

推荐使用 AES-GCM（兼顾加密与完整性校验），密钥需通过安全方式生成或派生：

• 生成随机密钥：crypto.subtle.generateKey("AES-GCM", true, ["encrypt", "decrypt"])
• 若用户输入密码，可用 HKDF 或 PBKDF2 派生密钥（需 salt 和足够迭代次数）
• 密钥不可直接存储明文，导出时建议用 exportKey("jwk") 并由用户自行保管；导入时用 importKey()

3. 执行加密操作

AES-GCM 加密需要密钥、待加密数据、随机初始化向量（IV）和可选的附加认证数据（AAD）：

• IV 必须每次唯一（推荐 12 字节随机值），加密后需与密文一同保存（如拼接在开头或单独字段）
• 调用 crypto.subtle.encrypt({ name: "AES-GCM", iv, additionalData }, key, data)
• 返回 Promise，解析后得到加密结果 ArrayBuffer
• 常见错误：重复使用同一 IV → 严重削弱安全性；密钥权限未设为 "encrypt" → 报错

4. 保存或传输加密结果

加密完成后，需将密文、IV、算法参数等合理封装以便后续解密：

• 推荐构造一个简单 JSON 元数据对象，包含 iv（Base64 编码）、algorithm、data（密文 Base64 或直接为 Blob）

  

• 若下载加密文件，可将元数据与密文合并为新 Blob，用 URL.createObjectURL() 触发下载
• 切勿在前端硬编码密钥或把密钥传给不可信服务；解密逻辑也必须在同源页面中运行

不复杂但容易忽略细节，比如 IV 管理、密钥导出格式、Promise 异步顺序和错误捕获。只要每步验证类型与权限，就能稳定实现浏览器内端到端文件加密。