sri校验必须同时设置integrity和crossorigin="anonymous"，缺一则浏览器静默跳过校验；哈希须基于线上真实响应体用sha384-base64生成，仅script和link[rel="stylesheet"]支持。
必须同时写对 integrity 和 crossorigin="anonymous"，否则 SRI 完全不生效——浏览器连校验步骤都不会执行，样式静默丢失，控制台只有一条被过滤掉的 warning。
为什么只加 integrity 样式就没了？
浏览器默认把 <link rel="stylesheet"> 当作非 CORS 请求处理，而 SRI 只在 CORS 流程中触发。漏写 crossorigin，或写成 crossorigin=""（Firefox 解析不稳定）、crossorigin="true"（非法值），都会导致 integrity 被彻底忽略。
-
crossorigin="anonymous"是公开 CDN 的唯一推荐写法，它让浏览器带上 Origin 头，CDN 才会返回校验所需的响应头 -
crossorigin="use-credentials"会禁用 SRI，哪怕哈希完全正确也无效 - 哪怕资源是同源的（比如你自建的 CDN），也必须显式声明
crossorigin="anonymous"
如何生成真正可用的 integrity 值？
本地文件、网页生成器、npm 包里抄的哈希，基本都不可靠。CDN 实际返回的内容可能被 gzip/brotli 压缩、重定向、加 BOM、按 UA 返回不同版本——这些都会让哈希失配。
- 唯一可信方式：用
curl -sL抓取线上真实响应体再计算 SHA-384 - 命令示例：
curl -sL https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css | openssl dgst -sha384 -binary | openssl base64 -A - 结果拼成
sha384-xxx格式，注意-A防止 base64 换行，SHA-384 是当前抗碰撞最强且全浏览器支持的算法 - 别手动解压或加
--compressed：curl -sL默认已自动解压，返回的就是浏览器实际校验的字节
CDN 链接本身出错会导致 SRI 失效吗？
会，而且更隐蔽。SRI 校验失败时浏览器不会报红错，但 text/plain MIME 错误往往就是前兆——这说明你写的 href 实际返回的是 HTML 错误页（比如 404），而不是 CSS。
- 直接在浏览器地址栏打开你的
href值，确认响应头含Content-Type: text/css，且响应体是纯 CSS 内容 - Bootstrap 5 正确路径必须含
dist/，例如dist/css/bootstrap.min.css；少这一层就是 404 - Tailwind CSS 官方不提供预编译 CSS 文件，
https://cdn.tailwindcss.com是 JS 初始化脚本，不能当href值用 - 所有 CDN
<link>必须满足四点：rel="stylesheet"、完整 HTTPShref、放在内、不自闭合（写成<link>）
最易被忽略的点是：SRI 失效时页面只是“看起来正常”，但某一层关键样式可能已被丢弃；Network 面板里对应请求的 Response Headers 中，access-control-allow-origin 是否存在、content-encoding 是否影响哈希一致性、integrity 值是否与真实响应体匹配——这三个地方不挨个核对，问题很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
