integrity属性仅校验HTTP响应体完整性，必须与crossorigin="anonymous"配合使用，哈希值须基于CDN实际返回的解压后字节生成，否则静默失效。
integrity 属性只在校验响应体，不是校验 URL 或证书
浏览器拿到 CDN 返回的 JS 内容后，会计算它的 SHA-256/384/512 哈希值，再跟 integrity 里写的比对。哪怕脚本 URL 没变、HTTPS 证书有效、CDN 域名可信，只要内容被改了一个字节（比如插入了 eval(atob("..."))），哈希就不匹配，脚本直接被丢弃——连 onerror 都不会触发。
常见错误现象：Failed to find a valid digest in the 'integrity' attribute，页面白屏或功能缺失，但控制台没其他报错；你以为是网络问题，其实是 SRI 拦住了。
- 哈希必须基于实际 HTTP 响应体生成，不是本地文件、不是 HTML 源码、不是压缩前的源码
- CDN 启用 Brotli/gzip 不影响校验，浏览器校验的是解压后的内容
- BOM、换行符、末尾空格都会导致哈希不一致，本地构建时 minify 工具差异要特别注意
crossorigin="anonymous" 是硬性前提，漏写等于没开
没有 crossorigin，integrity 就是摆设：浏览器会静默忽略它，既不报错也不校验。这不是 bug，是规范强制要求——SRI 必须走 CORS 流程才能拿到完整响应体用于哈希计算。
绝大多数公开 CDN（jsDelivr、unpkg、cdnjs）都返回 Access-Control-Allow-Origin: *，所以用 crossorigin="anonymous" 就够了；只有你自己的后端需要登录态访问静态资源时，才考虑 use-credentials，但必须配套返回 Access-Control-Allow-Origin: https://your-site.com 和 Access-Control-Allow-Credentials: true。
- 用
curl -I https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js看响应头是否含access-control-allow-origin - 别信“我加了 integrity 就安全了”——先查 DOM 里那个
<script></script>标签有没有写crossorigin
生成 integrity 值必须用真实响应体，别依赖本地文件或在线工具
最可靠的方式是让命令行直接请求 CDN URL，拿到原始响应体再哈希。因为 CDN 可能做重定向、内容协商（gzip/Brotli）、甚至按 UA 返回不同版本，本地文件和在线生成器根本无法复现。
推荐命令（以 SHA-384 为例）：
curl -sL https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js | openssl dgst -sha384 -binary | openssl base64 -A
输出类似：sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC
- 避免用
openssl dgst -sha384 -binary react.min.js—— 这校验的是你硬盘上的文件，不是 CDN 实际下发的 - 如果脚本有多个 CDN 备用地址（如 fallback），每个 URL 都得单独生成对应哈希，不能复用
- 线上发布后务必用 curl + openssl 重验一次，防止构建流程或 CDN 缓存策略引入意外变更
SRI 不适用于动态加载，fetch() 和 createElement('script') 都绕过校验
integrity 只在 HTML 解析阶段生效，仅作用于带该属性的静态 <script></script> 和 <link rel="stylesheet"> 标签。所有运行时动态加载行为都不受保护：
-
fetch()下载脚本后eval()或注入<script></script>标签 → 完全绕过 SRI -
document.createElement('script')并设置src→ 即使手动加integrity和crossorigin，浏览器也不校验 - 内联脚本（
<script>alert(1)</script>）、javascript:伪协议、onerror里的字符串执行 → SRI 无感知
这意味着：SRI 是“外链资源守门员”，不是“执行守门员”。它防不住富文本渲染、模板拼接、服务端注入等场景——这些必须靠 CSP 的 script-src + nonce 或 strict-dynamic 配合。
真正容易被忽略的点是：SRI 生效的前提链条太长——URL 固定、CDN 支持 CORS、响应体稳定、哈希生成方式正确、HTML 标签写法无误、浏览器版本支持（Chrome 45+/Firefox 43+/Safari 10.1+）。任意一环断裂，它就退化成普通外链，而你可能完全不知道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
