解释 JavaScript 中的 Subresource Integrity (SRI) 如何确保第三方脚本的完整性，以及其局限性。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位好！今天咱们来聊聊一个听起来高大上，但实际上贼实用的小技巧：JavaScript 的 Subresource Integrity (SRI)。简单来说，它能帮你确认你加载的第三方脚本是不是“正品”，有没有被人动过手脚。

开场白：别让你的网站变成“肉鸡”！

想象一下，你辛辛苦苦搭建了一个网站，用户体验一流，安全性杠杠的。突然有一天，你的网站开始莫名其妙地弹出广告，用户的个人信息也被盗了！罪魁祸首很可能就是你引入的某个第三方 JavaScript 文件，它被人篡改了，植入了恶意代码。

这种事情可不是危言耸听。很多网站都会使用 CDN (Content Delivery Network) 上的 JavaScript 库，比如 jQuery、Bootstrap 之类的。如果 CDN 被攻破，或者有人恶意篡改了这些文件，你的网站就会跟着遭殃。

Subresource Integrity 就是为了解决这个问题而生的。它就像给每个 JavaScript 文件都盖了一个“防伪章”，确保你加载的是未经篡改的正版文件。

SRI 的工作原理：哈希校验，一锤定音

SRI 的核心思想是使用哈希算法。简单来说，哈希算法就像一个“指纹生成器”，它可以把任何数据（比如一个 JavaScript 文件）转换成一个固定长度的字符串，这个字符串就是这个数据的“指纹”。

SRI 使用的是加密哈希算法，比如 SHA-256、SHA-384、SHA-512。这些算法的特点是：

单向性： 只能从原始数据计算出哈希值，不能从哈希值反推出原始数据。
唯一性： 即使原始数据只改变一点点，生成的哈希值也会完全不同。

有了哈希值，我们就可以在 HTML 代码中指定我们要加载的 JavaScript 文件的哈希值。浏览器加载文件时，会先计算文件的哈希值，然后和我们指定的哈希值进行比较。如果两者一致，说明文件没有被篡改，可以安全地执行；如果两者不一致，说明文件可能被篡改了，浏览器会拒绝执行。

代码示例：给你的 script 标签加上“防伪章”

假设我们要加载一个来自 CDN 的 jQuery 文件，它的 URL 是 https://cdn.example.com/jquery.min.js。首先，我们需要获取这个文件的哈希值。有很多方法可以做到，比如使用 OpenSSL 命令行工具：

openssl dgst -sha384 jquery.min.js -binary | openssl base64 -e

这条命令会先用 SHA-384 算法计算 jquery.min.js 文件的哈希值，然后用 Base64 编码将哈希值转换成字符串。假设计算出来的哈希值是：

sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC

接下来，我们就可以在 HTML 代码中添加 SRI 属性了：

<script
  src="https://cdn.example.com/jquery.min.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"></script>

解释一下：

src 属性指定了 JavaScript 文件的 URL。
integrity 属性指定了文件的哈希值。sha384- 前缀表示使用的哈希算法是 SHA-384。
crossorigin 属性用于处理跨域请求。如果你的 JavaScript 文件来自不同的域名，你需要设置这个属性。anonymous 值表示以匿名模式发送请求，不发送用户的身份信息。如果你的 CDN 需要身份验证，你需要设置 use-credentials 值。

多个哈希值：双保险，更安全

为了提高安全性，你可以指定多个哈希值。浏览器会依次尝试每个哈希值，只要有一个匹配，就认为文件是安全的。

<script
  src="https://cdn.example.com/jquery.min.js"
  integrity="sha256-xxx sha384-yyy sha512-zzz"
  crossorigin="anonymous"></script>

这样做的好处是，如果某个哈希算法被破解了，你仍然可以使用其他的哈希算法来保护你的网站。

SRI 的优势：简单、有效、兼容性好

SRI 的优势很明显：

简单易用： 只需要在 HTML 代码中添加一个 integrity 属性即可。
效果显著： 可以有效防止第三方 JavaScript 文件被篡改。
兼容性好： 现代浏览器都支持 SRI。

SRI 的局限性：并非万能药，仍需谨慎

SRI 虽然很好用，但也有一些局限性：

