加了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> 和 <link rel="stylesheet"> 生效
其他所有加载方式都不受 SRI 保护,加了也白加:
-
fetch()、XMLHttpRequest、import()动态导入:完全不识别integrity属性 -
document.createElement('script')后手动设置src和integrity:浏览器不校验 -
<iframe>、<img>、<video>:SRI 规范未覆盖,不支持 - 多个
<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校验



















