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