integrity属性必须与crossorigin属性同时存在才生效，缺一则浏览器静默跳过sri校验；仅script和link[rel="stylesheet"]支持，哈希须基于真实cdn响应体用sha384-base64生成。
integrity 属性必须和 crossorigin 同时出现，否则浏览器会忽略校验 —— 这是绝大多数人踩坑的起点。
为什么 integrity 单独写没用
浏览器对子资源完整性（SRI）的校验有严格触发条件：integrity 值只有在资源请求携带 CORS 请求头时才被读取。而 crossorigin 属性正是告诉浏览器“这个请求要走 CORS 流程”。不加它，integrity 就像注释一样被跳过。
-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-..."></script>→ 校验失效 -
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-..." crossorigin="anonymous"></script>→ 正常校验 - 即使资源本身同源（比如自己 CDN），也必须显式加
crossorigin="anonymous"，不能省略
crossorigin 的两个值怎么选
只用 anonymous，别用 use-credentials —— 除非你明确需要发送 Cookie 或认证头。后者会触发预检请求（OPTIONS），增加延迟，且多数公共 CDN 不支持带凭据的跨域响应。
-
crossorigin="anonymous"：发送请求时不带 Cookie、Authorization 等敏感头，响应头只需含Access-Control-Allow-Origin: * -
crossorigin="use-credentials"：需服务端响应头同时包含Access-Control-Allow-Origin（不能为*）和Access-Control-Allow-Credentials: true，否则失败 - BootstrapCDN、jsDelivr、unpkg 等主流 CDN 默认只支持
anonymous模式
哈希算法选 sha384 而不是 sha256
SHA-256 在部分旧版 Safari（iOS 13.3 之前）存在兼容性问题，且 W3C 推荐将 SHA-384 作为 SRI 的最低安全标准。Chrome/Firefox/Edge 全系支持，无需降级。
- 生成命令中指定
--algorithm sha384（如sri-tool --algorithm sha384 bootstrap.min.js） - 不要手动把
sha256-改成sha384-：哈希值完全不同，改了就校验失败 - 避免混用算法：一个页面里所有
integrity应统一用sha384，降低维护复杂度
HTML 中 integrity 的位置和顺序影响加载行为
integrity 必须出现在 src 或 href 之后、crossorigin 之前（顺序无关紧要，但 DOM 解析器按属性出现顺序读取，建议保持一致）；更重要的是，它只对静态声明的资源生效 —— 动态创建的 <script></script> 或 <link> 不会触发校验。
- 动态插入无效：
const s = document.createElement('script'); s.src = '...'; s.integrity = '...'; s.crossorigin = 'anonymous'; document.head.appendChild(s);→ 不校验 - 预加载（
<link rel="preload">）不支持integrity，别往里面加 - 如果用了构建工具（如 Webpack/Vite），确保插件（如
html-webpack-plugin）正确注入integrity，而不是靠手写
最容易被忽略的是：SRI 只校验资源字节内容，不校验 HTTP 状态码。哪怕服务器返回 200 但内容被篡改（比如中间人注入），校验也会失败；但若返回 404 或 500，浏览器仍会尝试解析空响应或错误页，导致脚本执行报错 —— 这时候你得靠监控 error 事件捕获，而不是依赖 SRI。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
