17370845950

HTML5本身不提供文件完整性校验能力，需借助File和FileReader API配合SubtleCrypto手动计算哈希（如SHA-256）并与预期值比对；服务端必须重新计算哈希以确保安全，前端校验仅作辅助。

HTML5本身不提供文件完整性校验能力

HTML5 的 仅负责选择和读取本地文件，不内置哈希计算、签名验证或远程比对功能。所谓“HTML5校验文件完整性”，实际是借助其提供的 File 和 FileReader API，在浏览器端手动读取文件内容并计算摘要（如 SHA-256），再与预期值比对。

用 FileReader + SubtleCrypto 计算文件哈希

现代浏览器支持通过 SubtleCrypto.digest() 对文件二进制流做哈希运算，但需注意：FileReader.readAsArrayBuffer() 是必要中间步骤，不能直接传 File 给 digest()。

• 必须先调用 file.arrayBuffer() 或用 FileReader 转为 ArrayBuffer，再传入 crypto.subtle.digest()
• SHA-1 已不安全，推荐使用 "SHA-256" 或 "SHA-512"
• 大文件（如 >100MB）可能触发内存压力或长时间阻塞主线程，建议配合 AbortSignal 和分块读取（需自行实现流式 digest）

async function computeHash(file) {
  const buffer = await file.arrayBuffer();
  const hashBuffer = await crypto.subtle.digest("SHA-256", buffer);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map(b => b.toString(16).padStart(2, "0")).join("");
}

// 使用示例
document.querySelector("input[type=file]").onchange = async (e) => {
  const file = e.target.files[0];
  const expected = "a591a6d40bf420404a011733cfb7b190d62c65bf0bcda32b57b277d9ad9f146e";
  const actual = await compute
Hash(file);
  console.log(actual === expected ? "✅ 校验通过" : "❌ 哈希不匹配");
};

服务端比对才是完整链路的关键环节

前端哈希仅防传输篡改或用户误选，无法防止恶意用户绕过前端逻辑。真实场景中，完整性校验必须由服务端完成：

• 前端上传时附带客户端计算的 sha256 字段（如放在 FormData 中）
• 服务端接收后，**重新计算上传文件的哈希**，而非信任前端传来的值
• 若需更高保障，应使用数字签名（如服务端私钥签名 + 前端公钥验签），但需额外处理密钥分发与格式（如 JWS）
• 注意：某些 CDN 或代理可能修改 Content-Encoding 或自动解压，导致服务端读到的内容与原始文件不一致

常见失败原因和绕不开的坑

实际落地时，多数问题不出在算法本身，而在于环境与流程断点：

立即学习“前端免费学习笔记（深入）”；

• SecurityError：在非 HTTPS 页面调用 SubtleCrypto（Chrome/Firefox 强制要求）
• DOMException: The operation is insecure：尝试在 iframe 或 sandboxed 环境中访问 crypto.subtle
• 哈希值大小写不一致：Python/Node.js 默认输出小写，但有些旧系统返回大写，比对前务必统一 .toLowerCase()
• 文件编码干扰：用 FileReader.readAsText() 会丢失二进制精度，必须用 readAsArrayBuffer() 或 file.arrayBuffer()

真正难的不是算哈希，而是确保从用户点击“选择文件”到服务端落盘，每一步的字节都未被静默修改——这需要前后端协同设计，且不能只依赖前端代码。