integrity属性必须配合crossorigin="anonymous"才生效，否则完全无效；哈希值须从CDN实际响应体生成，推荐用curl加openssl计算sha384-base64；常见错误包括大小写错误、编码错误、响应头缺失等。
link标签加integrity必须配crossorigin="anonymous"
不写crossorigin，integrity就完全无效——浏览器既不报错也不校验，CDN被劫持了也照常加载。这是最常翻车的点。公开 CDN（如 jsDelivr、unpkg）都返回Access-Control-Allow-Origin: *，所以crossorigin="anonymous"是唯一推荐值。别写crossorigin="true"或漏掉引号，这些都会让属性解析失败。
哈希值必须从 CDN 实际响应体生成，不是本地文件
你本地 npm install bootstrap 得到的 bootstrap.min.css，和 CDN 返回的内容很可能不同：BOM、gzip 解压后换行、末尾空格、甚至 CDN 自动注入的版本注释，都会导致哈希不匹配。可靠做法只有一条：
curl -sL https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css | openssl dgst -sha384 -binary | openssl base64 -A- 确保用
-sL跟重定向，-s屏蔽进度条避免污染输出 - 算法优先选
sha384：抗碰撞更强，所有主流 CDN 都支持
常见错误现象和对应排查点
看到控制台报 Failed to find a valid digest in the 'integrity' attribute，不是 CDN 被劫持，而是配置错了。典型原因包括：
-
integrity值前缀写成SHA384-（必须小写sha384-） - 哈希部分用了 hex 编码（如
abc123），实际要 base64 编码（如AbCdEf==） - CDN 响应头没返回
Access-Control-Allow-Origin，可用curl -I检查 - 写了多个哈希但第一个格式非法，整个
integrity属性会被跳过（比如sha256-xxx sha384-yyy中xxx缺少 base64 padding）
校验失败时没有 fallback 机制
link 标签的 integrity 失败不会触发 onerror，也不会进 window.onerror，页面就静默少了一层样式。如果你依赖这个 CSS 是关键布局（比如重置样式或主题色），后果可能是白屏或错位。上线前务必手动删掉 integrity 值测试一次——确认它真能拦住篡改，而不是一直“看起来正常”。
立即学习“前端免费学习笔记（深入）”；
