不加integrity就是裸奔，因为浏览器完全信任cdn返回的css字节流，即使被中间人篡改、cdn入侵或域名劫持注入恶意样式（如body{display:none!important}），也会照常解析渲染；2023年真实案例曾致整站白屏数小时，且控制台无报错，仅表现为样式错乱或意外!important规则。
为什么不加integrity就是裸奔
不加integrity，浏览器就完全信任 CDN 返回的 CSS 字节流——哪怕它被中间节点篡改、CDN 被入侵、甚至域名劫持后注入了body { display: none !important; }，浏览器照常解析渲染。这不是假设：2023 年有真实案例导致整站白屏数小时。控制台通常无报错，只表现为“样式突然错乱”或“莫名多出 !important 规则”，排查时容易绕远路。
integrity 和 crossorigin 必须成对出现
单独写integrity等于没写。浏览器只在跨域请求且明确声明crossorigin时才触发哈希校验。漏掉crossorigin="anonymous"，integrity会被静默忽略，连控制台警告都不会有。
-
crossorigin="anonymous"：最常用，不带 cookie，要求 CDN 响应头含Access-Control-Allow-Origin: * -
crossorigin="use-credentials"：极少用，需服务端返回Access-Control-Allow-Origin: https://yourdomain.com（不能是*），且此时integrity会被浏览器禁止——W3C 明确不允带凭据的请求启用 SRI - 填错成
use-credentials+integrity→ 浏览器直接拒绝加载，控制台可能报 401 或静默失败
如何生成真正有效的 integrity 值
哈希必须基于你最终上线的、压缩后的 CSS 文件原始字节生成，差一个空格、BOM 或换行符都不行。不能抄别人项目的值，也不能用在线工具随便粘贴。
- 优先用
sha384：比sha256抗碰撞更强，主流 CDN（如 jsDelivr、unpkg）默认支持 - 命令行生成（Linux/macOS）：
curl -s "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" | openssl dgst -sha384 -binary | openssl base64 -A - 输出形如：
sha384-o9K=，拼到integrity属性里就是integrity="sha384-o9K=" - CDN 更新 CSS 后，哈希必然变化；不更新
integrity会导致资源静默阻断，页面样式失效，且无明显错误提示
CDN 不支持 CORS 时怎么办
某些老旧镜像站或私有 CDN 不返回Access-Control-Allow-Origin响应头。此时即使写了crossorigin，预检也会失败，CSS 加载中断，页面白屏或样式缺失。
- 先用
curl -I检查 CDN 响应头是否包含Access-Control-Allow-Origin - 若不支持，要么换 CDN（推荐 jsDelivr、cdnjs），要么放弃 SRI 改用本地托管
- 本地方案更可控：用
npm install bootstrap，再通过构建工具（Vite/Webpack）导入，最终打包进主包，规避所有跨域和完整性问题
integrity不是可选项，而是交付链路上的一道必要校验闸门——它不防网络延迟，但能拦住字节层面的篡改。最容易被忽略的是：哈希值必须随 CSS 内容实时更新，且crossorigin属性一旦写错，整个机制就形同虚设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
