出于速度和降低服务器负载考虑，有时候我们会选择使用 CDN 加载第三方静态资源。对于一些热门的第三方库，在用户打开你的网页之前就很有可能在浏览别的网站时被浏览器缓存下来，这样就可以极大的提升网页加载速度。
然而使用 CDN 也提高了网站的安全风险：第三方静态资源放在第三方服务器上，CDN 的拥有者有没有可能偷偷的篡改这些文件，加入恶意代码呢？或者 CDN 服务器遭受了黑客攻击，整个文件被替换掉。虽然可能性不高，但不是零。JavaScript 对于当前浏览器页面有完全控制权，他们不仅仅能获取到页面上的任何内容，还能抓取用户输入的一些诸如密码之类的机密信息，还能获取到保存到 Cookie 中的登录票据等等内容，这就是所谓的 XSS 攻击。
我们需要一种机制确保从 CDN 下载的文件未被恶意篡改。某些下载网站就提供下载文件的 MD5 或 SHA1 码用于检查所下载文件的完整性，网页中有没有类似的机制呢？
什么是 SRI
子资源完整性 Subresource Integrity 简称 SRI 是一种安全机制，它用于让浏览器检查所下载的来自第三方的资源（例如 CDN）未被恶意篡改。它使用哈希值检查确保第三方资源的完整性。只要开发者提供了被需下载资源的哈希值，浏览器就可以检查实际下载的文件是否与预期的哈希值匹配。
使用 SRI
只需给 script 或 style 标签添加 integrity 属性即可。例如：
integrity 属性值以 shaXXX- 开头，表示后面的哈希值使用的哈希算法，目前只允许 sha256、sha384 或 sha512 这三种哈希算法，以 sha384 比较多见。后面跟对应的哈希值即可。
值得注意的是，因为启用 SRI 需要获取所下载文件的内容进行计算，所以需要 CDN 服务器启用跨域资源访问（CORS）支持，即返回 Access-Control-Allow-Origin: * 头。客户端需要使用跨域的形式加载指定文件，即添加 crossorigin="anonymous" 属性。就我所知，目前国内相对常用的免费 CDN bootcdn 已经支持 CORS，百度静态 CDN 还不支持。
浏览器如何处理 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 直接读取某个文件。
输出 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 加载文件失败后加载本地版本：
原链接：https://segmentfault.com/a/1190000011337230
