必须同时写integrity和crossorigin="anonymous"，否则SRI失效；浏览器对link stylesheet默认no-cors，不触发校验；crossorigin="use-credentials"会禁用SRI；integrity值须基于线上实际响应体计算，不可依赖本地文件或第三方生成器。
必须同时写 integrity 和 crossorigin="anonymous"，否则浏览器直接忽略校验——这不是可选优化，是生效前提。
为什么只加 integrity 没用
浏览器对 <link rel="stylesheet"> 默认走 no-cors 请求模式，此时即使写了 integrity，也会被静默跳过。SRI 规范强制要求资源必须通过 CORS 流程加载，才能拿到完整响应体做哈希比对。漏掉 crossorigin，等于没配。
- 控制台不会报错，也不会提示“missing crossorigin”，页面照常加载——但篡改就完全无法拦截
- 哪怕 CSS 同源（比如自己 CDN），也必须显式写
crossorigin="anonymous" -
crossorigin="use-credentials"会禁用 SRI（浏览器直接忽略integrity），除非后端明确返回Access-Control-Allow-Credentials: true且 Origin 不为*
怎么生成正确的 integrity 值
哈希必须基于目标 URL 实际返回的 HTTP 响应体（解压后、无 BOM、UTF-8 编码的原始字节），不是本地文件，也不是 HTML 里写的路径内容。CDN 可能按 UA、Accept-Encoding 或重定向返回不同内容，本地文件和在线工具根本不可靠。
- 最稳妥方式：用
curl直接请求线上地址，管道进openssl计算curl -s https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css | openssl dgst -sha384 -binary | openssl base64 -A - 别用在线生成器——上传 CSS 到第三方网站等于主动放弃安全底线
- 别复制别人页面里扒下来的
integrity值——哪怕 URL 相同，版本、压缩方式、BOM 都会导致哈希不一致 - 构建流程中推荐用插件自动注入，比如 Vite 的
vite-plugin-sri，Webpack 的webpack-subresource-integrity
常见错误现象与排查点
页面样式突然错乱、CI 审计标红 “Missing Subresource Integrity”、Lighthouse 报告失败，往往不是 CDN 问题，而是配置链断在某个环节。
立即学习“前端免费学习笔记（深入）”；
- 控制台出现
Failed to find a valid digest in the 'integrity' attribute或The resource <url> was blocked because integrity check failed：说明哈希不匹配，立刻检查响应体是否真和你计算的一致 - 样式正常但 SRI 没生效：用 DevTools → Network 查看该 CSS 请求的 Response Headers，确认有
access-control-allow-origin: *；再看该<link>标签是否真的带crossorigin="anonymous" - 用了 gzip/Brotli？不影响——浏览器校验的是解压后的字节，不用额外处理
- 构建时用了不同 minify 工具或开启了不同选项（如移除注释、调整空格）？会导致哈希变化，必须确保生成哈希的输入和最终上线文件完全一致
最容易被忽略的其实是「哈希来源」——它必须是你上线那一刻 CDN 真实返回的内容，而不是开发机上保存的副本。哪怕只多一个换行、少一个分号，校验就彻底失效。安全机制不是写上就完事，是每一环都得对得上。
