sri是浏览器对或加载的外部资源进行哈希校验的安全机制，必须同时设置integrity和crossorigin="anonymous"属性才生效，防止cdn劫持或中间人篡改。
什么是 SRI，为什么必须加
SRI 是浏览器对 <script></script> 或 <link rel="stylesheet"> 加载的外部资源做哈希校验的机制。它不是“可选增强”，而是防止 CDN 被劫持、脚本被中间人篡改的关键防线。如果你引入了 jQuery、React、Bootstrap 等托管在公共 CDN 上的资源，没加 SRI 就等于把执行权白送给网络链路上的任意节点。
核心逻辑很简单：浏览器下载脚本后，会按你指定的哈希算法（如 sha384）计算内容摘要，和 integrity 属性值比对；不一致就直接拒绝执行，并在控制台报错 Failed to find a valid digest in the 'integrity' attribute。
如何生成并填写 integrity 值 不能手算，也不能抄别人现成的——哈希必须基于你实际使用的文件字节流生成。
推荐做法：
- 用
curl -s https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js | openssl dgst -sha384 -binary | openssl base64 -A生成（注意末尾-A防止换行） - 或用 Node.js 快速验证：
const crypto = require('crypto'); const fs = require('fs'); console.log(crypto.createHash('sha384').update(fs.readFileSync('./react.min.js')).digest('base64')); - CDN 通常提供预计算值（如 jsDelivr 页面右上角有 “SRI” 按钮），但务必确认 URL 完全一致——
https://cdn.jsdelivr.net/npm/react@18.2.0和@18.2.0/umd/react.production.min.js的哈希不同
写进 HTML 时格式固定：<script src="..." integrity="sha384-xxx..." crossorigin="anonymous"></script>。漏掉 crossorigin 属性会导致浏览器忽略 SRI 校验（尤其跨域资源）。
crossorigin 属性为什么不能省
SRI 和 CORS 是绑定行为。即使资源是公开可读的，浏览器仍要求显式声明 crossorigin 才允许提取响应体用于哈希计算。
常见错误：
- 只写
integrity不写crossorigin→ 控制台静默失效，SRI 形同虚设 - 写成
crossorigin="use-credentials"→ 若 CDN 未返回Access-Control-Allow-Origin: *或带凭据的响应头，请求直接失败 - 正确写法只有两个值：
crossorigin="anonymous"（推荐，默认无 Cookie）或留空（等价于 anonymous）
遇到 SRI 失败该怎么排查
最常见现象是页面白屏或功能异常，控制台出现 Failed to find a valid digest 或 The resource from “...” was blocked due to MIME type (“text/html”) mismatch。
排查顺序：
- 检查 URL 是否重定向：比如访问
https://unpkg.com/react实际 302 到带版本号的地址，哈希必然不匹配——必须用最终解析出的精确路径生成 integrity - 确认资源是否被压缩/混淆变动：某些 CDN 开启 Brotli 或动态 minify，导致同一 URL 返回不同字节流（避免用不带版本的裸包名，如
react） - 查看 Network 面板，点击该脚本请求，看 Response Headers 是否含
Content-Type: application/javascript；若返回 HTML（如 404 页面），说明 URL 错了，哈希再准也没用 - 临时去掉
integrity和crossorigin测试能否加载，确认问题确实出在校验环节而非网络或语法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
