Web 安全之 SRI（Subresource Integrity 子资源完整性）详解

什么是 SRI？

SRI，全称是 Subresource Integrity，即子资源完整性，是一种用于防范恶意攻击和提高网站安全性的策略，可以用来防止网站引用的资源（例如 JavaScript、CSS、图片等）被篡改。这个策略是通过在引用资源时提供一个对应的哈希值来实现的，浏览器在加载资源时会计算其哈希值，如果计算出的哈希值与对应的哈希值不相等，浏览器就不会加载这个资源。

举个简单的例子来说明一下，想象一下，你正在浏览一个网页，如果这个网页上有一张图片、一个 js 脚本文件或一个 css 样式被恶意篡改了，就可能会导致个人信息被窃取，账号被盗，或者会看到一些奇怪的东西。这时候，SRI 就可以担当起保护网站完整性的重要角色了。原理非常简单而且效果很好，就像给网站加载的资源打上了防伪标签一样。SRI 通过在引用外部资源（如js、css、图片等）的时候添加一个特殊的哈希值，来确保资源的完整性。

SRI 主要应用于 CDN（内容分发网络）环境，因为 CDN 的安全性不可控，一旦 CDN 出现安全问题，可能导致站点出现安全问题。因此，通过 SRI 可以有效防止用户加载被篡改过的资源。

使用方法

以引用 js 文件为例来说明如何使用 SRI，示例代码如下：

<script src="https://xx.com/xxx.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7"></script>

上面的代码中引用了一个 js 文件，并提供了 integrity 属性，integrity 属性值的第一部分是哈希算法（支持 SHA-384、SHA-256等），第二部分是对应的哈希值。浏览器加载这个 js 文件时，会计算其哈希值，如果和 integrity 中的哈希值不相等，则拒绝加载。

需要注意的是，使用 SRI 时一般还需要设置 crossorigin 属性，这是因为出于安全原因，浏览器默认不会计算跨域资源的哈希值，通过设置 crossorigin 属性，告诉浏览器计算这个资源的哈希值。例如：

<script src="https://xx.com/xxx.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"></script>

小结

SRI 是一种非常有用的安全策略，可以有效防止网站加载被篡改过的资源。但是也并不是能防止所有的攻击，例如，如果攻击者可以篡改网站的 HTML 代码，就可以修改或移除 integrity 属性。因此，SRI 应该作为多种防御策略的其中一种策略，与其他安全措施（例如HTTPS、Content Security Policy等）一起使用。