integrity属性不生效主因是未配crossorigin="anonymous"，浏览器仅在cors模式下校验哈希，否则静默跳过；哈希必须基于真实cdn响应体生成，且仅script和link[rel=stylesheet]支持。
integrity 属性不生效，八成是没配 crossorigin="anonymous"
浏览器只在 CORS 模式下才读取响应体来计算哈希，否则直接跳过校验，且控制台零提示。单独写 integrity 等于白加。
必须显式加上 crossorigin="anonymous"，写成 crossorigin="true"、crossorigin（无值）、或漏掉，都会导致校验静默失效。
-
type="module"脚本默认走 CORS，所以可省略crossorigin；但普通<script></script>必须手动加 - 若 CDN 不返回
Access-Control-Allow-Origin: *（比如某些私有镜像），加了crossorigin反而会让请求失败——这时得换 CDN 或加代理补头 - 本地用
file://打开页面时，integrity全部被禁用，必须走http://localhost或 HTTPS 环境测试
哈希值必须从真实 CDN 响应体生成，不是本地文件
本地 npm install 下来的 vue.global.js 和 CDN 实际返回的内容，哪怕只差一个 BOM 字节或换行符，哈希就完全不匹配。
最可靠方式是用命令行直取 CDN URL 的解压后字节：
curl -sL https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js | openssl dgst -sha384 -binary | openssl base64 -A
- 必须加
-sL：静默 + 跟重定向，否则可能哈希的是 302 响应体 - 不用额外解压参数：
curl默认自动处理 gzip/Brotli，返回的就是浏览器实际收到的解压后字节 - 算法前缀必须小写且带短横：
sha384-✅，SHA384-❌，sha384:❌ - 哈希值是 Base64 编码，不是 hex；多值用空格分隔：
integrity="sha256-abc sha384-def"
常见报错现象和对应排查点
看到 Failed to find a valid digest in the 'integrity' attribute，不代表 CDN 被劫持，而是校验流程本身出错了。
- DOM 中该
<script></script>标签是否真有crossorigin="anonymous"？别信编辑器高亮或构建后模板变量没展开 - Network 面板里点开 JS 请求 → Headers → Response Headers，确认含
access-control-allow-origin: * - 构建流程中若自动注入 runtime chunk 或动态拼接
<script></script>标签，这些标签往往漏掉integrity，得单独处理 - 真正被劫持时，你看到的是
The resource <url> was blocked because integrity check failed</url>—— 这才是校验触发且不匹配的明确信号
integrity 只校验字节一致性，不解决所有问题
它防的是传输过程中内容被篡改，不是防版本漂移、不是防服务端被黑、也不是防 script 标签被动态注入。
- CDN 返回的内容变了（比如自动升级 minor 版本），哈希就不匹配，脚本加载失败——所以必须锁定具体版本号（如
@3.4.21） - 它对
<img>、<iframe></iframe>、<source></source>等标签无效，只支持<script></script>和<link rel="stylesheet"> - 配合 CSP 才完整：
script-src 'self' https://cdn.example.com+require-trusted-types-for 'script'+integrity形成纵深防御 - 真正难的不是加属性，而是确保每次上线的哈希都绑定到那个精确字节流——构建工具差异、CDN 压缩策略、BOM 插入、甚至 Node.js 版本导致的 base64 编码微小偏差，都会让哈希漂移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
