使用SRI解决CDN劫持问题

CDN劫持的表现形式

之前总说https的安全的。如果你遇到这么一个场景：网站是https的，cdn也是https，但是用户还是看到广告，或者直接唤起其他app等更加恶心的操作。

这个时候你可以考虑下自己是否遭到了CDN劫持。

劫持方非常狡猾，每天每个用户只劫持一次，或者只会在固定时间段劫持，非常难以重现。

这样说明，使用CDN也存在风险，如果攻击者获得对 CDN 的控制权，则可以将任意恶意内容注入到 CDN 上的文件中 （或完全替换掉文件），因此可能潜在地攻击所有从该 CDN 获取文件的站点。

---

用SRI来解决这个问题

SRI是什么

面对如上的问题，需要引入一个SRI的API的概念。

SRI是subresource integrity， 子资源完整性，是指浏览器通过验证资源的完整性来判断其是否被篡改的安全特性。它通过验证获取文件的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。

它的兼容性在此，IE是全线没指望了，所以IE用户可能帮助不了了。但是我估计也没人会去攻击IE用户了。

SRI怎么用

将使用base64编码过后的文件哈希值写入所引用的<script>或<link>标签的integrity属性。

integrity属性分为两个部分，第一部分是指定哈希值的生成算法（目前支持sha256，sha384和sha512），第二部分是经过编码的实际哈希值，两者之前用一个短横(-)来分隔，例如：

<script type="text/javascript" src="app.bundle.js"
    integrity="sha256-WcONURDxHuPpCyTfyxv6ULC5IQS8W/TvkOfiluU2Y1w= sha512-XZBIDDYvednMCvIE+VxLhoh3GZ550KQEUuUG8EA/HNUKVOa9sl2YpyeIGVmi6NVu2VAAT+bReuzUszzugYNxKQ=="
    crossorigin="anonymous"></script>

至于如何生成sha256的hash编码，如果你是使用webpack，有现成的插件webpack-subresource-integrity,这里有一个简单的使用demo。

如果不是使用webpack，就直接自己动手吧，基于crypto自己转码实现一下就好了。

检测问题

浏览器如果发现文件内容不一致，则会抛出该script的onerror事件，并不会去加载这段脚本的内容。

如果项目有异常监控的话，拿到这个内容，发给服务端解码进行比较就知道是不是遇到CDN劫持了。

---

原文markdown地址：omnipotent-front-end/blog

---