了解子资源完整性_极简慕枫

杭州做网站如果您曾经使用过CDN托管的JavaScript库版本，那么您可能已经注意到integrity脚本标记上有一个奇怪的外观属性。这个属性包含看似无穷无尽的字母数字垃圾，你可能想要在寻求更干净的代码时去除它。

所有这些垃圾实际上都是一个非常有用的安全功能，称为子资源完整性（SRI），可以帮助保护您的网站免受某些类型的黑客攻击和妥协。在本文中，我们将了解SRI是什么，它如何帮助保护您，以及如何在您自己的项目中开始使用它，而不仅仅是CDN上托管的文件。

一点历史

回想起当时JavaScript是HTML和CSS的较差的表兄弟，我们不需要过多考虑如何将我们的脚本用作我们网站的攻击媒介。大多数站点都托管在我们自己的托管基础架构上的某个物理服务器上，而这是我们考虑在安全最佳实践方面进行防御的服务器。

随着浏览器变得越来越强大，网络连接越来越胖，我们开始使用越来越多的JavaScript，最终，可重用的JavaScript库开始兴起。在那些早期，像script.aculo.us，Prototype和最终jQuery这样的库开始在希望在页面中添加更多交互性的开发人员中得到采用。

随着这些添加的库和后续插件增加了页面重量，不久我们开始认真考虑前端性能。以前作为大公司储备的内容交付网络（CDN）等资源正日益成为日常民间建筑活动网站的普遍现象。

一路上，一些明亮的火花注意到网站都在请求他们自己的公共库副本 - 比如最新的jQuery - 如果这些库的公共CDN版本可以被每个站点使用，那么用户就不会'我需要继续下载相同的文件。他们将第一个站点的命中率用于使用该文件，但随后它将位于其本地浏览器缓存中，并且可以跳过每个后续站点的下载。天才！

这就是为什么你会看到你最喜欢的图书馆的CDN链接使用的网址jsdelivr.com- 他们正在利用一个普通的CDN来托管文件，以便他们的用户看到性能优势。

什么可能出错？

这仍然是一种良好，实用的工作方式，但它确实引入了潜在的攻击媒介。让我们想象它是2012年，每个人都在使用全新的jQuery 1.8。回到传统的做事方式，每个人都会将自己的jQuery 1.8文件作为自己网站的一部分托管在自己的服务器上。

如果你是某种邪恶的演员 - 就像某种基于jQuery的Hamburglar一样 - 并且想出了一个偷偷摸摸的方法来破解图书馆以获取你自己的邪恶收益，你必须单独定位每个网站并妥协他们的服务器才能拥有任何影响。这是很多努力。

但现在情况并非如此，因为每个人都在使用从普通CDN加载的jQuery。当我说每个人时，我并不是指数百个网页。我的意思是数以百万计的网页。突然间，一个文件已成为我们黑幕黑客的一个非常有吸引力的目标。如果他们可以妥协这一个文件，他们可以很快地在全球数百万个网页上运行代码。

代码是什么并不重要。破坏页面可能是恶作剧，可能是窃取密码的代码，可能是挖掘加密货币的代码，也可能是偷偷摸摸的追踪者跟随你在网络上制作营销档案。重要的是，开发人员添加到页面的无辜文件已被更改，您现在有一些邪恶的JavaScript作为您网站的一部分运行。这是一个大问题。

输入Subresource Integrity

SRI不是回滚时钟并放弃使用代码的有用方式，而是在顶部添加简单安全级别的解决方案。SRI和integrity属性的作用是确保链接到页面的文件永远不会更改。如果确实发生了变化，那么浏览器会拒绝它。

检查代码没有改变是计算机科学中一个非常古老的问题，幸好它有一些非常完善的解决方案。SRI在采用最简单的文件散列方面做得很好。

文件散列是获取文件并通过算法运行它的过程，该算法将其缩减为短字符串表示形式，称为散列或校验和。没有进入杂草，这个过程要么是可重复的，要么是可逆的，如果你要给别人一个文件和哈希，他们就可以运行相同的算法来检查两者是否匹配。如果文件发生更改或哈希值发生变化，那么就不再匹配，您知道出现了问题并且应该不信任该文件。

使用SRI时，您的网页包含哈希值，服务器（CDN或任何地方）保存文件。浏览器下载文件，然后快速计算以确保它与integrity属性中的哈希匹配。如果匹配则使用该文件，如果不匹配则被阻止。

尝试一下

如果我getbootstrap.com今天去获取一个指向Bootstrap版本的CDN链接，我会给出一个如下所示的标签：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

您可以看到该src属性与我们习惯的一样，该integrity属性包含我们现在知道的哈希值。

哈希实际上分为两部分。第一个是声明要使用哪种哈希算法的前缀。在这种情况下，它是sha384。接下来是破折号，然后是散列本身，用base64。编码。

您可能熟悉base64将图像等内嵌文件编码为页面的方法。它不是一个加密过程 - 它只是一种快速方便的方式来编码可能混乱的数据，其方式可以整齐地转换为ASCII。这就是它在网络上大量使用的原因。

看到这个，浏览器将下载bootstrap.min.js。在执行之前，它将base64解码散列，然后使用sha384散列算法确认散列与刚刚下载的文件匹配。如果匹配，则执行该文件。

