发布于 由admin

HTML5 Subresource Integrity (SRI)：防止第三方库被篡改

你的网站安全吗？聊聊HTML5 Subresource Integrity（SRI）那些事儿

话说有一天，你辛辛苦苦搭建了一个网站，界面美观，功能强大，吸引了无数用户。你得意洋洋，感觉自己走上了人生巅峰。然而，你有没有想过，你的网站可能存在一个潜在的风险，就像一颗定时炸弹，随时可能引爆，让你之前所有的努力都付诸东流？

这个风险，就藏在你引入的那些第三方库里。

第三方库：方便快捷的“外援”？

现在的网站开发，很少有人会从头到尾自己写代码。毕竟，重复造轮子实在是太浪费时间了。于是，各种各样的第三方库应运而生，它们就像一个个功能强大的“外援”，可以帮助我们快速实现各种复杂的功能，比如：

  • jQuery: 让JavaScript代码更简洁易懂，操作DOM元素更轻松。
  • Bootstrap: 提供美观的CSS样式和响应式布局，让你的网站颜值瞬间提升。
  • Font Awesome: 包含海量图标，让你的网站更生动形象。
  • 各种JavaScript图表库: 轻松创建各种炫酷的图表，让数据可视化更直观。

有了这些“外援”，开发效率大大提高，简直不要太爽。

但是，等等！

这些第三方库，就像双刃剑，在带来便利的同时，也带来了安全风险。

想象一下这个场景：

你引入了一个非常流行的JavaScript库，这个库被成千上万的网站使用。突然有一天，黑客攻破了这个库的服务器，篡改了库的代码，植入了恶意脚本。

接下来会发生什么？

所有使用这个库的网站，都会受到影响。黑客可以利用这些网站来窃取用户数据，传播恶意软件，甚至控制用户的电脑。想想都觉得可怕！

这可不是危言耸听，而是真实发生过的事件。

还记得2012年发生的“代码注入事件”吗？当时，黑客入侵了多家CDN服务商，篡改了大量的JavaScript库，导致数百万网站受到影响。

那么，我们该如何防范这种风险呢？

这时候，就轮到我们的主角——HTML5 Subresource Integrity (SRI) 登场了。

SRI：给第三方库加个“防伪码”

简单来说，SRI就是一种安全机制，可以确保浏览器加载的第三方资源（比如JavaScript库、CSS样式表等）没有被篡改过。它就像给每个第三方库都加上了一个独一无二的“防伪码”，浏览器在加载资源时，会先验证这个“防伪码”是否正确，如果发现不一致，就会拒绝加载，从而避免加载被篡改的恶意代码。

SRI的工作原理其实很简单：

  1. 计算资源的哈希值： 你需要使用特定的哈希算法（比如SHA-256、SHA-384、SHA-512）计算第三方资源的哈希值。哈希值就像资源的“指纹”，任何细微的修改都会导致哈希值发生变化。
  2. 将哈希值添加到<link>或<script>标签中： 将计算出的哈希值添加到HTML代码中的<link>或<script>标签的integrity属性中。

举个栗子：

假设你想引入一个jQuery库，你可以这样写：

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"
  integrity="sha384-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
  crossorigin="anonymous"></script>

其中，integrity属性的值就是jQuery库的哈希值。crossorigin="anonymous"属性是为了允许跨域请求，这个我们稍后再说。

浏览器如何验证？

当浏览器加载这个<script>标签时，它会：

  1. 下载jQuery库: 从src属性指定的URL下载jQuery库。
  2. 计算下载资源的哈希值: 使用相同的哈希算法（SHA-384）计算下载资源的哈希值。
  3. 比较哈希值: 将计算出的哈希值与integrity属性中指定的哈希值进行比较。
  4. 如果哈希值一致: 说明资源没有被篡改，浏览器会正常执行jQuery库的代码。
  5. 如果哈希值不一致: 说明资源可能被篡改了，浏览器会拒绝执行jQuery库的代码，并在控制台中显示错误信息。

SRI的优势：

  • 防止恶意代码注入： 这是SRI最核心的优势。即使黑客攻破了CDN服务器，篡改了第三方库的代码，SRI也能确保浏览器不会加载被篡改的恶意代码，从而保护你的网站和用户安全。
  • 提高网站安全性： SRI可以有效地防止XSS攻击（跨站脚本攻击），提高网站的整体安全性。
  • 增强用户信任： 使用SRI可以向用户表明，你非常重视网站的安全，并采取了必要的措施来保护用户的数据。

SRI的不足：

  • 需要手动计算和维护哈希值： 每次更新第三方库，都需要重新计算哈希值，并更新HTML代码。这可能会增加一些维护成本。
  • 可能会影响性能： 浏览器在加载资源时需要计算哈希值，这可能会稍微增加一些加载时间。但是，这种影响通常可以忽略不计。
  • 只适用于静态资源： SRI只适用于静态资源（比如JavaScript库、CSS样式表等），对于动态生成的内容无效。

如何使用SRI？

  1. 选择合适的哈希算法： 建议使用SHA-256、SHA-384或SHA-512。SHA-512的安全性最高，但计算速度也最慢。

  2. 计算资源的哈希值： 可以使用各种在线工具或命令行工具来计算资源的哈希值。比如，可以使用OpenSSL命令：

    openssl dgst -sha384 jquery.min.js

  3. 将哈希值添加到<link>或<script>标签中： 确保integrity属性的值包含正确的哈希算法和哈希值。

  4. 添加crossorigin属性： 如果你的第三方资源是从不同的域名加载的，你需要添加crossorigin属性，并将其设置为anonymous或use-credentials。

    • anonymous: 不发送任何用户凭据（比如Cookie）到服务器。
    • use-credentials: 发送用户凭据到服务器。只有当服务器允许跨域访问时，才能使用use-credentials。

一个更完整的例子：

<!DOCTYPE html>
<html>
<head>
  <title>我的安全网站</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>欢迎来到我的网站！</h1>
  <p>这是一个使用SRI保护的网站。</p>
  <script
    src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>
  <script src="main.js"></script>
</body>
</html>

在这个例子中，我们使用了SRI来保护Bootstrap的CSS样式表和jQuery、Popper.js和Bootstrap的JavaScript库。

总结：

HTML5 Subresource Integrity (SRI) 是一种简单而有效的安全机制，可以帮助你保护你的网站免受恶意代码注入的攻击。虽然它有一些不足之处，但总的来说，使用SRI的收益远大于成本。

所以，下次你在引入第三方库的时候，记得给它们加上一个“防伪码”，让你的网站更安全，让你的用户更放心！

最后，送你一句忠告：

安全无小事，防患于未然。不要等到出了问题才后悔莫及！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注