SRI 安全实验室

下面是两个「银行登录页」，它们引用同一个第三方 CDN 脚本。
唯一区别：左边加了 SRI 保护，右边没加。

Step 1

先试试在两边的登录页里打字

两边都是正常的，随便输入用户名和密码体验一下。这是 CDN 没有被攻击时的正常状态。

有 SRI 保护 integrity="sha384-..."
无 SRI 保护 无 integrity 属性
Step 2

现在，模拟黑客篡改了 CDN 上的脚本文件

点击下面的按钮。两个页面会重新加载 — 但这次 CDN 上的 JS 文件已经被「替换」成恶意代码。

下载到本地自己验证

两个文件内容完全一样（同一个银行登录页、同一个被篡改的 CDN 脚本），唯一区别是那一行 integrity 属性。下载后用浏览器分别打开，对比效果。你也可以用 diff 工具查看它们的代码差异——只有一行不同。

safe.html

带 integrity 属性 → 篡改脚本被浏览器拒绝

unsafe.html

不带 integrity → 恶意代码正常执行

SRI 生成器：输入 URL，生成带 integrity 的标签

输入一个 CDN 上的 JS 或 CSS 文件地址，后端会抓取文件内容、计算 SHA-384 哈希，生成可直接复制使用的标签。

SRI 工作原理

01

引用时写入文件哈希

开发者在 script 标签的 integrity 属性中写入 JS 文件的 SHA-384 哈希值。

02

浏览器下载后校验

浏览器下载文件后计算实际哈希，与 integrity 对比。不匹配则拒绝执行。

03

零成本防御

加一个属性就完事。不影响性能、不影响缓存、全浏览器支持。

04

95% 的网站没用

HTTP Archive 数据显示绝大多数网站的第三方脚本没有 SRI 保护，CDN 一旦被黑就全面沦陷。

代码差异：就一个属性

有保护
<script
  src="https://cdn.example.com/analytics.js"
  integrity="sha384-oqVuAf..."
  crossorigin="anonymous"
></script>
无保护
<script
  src="https://cdn.example.com/analytics.js"
></script>