SRI Hash 是什么？CDN 脚本完整性校验和 crossorigin 配置指南

很多网站会从 CDN 加载 JavaScript 或 CSS。这样方便，但也带来一个问题：如果第三方资源被篡改，页面可能加载恶意代码。SRI，也就是 Subresource Integrity，可以让浏览器校验资源内容是否符合预期。

你可以用 SRI Hash 生成器 为脚本或样式生成 integrity 值。

SRI 长什么样

典型写法：

<script
  src="https://cdn.example.com/app.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

浏览器下载资源后，会计算 hash。如果和 integrity 里的值不一致，就拒绝执行。

什么时候适合用 SRI

适合：

• 从公共 CDN 加载固定版本库。
• 引入第三方脚本或样式。
• 静态资源版本稳定，不频繁变化。

不太适合：

• 资源内容经常动态变化。
• CDN 会自动改写文件。
• 你无法稳定拿到最终资源内容。

SRI 要求资源内容完全一致。只要文件变化，hash 就要更新。

sha256、sha384、sha512 怎么选

常见算法有 SHA-256、SHA-384、SHA-512。实际使用中 SHA-384 很常见，安全性和长度比较平衡。

用工具生成时，选择一种算法即可；不要手动改 hash 字符串。需要多个算法时，也可以写多个 integrity 值，但维护成本更高。

crossorigin 为什么常一起出现

跨域加载资源时，SRI 通常需要配合：

crossorigin="anonymous"

这让浏览器按 CORS 模式请求资源。如果 CDN 没有正确响应跨域头，资源可能加载失败。

上线前一定要在浏览器里实际打开页面，看控制台有没有 SRI 或 CORS 报错。

更新资源时别忘了更新 hash

最常见事故是升级 CDN 文件后，忘记更新 integrity。结果浏览器认为文件被篡改，直接拒绝加载。

建议：

1. 固定 CDN 版本号。
2. 每次更新资源后重新生成 SRI。
3. 上线前检查控制台。
4. 关键脚本保留回滚方案。

总结

SRI 可以降低第三方静态资源被篡改的风险，但它要求资源内容稳定。适合固定版本 CDN 脚本和样式，不适合频繁变化的动态资源。

需要生成 integrity 值时，可以用 SRI Hash 生成器，再把结果加到 script 或 link 标签中并实际验证。