sri校验需同时满足integrity和crossorigin="anonymous"，否则静默失效；哈希必须基于cdn真实响应体生成，且csp须放行cdn并启用require-sri-for style。
为什么只加 integrity 样式就丢了
浏览器对 <link rel="stylesheet"> 的 SRI 校验是“全有或全无”：缺 crossorigin 属性，哪怕 integrity 值完全正确，也会静默跳过校验——不报错、不警告（默认过滤）、不加载 CSS。页面直接白屏或布局错乱，控制台一片空白。
根本原因是：SRI 只在 CORS 请求流程中触发，而 <link> 默认是非 CORS 请求（CORS-ineligible）。必须显式声明 crossorigin 才能激活校验逻辑。
-
crossorigin="anonymous"是公开 CDN（如 jsDelivr、unpkg、cdnjs）的唯一推荐写法；crossorigin=""在 Firefox 中解析不稳定，不建议 -
crossorigin="use-credentials"会彻底禁用 SRI（W3C 规范强制），哪怕哈希对了也无效 - 即使 CSS 托管在你自己的 CDN 上，也必须写
crossorigin="anonymous"，不能省略
怎么生成真正有效的 integrity 值
本地文件、网页在线工具、甚至 GitHub raw 链接算出的哈希，99% 无效。CDN 实际返回的内容可能被压缩（gzip/br）、重定向、加 BOM、按 UA 返回不同版本——只有线上真实响应体才可信。
用这条命令抓取并计算（确保返回的是浏览器实际收到的字节）：
curl -sL https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css | openssl dgst -sha384 -binary | openssl base64 -A
结果拼成 sha384-<base64></base64>，例如 sha384-abc123...。注意：
-
-sL：静默 + 跟随重定向，避免哈希到 302 响应体 - curl 默认自动解压 gzip/br，输出即为浏览器解压后的原始字节，无需手动处理
- 必须用
sha384：SHA-256 在旧版 Safari 有兼容问题，且 W3C 推荐 SHA-384 为最低安全标准；sha512浏览器直接忽略 - 别手改算法前缀：把
sha256-改成sha384-没用，哈希值完全不同
CDN 不返回 CORS 头怎么办
写了 crossorigin="anonymous" 却加载失败？检查 Network 面板里该 CSS 请求的响应头：
- 必须含
Access-Control-Allow-Origin: *（或明确域名），否则预检失败，请求被拦在网关外，SRI 根本没机会运行 - 如果 CDN 返回
Content-Encoding: gzip或br，没问题——上面的curl -sL命令已自动处理解压，哈希匹配的就是解压后内容 - 如果返回
Content-Type: text/plain，说明 URL 错了（比如 404 返回 HTML 页面），不是 CDN 本身问题，先确认地址是否真能返回text/css
老旧镜像站或自建 CDN 若不支持 CORS 响应头，SRI 无法启用，只能换源或改用同源内联 CSS。
生产环境必须配回退 + CSP 配合
SRI 失效时浏览器静默丢弃 CSS，用户看到的是裸 HTML。所以 <link> 必须带 onerror 回退到本地副本：
<link id="bootstrap-cdn" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-..." crossorigin="anonymous"><script>document.getElementById('bootstrap-cdn').onerror = () => { const l = document.createElement('link'); l.rel='stylesheet'; l.href='/css/bootstrap.min.css'; document.head.appendChild(l); };</script>
同时，CSP 策略必须放行 CDN 域名，否则连请求都发不出去：
- 错误：
style-src 'self'→ SRI 根本不会触发 - 正确：
style-src 'self' https://cdn.jsdelivr.net https://unpkg.com - 更严格可加：
require-sri-for style，强制所有外链样式必须带有效integrity，否则拒绝加载
最易被忽略的一点：构建产物若含 hash 后缀（如 main.a1b2c3.css）或 query 参数（如 ?v=1.2.3），URL 变了但哈希没重算，SRI 就形同虚设——自动化注入（如 webpack-subresource-integrity）比手动维护可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
