SubResource Integrity

[manxingxing]

SubResource Integrity 翻译为 子资源完整性， 特指 HTML 中引用的 stylesheet, javascript 等外部资源的完整性。

问题来由: 不被信任的CDN

为了性能，我们通常讲静态资源(图片、stylesheet， javascript)托管在CDN，让这些资源距离客户端更近，缩短页面加载时间。但如果CDN被攻击了，或者CDN本身使坏呢？如果托管的资源被恶意改动了，我们的网站则容易收到XSS的攻击。

如何防范

记得在下载一些软件时，经常会提供一个 MD5 的 checksum，将下载资源的 checksum 和这个值比对，如果相同则表示资源未被篡改，相反则表示资源不可信。

同样道理，在 link, script标签上，添加一个integrity属性，告知浏览器这个资源的 checksum，让浏览器去检查资源是否可信，如果不可信则不加载这个资源。就像这样:

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

浏览器支持

chrome, firefox, safari 都支持了

强制对页面内资源进行检查

上面所将的检查是可选的，如果script,link标签上没有 integrity属性，浏览器就不会进行检查。可以通过 Content-Security-Policy 响应头强制对特定类型的所有资源进行检查:

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

Rails

通过 sprocket-rails，Rails 提供了内置的功能

javascript_include_tag 'application', integrity: true

对于 webpacker, 貌似并没有提供这样的功能

More

• Subresource Integrity 介绍
• Subresource Integrity - MDN

[qinmingyuan]

学到了