integrity属性仅对和生效，需配合正确的crossorigin值及服务端cors响应头，且哈希必须基于最终构建产物精确计算，动态fetch校验还受限于mode和content-type。
integrity 属性只对 <script></script> 和 <link rel="stylesheet"> 有效
写了 integrity 却没生效？先确认标签类型。浏览器压根不解析 <img>、<iframe></iframe>、<video></video> 或内联 <script>...</script> 的 integrity 属性——写了也白写，控制台不会报错，但校验完全不触发。
常见误用场景：
- 给 CDN 图片加
integrity="sha384-..."→ 浏览器忽略，既不校验也不报错 - 用
<script>fetch('/api.js')</script>动态加载 →integrity对运行时 fetch 无效 - 把哈希值贴到
<link rel="icon">上 → MIME 类型不匹配，校验跳过
crossorigin 属性必须显式且正确配置
integrity 不是独立开关，它和 crossorigin 是绑定对。漏掉、写错或大小写不对，校验链直接断开。
关键规则：
-
crossorigin值只能是"anonymous"或"use-credentials"（注意引号和小写） - 空值
crossorigin=""、错误值如crossorigin="true"或crossorigin="ANONYMOUS"都会导致校验失败 - 服务端必须返回
Access-Control-Allow-Origin响应头，否则即使属性写对，浏览器也会因 CORS 拒绝读取响应体来算哈希
哈希值必须对应最终上线文件的精确字节
本地开发时用未压缩版生成的哈希，上线却部署了 Terser 压缩后的文件？那校验必然失败，报错 The resource was blocked because integrity check failed。
容易踩的坑：
- 构建流程中混淆了源码与产物：SRI 哈希必须基于最终输出的 JS/CSS 文件计算，不是原始
.ts或.scss - 哈希算法前缀和实际算法不一致：写了
sha256-却用sha384算，Base64 编码末尾少一个=也会导致比对失败 - HTTP 重定向干扰：CDN 返回 302 跳转后，浏览器对跳转目标文件做哈希比对，而非原始 URL 对应的内容
fetch() 的 integrity 选项有硬性限制
想用 fetch('/js/chunk.js', { integrity: 'sha384-...' }) 做运行时校验？它只在两个条件同时满足时才起作用：
-
mode必须设为"cors"（"no-cors"下静默忽略） - 响应的
Content-Type必须是可信类型，例如text/javascript、application/javascript或text/css；返回application/json就不校验
而且它只校验当前 fetch 的响应体，不会递归检查该 JS 文件里 import() 的其他模块——这部分仍需靠构建时 SRI 或手动注入 Blob 校验。
真正卡住的不是“会不会加 integrity”，而是哈希是否来自构建产物、crossorigin 是否和服务端策略对齐、以及是否误以为它能覆盖动态加载全链路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
