前端安全：npm-audit 和脚本完整性

几年前，全球数千个网站被代码劫持，导致计算机运行加密货币挖掘软件。

该恶意代码由著名安全专家 Scott Helme 发现，由一家名为 texthelp 的公司注入第三方辅助功能脚本“browsealoud”。

被劫持的网站包括大多数英国政府网站、瑞典警方网站等等。

未来的犯罪将在哪里发生是毫无疑问的，因此令人惊讶的是，很少有网站认真对待安全问题。

我承认，这很难推销：与新颖、酷炫的 UI 组件、引人入胜的动画、富有创意的用户旅程等不同，安全性并不性感——它甚至是看不见的！

但总有一天，安全漏洞会窃取重要数据，或以其他方式损害收入。

安全应该成为任何公司的持续战略，但谁来维护它呢？其中一些显然与前端相关。

npm-审计

第一道防线是修复前端资源。如果您的网站使用npm-audit : ，node_modules请运行 npm-audit: （可选）来测试漏洞。npm-audit: 会尝试修复漏洞，并向您提供报告，告知您下一步的操作。没错，有些项目包含 500MB 以上的 npm-audit : ，但必须这样做。
$ npm run audit--fix
node_modules

第三方脚本和integrity

我有一个项目，其中我正在使用unpkg来交付脚本。unpkg是

一个快速的全球内容交付网络，适用于 npm 上的所有内容。

<script defer
  src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js">
</script>

现在，如果unpkg被黑客入侵，我的网站就会收到被黑客入侵的脚本。

幸运的是，有一个名为 的属性integrity，我们可以将其添加到<script>-tags 中。它是一个 SHA 密钥，由（未被黑客入侵的）脚本源生成。如果脚本被黑客入侵，该密钥将不再匹配，脚本将无法integrity加载。如果受影响的网站使用了-attribute，我在本文开头提到的黑客攻击本来是可以避免的。

对于unpkg -scripts，附加?meta到 url 的末尾：

https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js?meta

这将返回一个 json 字符串/对象：

{
  "path":"/dist/smoothscroll.min.js",
  "type":"file","
  contentType":"application/javascript",
  "integrity":"sha384-EYn4rWu1DHvYD0sSSSbMEtXQmMl58CFJd897806+RT1jJVYbhuZlZMN6yG9nCyFa",
  "lastModified":"Tue, 26 Mar 2019 18:21:19 GMT",
  "size":3968
}

将完整性部分添加到您的<script>标签中，并添加crossorigin属性：

<script defer
  src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"
  integrity="sha384-EYn4rWu1DHvYD0sSSSbMEtXQmMl58CFJd897806+RT1jJVYbhuZlZMN6yG9nCyFa"
  crossorigin="anonymous">
</script>

官方名称是“子资源完整性”，大多数大型 CDN 和脚本传送服务都支持它。

文档在这里：
https://w3c.github.io/webappsec-subresource-integrity/

在即将发表的文章中，我将重点介绍如何设置和配置内容安全策略。

感谢阅读！