integrity未生效的根本原因是未同时满足三个条件：script标签含src属性、显式声明crossorigin="anonymous"、cdn响应头含access-control-allow-origin:*，缺一则浏览器静默跳过校验。
加了 integrity 却没拦住被篡改的 JS，基本可以断定：不是哈希值错了，就是漏写了 crossorigin="anonymous"，或者 CDN 响应头缺失 Access-Control-Allow-Origin。
为什么 integrity 不生效？
浏览器只在同时满足以下三个条件时才真正执行校验：
-
<script></script>标签必须有src属性（内联脚本不支持） - 必须显式声明
crossorigin="anonymous"（写成crossorigin=""在 Firefox 下可能失效） - CDN 返回的响应头里必须含
Access-Control-Allow-Origin: *（公开 CDN 通常满足；自建服务若需鉴权，则要用crossorigin="use-credentials"并配对应响应头）
缺一即静默跳过——资源照常加载，控制台连 warning 都没有。这不是 bug，是规范强制要求：SRI 必须走 CORS 流程才能拿到完整响应体用于哈希计算。
怎么生成正确的 integrity 值？
哈希必须基于目标 URL 实际返回的字节流（解压后、去 BOM、UTF-8 编码一致），不是本地文件，也不是 HTML 里写的路径内容。CDN 可能重定向、启用 Brotli/gzip、按 UA 返回不同版本，这些都会让本地算的哈希失效。
- 最可靠命令：
curl -sL https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js | openssl dgst -sha384 -binary | openssl base64 -A - 算法优先选
sha384：比sha256抗碰撞更强，主流 CDN 全支持；sha512浏览器不认 - 输出必须是 base64 编码字符串，不能是 hex（比如不能写
sha256-abc123，得是sha256-AbCdEf） - 在线工具（如 srihash.org）方便但难排查细节（是否跟随重定向、是否处理 BOM），出问题时建议回退到命令行复现
校验失败时浏览器到底怎么做？
不是报错后继续执行，而是直接丢弃整个资源——连 JS 解析都不做。结果就是：
- 函数未定义（
TypeError: xxx is not a function） - 页面白屏或关键功能缺失
- 控制台只报一条错误：
The resource https://xxx.js was blocked because integrity check failed -
onerror事件不会触发，window.onerror也捕获不到
这意味着你没法靠 JS fallback，只能靠构建时自动注入 + CI 流水线校验哈希一致性来提前拦截问题。
容易被忽略的硬性细节
很多人以为加了 integrity 就万事大吉，其实几个关键点稍不注意就全盘失效：
-
crossorigin="anonymous"必须写在<script></script>标签上，且不能拼错（比如写成crossorgin） - HTTP 协议下部分浏览器会直接忽略
integrity，强制走 HTTPS 才能确保校验生效 - 模块脚本（
type="module"）默认启用 CORS，所以integrity必须搭配crossorigin，否则直接报错 - 多个哈希用空格分隔（如
sha256-xxx sha384-yyy），但浏览器只取第一个匹配项，后面冗余的不参与逻辑
最危险的是“看起来正常”——页面能打开、控制台没红字、功能偶尔还跑得通。那往往说明 SRI 根本没启动，而不是它失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
