integrity属性校验的是下载资源的字节流与构建时生成的哈希值是否完全一致,而非文件是否下载完整;哪怕仅1字节差异(如网络丢包、代理篡改、cdn优化),校验即失败并静默丢弃资源。

模块校验失败时,integrity 属性到底在验什么
它不是在验“文件是否下载完整”,而是在验“下载下来的字节流,和构建时生成的哈希值是否完全一致”。网络波动导致中间某个 TCP 包丢失或乱序,浏览器可能拿到一个截断、错位或被代理篡改过的资源,integrity 就会直接拒绝执行——哪怕只差 1 个字节。
常见现象:Failed to find a valid digest in the 'integrity' attribute 或 The resource failed to load because its integrity check failed。这不是 CDN 缓存问题,也不是你本地改了文件,而是传输链路中某处(运营商劫持、中间代理、Wi-Fi 重传丢帧)让内容变了。
-
integrity值必须和实际文件内容严格匹配,重新打包、压缩、格式化 JS 都会让哈希失效 - Webpack/Vite 构建后生成的
subresource-integrity插件输出的哈希,要确保部署时没被 Nginx 自动 gzip 或添加 BOM - 如果用了
Content-Encoding: br(Brotli),但服务端没在响应头里同步更新integrity对应的哈希(Brotli 压缩后哈希完全不同),也会失败
用 webpack-subresource-integrity 时,为什么哈希总对不上
这个插件默认只对 script 和 link 标签注入 integrity,但它依赖 Webpack 的 compilation.assets 输出——如果其他插件(比如 HtmlWebpackPlugin 的 minify 选项)在 SRI 插件之后又修改了 HTML 内容(例如删空格、合并属性),就可能导致最终写入的 script 标签路径和插件计算哈希时用的路径不一致。
- 确认
HtmlWebpackPlugin的minify关闭或设为false,否则 SRI 插件算的是未压缩 HTML 中的src,而实际加载的是压缩后的路径 - 若使用
public/目录下的静态资源(如<script src="/js/vendor.js"></script>),SRI 插件默认不处理,需手动配置enabled: true和hashFuncNames: ['sha384'] - Webpack 5+ 默认开启持久化缓存,有时旧的
assets被复用,但哈希没刷新,加cache: false或清掉node_modules/.cache再试
CDN + SRI 场景下,如何避免跨域与哈希错配双重故障
CDN 通常会做内容优化:自动压缩、移除注释、甚至升级 ES 版本(如把 const 改成 var)。这些操作会让 CDN 返回的内容和你本地构建生成的哈希完全不匹配。
- 不要让 CDN 对已带
integrity的资源做任何内容修改;在 CDN 后台关闭“JS/CSS 优化”、“自动压缩”、“代码瘦身”等开关 - 如果必须用 CDN 的压缩能力,那就别用 SRI,或者改用 CDN 提供的校验机制(如 Cloudflare 的
__cf_bmcookie 验证 + 源站哈希比对) - 检查响应头:
Content-Security-Policy: require-sri-for script style会强制所有脚本/样式都必须带integrity,一旦漏写或 CDN 剥掉了该属性,整个页面 JS 就会静默失效
线上出问题时,怎么快速定位是网络波动还是配置错误
打开开发者工具 → Network → 找到报错的 JS 文件 → 右键 “Open in Sources” → 查看左侧预览内容是否完整(有无截断、乱码、HTML 片段混入);再右键 “Copy response” 粘贴到本地,用 shasum -a 384 算哈希,和 HTML 中 integrity 值比对。
- 如果哈希不一致,且响应体明显残缺(比如只有前 2KB),基本是网络层丢包或代理中断,不是你的错
- 如果哈希一致但依然报错,检查是否启用了
document.write()或动态插入 script 标签——这些方式绕过了 SRI 校验,但浏览器仍会抛出警告 - 用
curl -v https://your-cdn.com/app.js多次请求,对比Content-Length是否稳定;不稳定说明链路本身不可靠,SRI 只是暴露了这个问题
真正麻烦的不是哈希怎么算,而是你以为它在防篡改,其实它最先拦住的是不稳定的物理网络。校验本身没错,错的是我们常把它当成兜底方案,却忘了它对传输质量极度敏感。











