子资源完整性（SRI）是浏览器对或加载的外部资源进行的哈希校验机制，需同时设置integrity和crossorigin="anonymous"属性才生效，校验基于原始未压缩、无BOM、UTF-8编码的资源字节内容。
什么是子资源完整性（SRI）？
子资源完整性不是CSS专属机制，而是浏览器对 <link> 或 <script></script> 加载的外部资源做的哈希校验。它防止CDN被污染、中间人篡改或源站被黑导致样式错乱甚至XSS——比如你引入的 bootstrap.css 被悄悄替换成注入了恶意 background: url('https://evil.com/track') 的版本。
关键点：SRI只校验资源字节内容，不校验域名、证书或HTTP头；它必须配合 integrity 和 crossorigin 两个属性才生效。
怎么给 <link rel="stylesheet"> 加SRI？
不能直接写 integrity 就完事。CSS资源默认以 no-cors 模式加载，此时浏览器会忽略 integrity 属性——这是最常踩的坑。
- 必须显式添加
crossorigin="anonymous"（即使资源同源） -
integrity值需是资源原始内容的加密哈希，格式为-<base64></base64>，常用sha384 - 哈希必须基于未压缩、未BOM、UTF-8编码的原始CSS文件生成（不是HTTP响应体，也不是gzip后的内容）
例如正确写法：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
integrity="sha384-...（32位base64）..."
crossorigin="anonymous">
如何生成合法的 integrity 值？
用命令行工具最可靠。Node.js环境推荐 ssri，Python可用 hashlib，但要注意编码和换行符。
- 下载原始CSS文件（
curl -s https://.../style.css > style.css），确认无BOM：file -i style.css应显示charset=utf-8 - Linux/macOS下用
openssl dgst -sha384 -binary style.css | openssl base64 -A - Windows PowerShell中：
Get-FileHash style.css -Algorithm SHA384 | % Hash | Out-String | % { $_.Trim() -replace '(.{64})', '$1' } | %{ [Convert]::ToBase64String([System.Text.Encoding]::UTF8.GetBytes($_)) }（更建议用WSL） - 别用在线生成器——你无法验证它是否按规范处理了换行、BOM和编码
哪些情况会让SRI失效或报错？
浏览器控制台出现 Failed to find a valid digest in the 'integrity' attribute 或静默降级，往往不是哈希错了，而是加载上下文不匹配。
- CDN返回了304 Not Modified，但ETag/Last-Modified头触发了缓存复用，而本地缓存文件已被修改（如开发时热更新）
- 服务器对CSS启用了Brotli压缩，但SRI校验的是未压缩内容——这没问题；但如果服务端错误地把压缩后字节当原文本算哈希，就必然失败
- 构建工具（如Vite/Webpack）自动注入CSS时，若未在构建阶段计算并注入
integrity，运行时动态拼接的<link>标签大概率没配crossorigin - HTTP/2 Server Push 推送的CSS不走SRI校验，完全绕过机制
真正难搞的其实是维护：每次CSS更新，哈希必须重算、HTML必须同步更新——没有CI卡点的话，很容易漏掉一个 integrity 值，线上就白屏或样式错乱。
