使用SRI保护你的网站免受第三方CDN恶意攻击

时间 2019-11-09

原文原文链接

出于速度和下降服务器负载考虑，有时候咱们会选择使用 CDN 加载第三方静态资源。对于一些热门的第三方库，在用户打开你的网页以前就颇有可能在浏览别的网站时被浏览器缓存下来，这样就能够极大的提高网页加载速度。css

然而使用 CDN 也提升了网站的安全风险：第三方静态资源放在第三方服务器上，CDN 的拥有者有没有可能偷偷的篡改这些文件，加入恶意代码呢？或者 CDN 服务器遭受了黑客攻击，整个文件被替换掉。虽然可能性不高，但不是零。JavaScript 对于当前浏览器页面有彻底控制权，他们不单单能获取到页面上的任何内容，还能抓取用户输入的一些诸如密码之类的机密信息，还能获取到保存到 Cookie 中的登陆票据等等内容，这就是所谓的 XSS 攻击。html

咱们须要一种机制确保从 CDN 下载的文件未被恶意篡改。某些下载网站就提供下载文件的 MD5 或 SHA1 码用于检查所下载文件的完整性，网页中有没有相似的机制呢？jquery

什么是 SRI

子资源完整性 Subresource Integrity 简称 SRI 是一种安全机制，它用于让浏览器检查所下载的来自第三方的资源（例如 CDN）未被恶意篡改。它使用哈希值检查确保第三方资源的完整性。只要开发者提供了被需下载资源的哈希值，浏览器就能够检查实际下载的文件是否与预期的哈希值匹配。git

使用 SRI

只需给 script 或 style 标签添加 integrity 属性便可。例如：github

JavaScript

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" integrity="sha384-7tIwW4quYS2+TZCwuAPnUY+dRqg28ylzlIoVXAwpfiTs+CMKsAOSsWYQ96c/ZnV+" crossorigin="anonymous">

integrity 属性值以 shaXXX- 开头，表示后面的哈希值使用的哈希算法，目前只容许 sha256、sha384 或 sha512 这三种哈希算法，以 sha384 比较多见。后面跟对应的哈希值便可。web

值得注意的是，由于启用 SRI 须要获取所下载文件的内容进行计算，因此须要 CDN 服务器启用跨域资源访问（CORS）支持，即返回 Access-Control-Allow-Origin: * 头。客户端须要使用跨域的形式加载指定文件，即添加 crossorigin="anonymous" 属性。就我所知，目前国内相对经常使用的免费 CDN bootcdn 已经支持 CORS，百度静态 CDN 还不支持。ajax

浏览器如何处理 SRI

当浏览器遇到一个带有 integrity 的 script 或 style 标签，在执行其中的 JS 脚本或应用其中的 CSS 样式以前，浏览器会首先计算所下载文件的内容的哈希值是否与 integrity 属性给定的值相同。
若是计算结果与给定值不匹配，浏览器会拒绝执行脚本内容，并报出一个网络错误，相似以下结果：

Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css' with computed SHA-256 integrity 'VbcxqgMGQYm3q8qZMd63uETHXXZkqs7ME1bEvAY1xK8='. The resource has been blocked.

如何计算哈希值

这是 SRI 标准文档提供的例子：算法

$ echo -n "alert('Hello, world.');" | openssl dgst -sha384 -binary | openssl base64 -A

使用了 OpenSSL 这个 *nix 中一般都包含的工具计算哈希值。其中 alert('Hello, world.'); 是文件内容，你也能够用 cat Filename.js 直接读取某个文件。shell

输出 H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO，在此基础上添加前缀 sha384- 就能够了。跨域

网上也有现成的 SRI 哈希值生成器，方便好用：https://srihash.org/

CSP 与 SRI

你可使用 内容安全政策 （CSP）强制要求当前页面全部脚本加载标签启用 SRI。例如

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

强制要求全部 script 标签启用 SRI，浏览器会拒绝加载未启用 SRI 的 script 标签。

对应的还有 CSS 版本：

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

你也能够同时启用二者。

错误恢复

使用 CDN 时别忘了当尝试从 CDN 加载文件失败后加载本地版本：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
        crossorigin="anonymous"></script>
<script>if (!window.jQuery) document.write('<script src="/jquery-3.2.1.min.js"><\/script>')</script>