75CDN 是一个由奇舞团维护的静态资源托管平台，创立至今已经稳定运行了一年多的时间。近期我们增加了 SRI 的支持，作为国内首个提供 SRI 服务的静态资源库了，也算是为 75CDN 一周年庆生吧。
SRI 全称是 Subresource Integrity，是用来解决由于 CDN 资源被污染而导致的 XSS 漏洞的方案。当浏览器检测加载脚本签名与给定的签名不一致时，会拒绝执行该脚本。目前浏览器的支持情况如下：
| Chrome 以及 Chrome for Android | 45+ |
| Firefox 以及 Firefox Mobile | 43+ |
| Safari 以及 iOS Safari | 11+ |
| IE 以及 Edge | 不支持 |
| UC 浏览器 | 不支持 |
<!--more-->
开启 SRI 功能
SRI 开启需要有两个条件：首先需要资源为同域或者开启 CORS 设置，然后需要在<script>中提供签名以供校验。由于 SRI 在不匹配的时候就不执行脚本，考虑到这个比较“强力”，75CDN 目前需要手动开启 SRI 格式的显示。75CDN 支持两种方式开启显示：
在 url 上增加
?sri=1临时开启当前模块的 SRI 支持，例如：https://cdn.baomitu.com/jquer...。在控制台中执行
cdn.sri = true永久开启全站模块的 SRI 支持，设置为false则可以关闭。
开启后直接在具体资源地址右侧选择“复制<script>标签”或者“复制<link>标签”按钮即可获得带有 SRI 支持的 HTML 代码，例如：
<script
crossorigin="anonymous"
integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
src="http://lib.baomitu.com/jquery/3.2.1/jquery.min.js"
><script>对于没有提供 SRI 服务的 CDN 也可以自己计算，其中 SRI Hash Generator 就是一个帮助开发者计算资源签名的平台。
SRI 的使用
刚才也说到了，当资源不匹配的时候浏览器是会拒绝执行脚本的。这虽然保障了网页的安全性，但是这样让页面变的不可用对用户来说其实是极不友好的。考虑到这种情况我们最好在资源加载失败后提供一个 fallback 方案，例如请求本站资源。同时一般网络劫持具有区域性特征，我们也可以打点上报case，可以统计查看被劫持情况。下面是个简单的例子：
var s = document.createElement('script');
s.crossOrigin = 'anonymous';
s.integrity="sha384-qu2J8HSjv8EaYlbzBdbVeJncuCmfBqnZ4h3UIBZ9WTZ/5Wrqt0/9hofL0046NCkc";
s.onerror = function() {
// 打点上报劫持数据
var img = document.createElement('img');
img.src = 'http://xxx.com?url='+s.src;
document.body.appendChild(img);
// 更换其他域名下载地址
s.src = 'http://zeptojs.com/zepto.min.js';
};
s.onload = function() {
console.log($);
}
s.src = 'http://lib.baomitu.com/zepto/1.2.0/zepto.min.js';
document.head.appendChild(s);CSP 3
除了 SRI 能够保障网站安全的引入 CDN 资源之外，其实 CSP 也能帮助我们防止 XSS 攻击。CSP 全称是 Content Security Policy，目前协议已经发展到 Level 3 版本了。它是一个用来定义页面可以加载或执行哪些资源的协议，通过限制可能不安全资源的加载来达到安全的目的。
它的一个特色是向后兼容，不支持的浏览器设置了也没什么问题。可以在请求头中配置不同的加载策略，同时还天然支持对不安全资源加载进行上报。在 CSP2 中协议支持了可以使用白名单的形式配置安全资源，例如：
Content-Security-Policy: script-src 'sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f'可以看到 CSP 的资源白名单配置的签名和 SRI 的签名是一致的，而且由于向后兼容不影响不支持的版本，所以我们也可以利用起来。关于 CSP 的更多内容可以查看文末的参考资料。
总结
75CDN 已经一周年了，除了给大家带来了 SRI 保障大家的资源加载安全之外，我们还会为大家带来更稳定的服务以及更多使用的功能，请大家多多支持！
参考资料：