使用 subresource-integrity / SRI保护静态资源不被恶意修改
很多网站如果源被修改了，会有下面的提示
Failed to find a valid digest in the 'integrity' attribute for resource 'http://aa.aaaaa.com/assets/rubyissues-dc683ef8d41f45e5fdafceda1a26598f.css' with computed SHA-256 integrity 'vGH6uxiZBXnDr46nPJPx2/V82if1Sij2FDhPgXSk6xI='. The resource has been blocked.
是因为启用了 SRI
场景
网页需要需要引用静态资源（CSS/JavaScript），但是静态资源可能会被转发，替换等等；
比如 a.aaa.com 下的所有静态文件被映射到另外一个地址 a.bbb.com 上。虽然可能性不高，但不是零。
JavaScript 对于当前浏览器页面有完全控制权，他们不仅仅能获取到页面上的任何内容，还能抓取用户输入的一些诸如密码之类的机密信息，还能获取到保存到 Cookie 中的登录票据等等内容，这就是所谓的 XSS 攻击。
我们需要一种机制确保加载的文件未被恶意篡改。
某些下载网站就提供下载文件的 MD5 或 SHA1 码用于检查所下载文件的完整性，网页中有SRI来实现
什么是 SRI
子资源完整性 Subresource Integrity 简称 SRI 是一种安全机制，它用于让浏览器检查所下载的来自第三方的资源（例如 CDN）未被恶意篡改。
它使用哈希值检查确保第三方资源的完整性。只要开发者提供了被需下载资源的哈希值，浏览器就可以检查实际下载的文件是否与预期的哈希值匹配。
解决什么问题？
Web 性能优化中为了让静态资源尽快下载完，通常我们将JS/CSS/Image等静态资源部署在CDN服务器。CDN 服务提供商通过分布在各地的节点，让用户从最近的节点下载资源，大幅提升下载速度。但是 CDN 的安全性一直是一个风险点，让请求从第三方服务器经过，由第三方响应，安全性不可控，一旦CDN出现安全问题，就导致我们的站点也出现安全风险。
CSP（Content Security Policy） 的机制可以降低 XSS 风险。但我们存储在 CDN 的内容被篡改而导致的 XSS，CSP 并不能防范，因为网站所使用的 CDN 域名，肯定在 CSP 白名单之中。
HTTPS 也可以确保传输过程中的数据完整性，但是对于 CDN 服务器被入侵或 HTTP 回源被劫持造成的文件篡改，HTTPS 无济于事；
因此 SRI 就应运而生了，通过它避免用户加载了第三方服务器被修改的资源。
使用 SRI
只需给 script 或 style 标签添加 integrity 属性即可。例如：
JavaScript
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
或者
<script src=/js/vendors.f1d427e1.js integrity=sha384-+gPahXnpvahPqOS4haFp4mdPuTl17McxKkNAq5afcVdTZIPPq8+iGt0vPBWC9rbb></script>
<script src=/js/app.9e9aca74.js integrity=sha384-x7nwXHi0Efxos7Krmw54pThTZsGeTF7a10RxHp2ds1vyTHclTzh55xDLvGlUvvI/ ></script>
CSS
<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">
或者
<link href=/css/vendors.93201b2d.css rel=stylesheet integrity=sha384-9BHF2g0ZDOvNNvKybSbiN/KYALObRyTYNNlPyUBuOR2I6mUxJ4Lg22wHhda8lxdj>
<link href=/css/app.59b71084.css rel=stylesheet integrity=sha384-9FJ5XEuLpfj6t6hbVjAFT61jlE/J1l2+8c/qwv0Ek1ZfFe/qVdmvZzbWVmHXjcX/ >
integrity 属性值以 shaXXX- 开头，表示后面的哈希值使用的哈希算法，目前只允许 sha256、sha384 或 sha512 这三种哈希算法，以 sha384 最常见。后面跟对应的哈希值即可。
注意事项
值得注意的是，因为启用 SRI 需要获取所下载文件的内容进行计算，如果是引用非本域的资源，这就要求被请求的资源必须同域，或者需要服务器启用跨域资源访问（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://a.axihe.com/public.css' with computed SHA-256 integrity 'VbcxqgMGQYm3q8qZMd63uETHXXZkqs7ME1bEvAY1xK8='. The resource has been blocked.
如何计算哈希值
这是 SRI 标准文档提供的：https://w3c.github.io/webappsec-subresource-integrity/#example-da8c6097
$ 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:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP）强制要求当前页面所有脚本加载标签启用 SRI。例如
Content-Security-Policy: require-sri-for script;
强制要求所有 script 标签启用 SRI，浏览器会拒绝加载未启用 SRI 的 script 标签。
对应的还有 CSS 版本：
Content-Security-Policy: require-sri-for style;
你也可以同时启用两者。
启用SRI后会出现什么问题？怎么解决
当资源验证不通过，也就是用户下载的资源被劫持了，就会导致用户直接不可用，因为浏览器会触发错事件，并且丢弃下载的资源。这可能导致整个页面都不可用了！
SRI的原则是：宁为玉碎不为瓦全。为了提高可用性，也可以增加 fallback 处理。例如，在 CDN 资源被篡改而无法加载时，转为使用本站资源：
针对CDN资源失败的情况，我们可以通过添加额外的部署站点重试，例如：直接让用户从主域名下载资源，具体实现方式如下：
同步JS资源: 失败后我们直接使用document.write继续加载主域资源，这里可也通过构建实现。
<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>
github 很早就启用了SRI策略了：https://github.blog/2015-09-19-subresource-integrity/
安全隐患
SRI 的作用是保证页面引入第三方资源的完整性。在第三方 CDN 服务被入侵或回源被运营商劫持、文件内容被加入恶意代码时，网站如果启用了 SRI 策略，那么在支持 SRI 的浏览器下，被篡改的文件无法执行。
非最新的刘游览器
但是如果用不支持 SRI的浏览器，那就没有效果了，基本只有新版本的Chrome才支持这个属性；
下面是不支持SRI的浏览器
- IE 6/7/8/9/10/11/
- Edge 12-17/18/76
- FireFox 2-48/49-67/68-72
- Chrome 4-53
SRI支持情况
https://caniuse.com/#search=sri
HTML一起劫持
如果将外链资源及 HTML 页面本身一起劫持，
并将资源内容和页面中的摘要签名同步修改，让 SRI 彻底失效，那就可以绕过SRI了。
注意：将 JS 代码缓存在本地 localStorage的方案也有很大的安全隐患，网站出现任何 XSS，都有可能被用来篡改缓存在 localStorage 的代码，之后即使 XSS 被修复，localStorage 中的代码依然是被篡改过的，持续发挥作用。
结论：该方法只能在非常新的Chrome浏览器上有效果，属于君子协定一样，如果是非新版本Chrome浏览器，就天生绕过了这个防范；
如果是连HTML页面一起劫持，该验证也可以轻易绕过去
本文参考 ：
