integrity属性本身不防cdn劫持，仅在校验失败时拒绝加载，但必须同时配置crossorigin="anonymous"、哈希基于真实cdn响应体计算、且仅用于script或link[rel="stylesheet"]标签，缺一即静默失效。
integrity 属性本身不防 CDN 劫持，它只在校验失败时拒绝加载——但前提是配置完全正确。漏掉 crossorigin="anonymous"、哈希不是从真实 CDN 响应体算出、或用了不支持的标签，它就彻底失效，且浏览器一声不吭。
为什么加了 integrity 却没拦住被篡改的脚本
浏览器只在 CORS 模式下读取响应体做哈希比对。没写 crossorigin，或写成 crossorigin=""、crossorigin="true" 这类非法值，校验直接跳过，资源照常执行。
-
crossorigin="anonymous"是公开 CDN（如 jsDelivr、unpkg）唯一正确的写法 -
type="module"脚本默认走 CORS，所以可以不显式写crossorigin，但普通<script></script>必须手动加 - 如果 CDN 响应头没返回
Access-Control-Allow-Origin: *（比如私有镜像或老旧服务），加了crossorigin反而会让请求失败，资源 403 或 0 字节
怎么生成一个真正有效的 integrity 值
本地文件、网页里抄的、在线工具随便输个 URL 算出来的哈希，99% 无效。CDN 可能压缩、重定向、按 UA 返回不同内容，甚至插入 BOM。
- 必须用命令行直取线上响应体：
curl -sL https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js | openssl dgst -sha384 -binary | openssl base64 -A -
-sL不可省：静默 + 跟重定向，否则哈希的是 302 响应体 - 不用手动解压：curl 默认已处理 gzip/Brotli，返回的就是浏览器实际拿到的解压后字节
- 前缀必须小写、带短横：
sha384-✅，SHA384-❌，sha384:❌
样式表（link rel="stylesheet"）的 SRI 容易被忽略的点
<link> 的 SRI 失效时几乎不报错——页面照样渲染，只是样式丢掉，控制台只埋一条 Failed to find a valid digest in the 'integrity' attribute warning，默认可能被过滤掉。
- 必须同时写
integrity和crossorigin="anonymous"，空值crossorigin不行 - HTTPS 是硬性前提：HTTP 下部分浏览器直接禁用 SRI，
file://协议下全部失效 - CDN 返回
Content-Encoding: gzip或br不影响校验，但哈希必须基于解压后字节，不能对原始未压缩文件算
真正难的不是加属性，而是每次上线都确保哈希绑定到那个精确字节流——构建工具差异、CDN 压缩策略、BOM 插入、甚至 Node.js 版本导致的 base64 编码偏差，都会让哈希漂移。上线前务必手动删掉 integrity 值，确认篡改后真能触发拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