只能保护静态资源： SRI 只能保护静态的 JavaScript 文件，无法保护动态生成的内容。如果你的 CDN 会动态修改 JavaScript 文件，SRI 就无法生效了。
需要提前知道哈希值： 你需要在发布网站之前知道 JavaScript 文件的哈希值。如果 CDN 上的文件更新了，你需要重新计算哈希值，并更新你的 HTML 代码。
无法防止 CDN 本身被攻破： SRI 只能保证你加载的文件和指定的哈希值一致，但无法保证 CDN 本身是安全的。如果 CDN 被攻破，攻击者可以直接篡改 CDN 上的文件，并提供正确的哈希值，从而绕过 SRI 的保护。
对本地开发环境不友好： 在本地开发时，每次修改 JavaScript 文件都需要重新计算哈希值，比较麻烦。你可以使用一些工具来自动计算哈希值，或者在开发环境中禁用 SRI。
错误处理： 如果 SRI 校验失败，浏览器会阻止脚本执行，但默认情况下不会提供详细的错误信息。你需要在控制台中查看错误信息，或者使用 JavaScript 代码来监听 SRI 错误。
子资源依赖： 如果你的 JavaScript 文件依赖于其他的子资源（比如 CSS 文件、图片文件），SRI 只能保护 JavaScript 文件本身，无法保护这些子资源。

错误处理：当 SRI 校验失败时该怎么办？

当 SRI 校验失败时，浏览器会在控制台中显示错误信息，并且会触发 error 事件。你可以使用 JavaScript 代码来监听这个事件，并采取相应的措施。

window.addEventListener('error', function(event) {
  if (event.target instanceof HTMLScriptElement && event.target.integrity) {
    console.error('SRI 校验失败：', event.target.src);
    // 可以采取一些措施，比如：
    // 1. 显示错误提示信息
    // 2. 尝试加载备用资源
    // 3. 禁用相关功能
  }
});

最佳实践：如何正确使用 SRI？

为了充分发挥 SRI 的作用，你需要遵循一些最佳实践：

使用可靠的 CDN： 选择信誉良好、安全措施完善的 CDN 服务商。
定期更新哈希值： 当 CDN 上的 JavaScript 文件更新时，及时更新你的 HTML 代码中的哈希值。
使用多个哈希值： 为了提高安全性，可以指定多个哈希值。
监控 SRI 错误： 使用 JavaScript 代码来监听 SRI 错误，并采取相应的措施。
结合其他安全措施： SRI 只是安全措施之一，还需要结合其他的安全措施，比如内容安全策略 (CSP)、HTTPS 等。

SRI 与 CSP：强强联合，天下无敌

内容安全策略 (CSP) 是一种更强大的安全机制，它可以限制浏览器可以加载的资源来源，从而防止跨站脚本攻击 (XSS)。SRI 可以和 CSP 结合使用，提供更全面的安全保护。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.example.com; require-sri-for script;">

解释一下：

default-src 'self' 表示默认只允许加载来自相同域名的资源。
script-src 'self' https://cdn.example.com 表示允许加载来自相同域名和 https://cdn.example.com 的 JavaScript 文件。
require-sri-for script 表示要求所有的 JavaScript 文件都必须使用 SRI。

总结：SRI，你值得拥有！

总而言之，Subresource Integrity 是一种简单、有效、实用的安全机制，可以帮助你确保第三方 JavaScript 文件的完整性。虽然它并非万能药，但只要正确使用，就可以大大提高你的网站的安全性。

最后，给大家留个小作业：

找一个你常用的 CDN 上的 JavaScript 文件，计算它的哈希值，并添加到你的 HTML 代码中。
尝试篡改 CDN 上的 JavaScript 文件（当然，不要真的去篡改！），看看浏览器是否会阻止脚本执行。
研究一下内容安全策略 (CSP)，看看如何将 SRI 和 CSP 结合使用。

希望今天的讲座对大家有所帮助！记住，网络安全无小事，保护好你的网站，也保护好你的用户！咱们下次再见！

表格总结：SRI 的优缺点

特性	优点	缺点
功能	验证第三方资源的完整性，防止恶意代码注入	仅适用于静态资源，无法保护动态生成的内容
易用性	易于实现，只需添加 `integrity` 属性	需要提前知道哈希值，CDN 文件更新后需要更新哈希值
安全性	有效防止资源篡改	无法防止 CDN 本身被攻破
兼容性	现代浏览器支持良好	对本地开发环境不太友好，每次修改文件都需要重新计算哈希值
错误处理	SRI 校验失败会阻止脚本执行	默认错误信息不够详细，需要手动监听 `error` 事件
依赖关系	独立工作，但可以与 CSP 结合使用，提供更全面的安全保护	只能保护 JavaScript 文件本身，无法保护其依赖的子资源（如 CSS、图片）
总评	简单有效，提高网站安全性，推荐使用	不是万能药，需要结合其他安全措施，并注意其局限性

发表回复 取消回复

发表回复取消回复