加了integrity却没报错也没拦截，是因为sri校验未触发——必须同时设置integrity和crossorigin属性（推荐crossorigin="anonymous"），否则浏览器静默忽略；哈希值须基于线上真实响应体生成，仅script和link[rel=stylesheet]支持。
为什么加了 integrity 却没报错也没拦截？
因为浏览器根本没启动校验——integrity 单独存在时是无效的。SRI 必须配合 crossorigin 属性才能触发，否则浏览器静默忽略，连控制台 warning 都不打。你看到页面白屏或功能缺失，大概率就是这个原因。
-
crossorigin="anonymous"是公开 CDN（如 jsDelivr、unpkg）的标准写法，不带 Cookie 发起请求 - 写成
crossorigin="use-credentials"但后端没返回Access-Control-Allow-Credentials: true和明确的Access-Control-Allow-Origin（不能是*），请求会直接失败 - 只写
crossorigin留空（即crossorigin=""）在部分浏览器（如 Firefox）解析不稳定，建议统一用crossorigin="anonymous"
哈希值必须从真实响应体生成，不是本地文件
CDN 返回的内容和你本地下载的 .js 或 .css 文件经常不一致：可能被 gzip/Brotli 压缩、含 BOM、重定向跳转、甚至按 UA 返回不同版本。用本地文件算出的哈希，99% 会不匹配。
- 正确命令：
curl -sL https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js | openssl dgst -sha384 -binary | openssl base64 -A -
-sL确保静默且跟随重定向，拿到浏览器实际加载的最终响应体 -
openssl dgst -sha384 -binary对解压后的明文做哈希，行为与浏览器完全一致 - 在线生成器（如 srihash.org）底层也是 curl，但无法控制重定向和编码细节，出问题难定位
integrity 只对 <script></script> 和 <link rel="stylesheet"> 生效
其他所有加载方式都不受 SRI 保护，加了也白加：
-
fetch()、XMLHttpRequest、import()动态导入：完全不识别integrity属性 -
document.createElement('script')后手动设置src和integrity：浏览器不校验 -
<iframe></iframe>、<img>、<video></video>：SRI 规范未覆盖，不支持 - 多个
<script></script>都带integrity时，只要一个失败，对应脚本就彻底消失，且无 fallback 机制
SRI 失败时为什么看不到明显错误？
校验失败不会触发 onerror，也不会阻塞页面渲染，只会丢弃资源并在控制台输出一条 warning 级别日志：Failed to find a valid digest in the 'integrity' attribute。它默认可能被过滤掉，尤其当你没打开「Verbose」级别日志时。
- 检查 DevTools Console → 右上角「Filter」→ 勾选「Warnings」
- 注意：该错误只提示“哪个标签出问题”，不告诉你哈希哪里不对，得靠比对响应体重新生成
- 样式表（
<link rel="stylesheet">）失败时更隐蔽——页面可能只是“看起来不对”，没 JS 报错，容易误判为 CSS 写错了 - HTTPS 是硬性前提：部分浏览器对 HTTP 协议的资源直接忽略
integrity校验
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
