integrity 属性是强制校验外部资源完整性的唯一标准机制，必须与 crossorigin 成对使用，否则无效；其哈希值须基于原始字节生成，且要求交付链路全程字节确定。
为什么 integrity 属性不是可选的“锦上添花”
当你通过 <link rel="stylesheet"> 或 <script> 引入外部 CSS/JS 时，浏览器默认信任 CDN 或第三方源——但网络劫持、CDN 被污染、中间人篡改都真实存在。integrity 是唯一能强制校验资源完整性的标准机制，没配它，等于把样式/脚本的执行权白送给传输链路。
常见错误现象：
— 页面突然样式错乱，控制台无报错，但实际加载了被注入恶意规则的 CSS
— 某次部署后功能异常，排查发现 CDN 返回了旧版或被缓存污染的 CSS 文件
— 审计工具（如 Lighthouse）直接标红 “Missing Subresource Integrity”
- 只对
crossorigin属性启用的请求生效（即必须同时设crossorigin="anonymous"或crossorigin="use-credentials"） - 值必须是前缀为
sha256-/sha384-/sha512-的 Base64 编码哈希，不能手写、不能截断 - HTTP/2 下不影响性能；HTTP/1.1 中多一次预检（但代价远小于被篡改风险）
如何生成合法的 integrity 值（以 CSS 为例）
哈希必须基于资源原始字节计算，且不含 BOM、换行符差异、编码隐式转换等干扰。本地文件用命令行最可靠：
shasum -a 256 style.css | awk '{ print $1 }' | xxd -r -p | base64
或更通用（推荐）：
立即学习“前端免费学习笔记（深入）”；
openssl dgst -sha256 -binary style.css | base64
使用场景：
— 构建流程中自动生成（Webpack/Vite 插件如 vite-plugin-sri 可自动注入）
— CI 流水线里校验产出 CSS 哈希是否与预期一致
- 别用在线生成工具——上传敏感 CSS 到第三方网站等于放弃安全底线
- 别复制别人页面里扒下来的
integrity值——哪怕 URL 相同，版本、压缩方式、BOM 都会导致哈希不同 - 如果 CSS 含动态内容（如内联变量、环境占位符），必须确保构建时已稳定替换，否则每次哈希都变
integrity 和 crossorigin 必须成对出现
单独写 integrity 不会触发校验，浏览器直接忽略。这是最常被漏掉的硬性依赖。
正确写法：
<link rel="stylesheet" href="https://cdn.example.com/style.css" crossorigin="anonymous" integrity="sha256-...">
错误写法：
<link rel="stylesheet" href="https://cdn.example.com/style.css" integrity="sha256-...">
-
crossorigin="anonymous"是绝大多数场景首选：不带 Cookie，兼容性好（IE11+、所有现代浏览器） -
crossorigin="use-credentials"仅当 CSS 请求需携带认证信息（如私有 CDN 的 auth cookie）时才用，此时integrity校验仍有效 - 本地开发用
file://协议时，integrity无效（浏览器策略限制），不要为此禁用它
CDN 不支持 SRI？那得重新评估这个 CDN
真正的问题不是“怎么配”，而是“配了之后资源加载失败”。典型表现：
— 控制台报错：Failed to find a valid digest in the 'integrity' attribute
— 网络面板显示 CSS 请求状态为 cancelled，且无响应体
原因往往不是配置错，而是 CDN 返回的内容和你计算哈希时的原始文件不一致：
- CDN 自动 Gzip/Brotli 压缩？哈希必须基于压缩后字节（但标准做法是哈希原始文件，由浏览器解压后校验——前提是 CDN 不修改原始字节）
- CDN 开启了自动 CSS 优化（如属性重排、注释删除、单位简化）？这属于实质性篡改，直接废掉 SRI
- CDN 缓存了旧版本，而你更新了文件却没清缓存？哈希对不上，加载中断
解决路径很直白：找 CDN 文档确认是否承诺“字节级保真”，不承诺就换；或者把 CSS 放到自己可控的静态托管（如 GitHub Pages + Pages API 自动发布 + SRI 生成脚本）。
真正麻烦的点在于：SRI 不是“打开就安全”，它要求整个交付链路——构建、上传、CDN、HTTP 头——全部保持字节确定性。少一环，就只是个摆设。
