integrity属性不生效主因是未配crossorigin="anonymous"，浏览器仅在cors模式下校验；哈希须基于真实cdn响应体生成，且前缀大小写敏感（如sha384-），否则静默失效。
integrity 属性不生效，八成是没配 crossorigin="anonymous"
浏览器只在 CORS 模式下才读取响应体做哈希比对；没加 crossorigin，integrity 就是纯文本，控制台零提示、网络面板照常 200，但校验压根没跑。
常见翻车点：
-
crossorigin="true"或crossorigin（无值）——都不合法，必须写成crossorigin="anonymous" - 模块脚本（
type="module"）默认走 CORS，所以可以省略crossorigin；但普通脚本（type="text/javascript"或无 type）必须显式写 - CDN 响应头不含
Access-Control-Allow-Origin: *（比如某些私有镜像或老旧内网服务），加了crossorigin反而导致请求被拒，资源彻底加载失败
哈希值必须从真实 CDN 响应体生成，不是本地文件
本地 npm install 下来的 vue.global.js 和 https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js 只要差一个 BOM、换行符、gzip/Brotli 解压后字节差异，哈希就完全不匹配。
可靠生成方式（命令行直接请求 CDN）：
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:都无效
报错 Failed to find a valid digest in the 'integrity' attribute 怎么排查
这不是网络问题，是 SRI 在起作用但配置错了。典型现象：页面白屏、功能缺失，Network 面板显示 JS 状态 200，控制台只有这一条报错，没其他错误。
按顺序检查：
- 打开 DevTools → Elements，确认 DOM 中该
<script></script>标签是否真有crossorigin="anonymous"——别信构建模板变量没展开、别信编辑器高亮 - 用
curl -I https://cdn.example.com/xxx.js看响应头是否含access-control-allow-origin - 构建流程中若动态拼接 script 标签（如 runtime chunk 注入），这些标签往往漏掉
integrity，得单独补上 - 本地用
file://打开 HTML 时，integrity全部被禁用，必须走http://localhost或 HTTPS 环境测试
真正难的不是加属性，而是绑定到精确字节流
每次上线都要确保哈希对应 CDN 实际返回的、解压后的、带 BOM/不带 BOM 的那一版字节——这背后牵扯太多变量：构建工具 minify 差异、CDN 压缩策略切换、Node.js 版本导致的 base64 编码微小偏差、甚至不同地区 CDN 节点返回内容协商结果不一致。
自动化是唯一出路，但要注意：
- 哈希生成步骤必须嵌入 CI 流程，且必须基于最终部署 URL 发起真实请求
- 不能依赖“本地构建产物 + 在线 hash 工具”，这类组合在 90% 的生产环境中会失效
- 如果用了 webpack/vite 插件自动生成 integrity，务必验证它是否真的 fetch 了线上 CDN 响应体，而不是读取本地 dist 文件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
