不加integrity会导致浏览器无法校验cdn css完整性，可能加载被篡改的恶意样式；必须配合crossorigin="anonymous"使用，否则校验失效；哈希须基于最终压缩产物生成，动态css需改用同源内联或服务端签名。
link标签不加integrity会怎样
不加 integrity 属性，浏览器就完全信任从CDN加载的CSS——哪怕它被中间人篡改、CDN被入侵、甚至域名劫持后返回恶意样式，浏览器照常解析执行。这不是理论风险：2023年有公开案例显示某公共UI库CDN节点被注入覆盖 body 的 display: none 规则，导致整站白屏数小时。
常见错误现象：CSS loaded but layout broken unexpectedly、devtools shows unexpected !important rules，但源码里根本没写——大概率是外部样式表被污染了。
- 必须配合
crossorigin使用，否则integrity会被浏览器忽略（连控制台警告都不会有） -
integrity值必须是完整子资源完整性哈希，格式如sha384-...，不能截断或手写 - CDN更新CSS后，哈希值必然变化，不更新
integrity会导致样式加载失败（静默阻断，无报错提示）
crossorigin属性填anonymous还是use-credentials
绝大多数CDN场景用 crossorigin="anonymous" 就够了。它告诉浏览器：发起跨域请求时不带cookie、HTTP认证头；同时允许检查 integrity 和读取CSS内容用于渲染。
填 use-credentials 只在极少数情况需要：比如你的CSS托管在自家带登录态校验的内网服务上，且该服务明确返回了 Access-Control-Allow-Credentials: true 头——但这时反而没法用 integrity，因为W3C规范禁止带凭据的跨域请求启用SRI校验。
- 填错成
use-credentials+integrity→ 浏览器直接拒绝加载，控制台报Failed to load resource: the server responded with a status of 401或更隐蔽的空加载 - 漏写
crossorigin→integrity形同虚设，浏览器跳过校验 - CDN不支持CORS响应头（比如某些老旧镜像站）→ 即使写了
crossorigin，也会因预检失败而加载中断
如何生成正确的integrity哈希值
不能靠在线工具随手一粘，也不能从别人项目里抄——哈希必须基于你实际部署的最终CSS文件内容生成，差一个空格都不行。最稳妥的方式是构建时自动生成并注入HTML。
本地快速验证可用这个命令（假设CSS已下载到本地）：
shasum -a 384 style.css | awk '{ print "sha384-" $1 }' 注意：Windows用户请用Git Bash或WSL运行，PowerShell的 Get-FileHash 默认输出格式不兼容HTML要求。
- 如果CSS经过构建工具压缩/重排序（如PostCSS、cssnano），必须对压缩后的产物算哈希，不是源码
- HTTP服务器启用了Brotli或gzip压缩？没关系——
integrity校验的是解压后的字节流，和传输编码无关 - 动态生成的CSS（如通过PHP输出）无法用静态哈希保护，这类场景应改用同源内联或服务端签名验证
inline CSS比external link更安全吗
不一定。内联样式没有网络传输环节，自然规避了CDN劫持，但引入了另一类风险：如果HTML本身被XSS攻击注入，攻击者就能直接插入恶意 <style></style> 块，而且无需跨域，浏览器照单全收。
真正关键的分水岭是「信任边界」：你是否完全控制HTML的生成和输出？如果HTML来自CMS、用户提交或第三方模板引擎，内联反而更危险；如果HTML是纯静态构建产物且部署链路可信，那内联+nonce机制（配合 Content-Security-Policy: style-src 'self' 'nonce-xxx'）确实比外链更可控。
容易被忽略的一点：很多团队以为把CSS内联就“防住SRI问题”了，结果忘了CSP策略没同步收紧，导致攻击者仍可通过 javascript:alert() 式的伪协议触发样式注入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
