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 异步顺序和错误捕获。只要每步验证类型与权限，就能稳定实现浏览器内端到端文件加密。