我可以通过将该标记放在页面中，然后在浏览器工具中翻转到“网络”选项卡来查看该文件是否已加载来测试。

我可以看到bootstrap.min.js（以及它需要的jQuery文件）已成功加载。

让我们看看如果我将哈希更新为我知道不正确的内容会发生什么。

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-SmashingMagazineIsCoolForCats" crossorigin="anonymous"></script>

如您所见，我页面中指定的哈希不再与文件匹配，因此文件被阻止。

在自己的项目中使用SRI

在CDN上具有此库的功能非常棒，如果您看到使用带有integrity属性的嵌入式文件的选项，那么您肯定会喜欢该选项。但它不仅限于CDN上的大型项目，您可以自己将它用于您自己的网站。

想象一下黑客设法访问您网站上的几个文件的情况并不是很遥远。我想我们大多数人都看到一个客户，同事或朋友，他们在某个时候有一个WordPress网站被一堆令人讨厌的垃圾所破坏，他们甚至没有意识到存在这些垃圾。

SRI也可以保护您免受此类攻击。如果为自己的文件生成完整性哈希，那么您可以让站点拒绝任何更改，就像对远程托管文件一样。

生成哈希

正如您所期望的那样，您可以在计算机的终端上运行一些命令来生成文件的哈希值。这个如何执行此操作的示例来自MDN Subresource Integrity页面：

cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A

这是获取内容FILENAME.js并将其作为输入传递openssl给使用创建摘要sha384，然后将其作为输入传递到另一个openssl命令以base64对结果进行编码。这不仅是复杂而模糊的，而且每次JavaScript文件发生变化时，您也不希望手动执行此操作。

更有用的是，你会想要以某种方式将它集成到你网站的构建过程中，正如你想象的那样，那里有很多现成的选项。确切的实现将根据您的项目而有很大差异，但这里有一些构建块。

如果您使用Gulp构建您的站点，那么gulp-sri将输出一个JSON文件，其中包含您的文件及其哈希列表。然后，您可以在您的网站中使用此功能。例如，对于动态呈现的网站，您可以创建一个模板插件来读取该文件，并在需要时将哈希值添加到模板中。

如果您仍然使用Gulp但拥有静态站点（或静态生成的站点），您可以使用gulp-sri-hash实际运行HTML页面并修改页面以在需要时添加哈希，这非常方便。

如果你正在使用Webpack，那么webpage-subresource-integrity在真正的Webpack风格中比任何人都预期的要复杂得多，但看起来确实有效。

对于使用Handlebars模板引擎的用户，似乎有可用的选项，如果您的构建过程只是基本的JavaScript，那么也有简单的解决方案。

如果您使用的是像WordPress这样的CMS，我发现一个插件似乎很容易，虽然我自己没有尝试过。使用SRI或Sub Resource Integrity搜索您自己选择的平台可能会为您指明正确的方向。

您基本上想要在缩小JavaScript文件之后挂钩您的哈希，然后以某种方式使该哈希可用于系统的任何部分输出<script>标记。网络平台的一个奇迹是技术上的多样化，但遗憾的是让我无法给你很好的实施指令！

其他需要注意的事项

在本文中，我已经谈了很多关于JavaScript文件的内容，因为这真的是防范黑客攻击最有意义的地方。SRI也可以与CSS一起使用，因此您可以以完全相同的方式使用它。恶意CSS的风险要低得多，但是破坏网站的可能性仍然存在，谁知道哪些浏览器错误也可能导致CSS无意中将您的网站暴露给黑客。所以它也在那里使用SRI。

您可以做的另一件有趣的事情是使用内容安全策略来指定页面上的任何脚本（或样式）必须使用SRI，当然SRI必须验证。

Content-Security-Policy: require-sri-for script;

这是一种确保始终使用SRI的方法，这对于由多个团队成员工作的站点非常有用，这些团队成员可能会或可能不会完全了解如何执行操作。同样，一个阅读更多相关信息的好地方是Subresource Integrity总是很棒的MDN文档。

值得讨论的最后一件事是对SRI的浏览器支持。现代浏览器的支持范围很广，主要的例外是Internet Explorer。然而，由于规范已经实现了向后兼容的方式，因此可以立即使用。理解该integrity属性的浏览器将使用哈希并检查完整性，旧浏览器将继续保持原样并继续工作。当然，你不会在那些旧版浏览器中获得额外的保护，但是你会在提供支持的浏览器中获得。

结论

我们不仅看到了integrity属性中那些奇怪的哈希，还有我们如何使用它们来防御我们网站上的某些类型的攻击。当然，没有一个银弹可以保护我们的网站免受各种攻击，但Subresource Integrity是一个非常有用的工具。

利用安全漏洞通常是要让多个小块排成一行。如果A到位，并且你可以使B发生，那么C中的错误使得D成为可能。像SRI这样的浏览器功能为我们提供了一个很好的方法，可以将事情简化一点，并可能打破这个链条，防止黑客获得他们想要的东西。更重要的是，如果你可以将它集成到你的构建过程或CMS中，那么你应该能够设置一次然后忘记它，它不会给你带来日常的不便。

因此，我真的建议认真看看Subresource Integrity并在您的网站上实施它，如果可以的话。

杭州做网站