sri对有效，但必须同时满足integrity值正确且crossorigin属性存在（推荐crossorigin="anonymous"），否则浏览器静默忽略；哈希须基于cdn真实响应体计算，仅sha384等算法有效，失败时仅记录warning日志。
直接说结论：SRI 对 <link rel="stylesheet"> 有效，但必须同时满足 integrity 值正确 + crossorigin 属性存在，否则浏览器静默忽略——连报错都没有，样式就丢了。
为什么加integrity不生效？
最常见原因是漏写 crossorigin。浏览器只在校验跨域请求时才启用 SRI，而 <link rel="stylesheet"> 默认是 CORS-ineligible 请求（即不带 CORS 头），此时即使写了 integrity，也会被完全无视。
-
crossorigin=""和crossorigin="anonymous"效果一致，推荐统一用后者（Firefox 解析更稳定） -
crossorigin="use-credentials"会禁用 SRI 校验——浏览器直接跳过哈希比对，哪怕integrity写对了也无效 - 如果 CDN 返回的响应头含
Content-Encoding: gzip或br，你却用未压缩的本地文件算 hash，必然失败
如何生成可靠的integrity值？
别用本地文件直接算 hash，CDN 实际返回的内容可能带 BOM、换行差异、gzip 压缩或重定向。最稳妥方式是抓取线上真实响应体再哈希：
- 用
curl -sL https://cdn.example.com/style.css | openssl dgst -sha384 -binary | openssl base64 -A - 确保命令输出无多余空格或换行；结果拼成
sha384-<base64></base64>格式 - SHA-384 比 SHA-256 更抗碰撞，是当前推荐算法；避免用 SHA-1 或 MD5
SRI 失败时为什么看不到错误？
浏览器不会中断渲染或抛异常，只会静默丢弃该 CSS 文件，并在 Console 中记一条 warning 级日志：Failed to find a valid digest in the 'integrity' attribute。它默认被过滤掉，容易被忽略。
- 打开 DevTools → Console → 右上角「Filter」→ 勾选「Warnings」才能看到
- 样式丢失后页面布局错乱，但控制台一片空白，是典型 SRI 失效表现
- 检查 Network 面板里对应 CSS 请求的 Response Headers：确认有
access-control-allow-origin: *（或具体域名），且无content-security-policy: require-trusted-types-for 'script'类限制
CI/CD 中怎么避免手动维护integrity？
人工更新哈希值不可靠，尤其当构建产物含 hash 后缀或 query 参数（如 ?v=1.2.3）时，URL 变了但哈希没重算，SRI 就形同虚设。
- Webpack 用户可用
webpack-subresource-integrity插件，自动注入integrity并强制添加crossorigin="anonymous" - 若用 esbuild 或 Vite，需自行 hook 构建后步骤：下载产出 CSS、计算 SHA-384、替换 HTML 中的
integrity值 - 关键点：哈希必须基于最终上线的字节流，不是源码、不是压缩前、不是带 sourcemap 的版本
真正难的不是加那两行属性，而是保证每次部署时，HTML 里的 integrity 值和 CDN 实际吐出的字节完全一致——差一个 BOM、多一个空格、压缩器版本升级，都足以让样式消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
