75CDN 增加 SRI 支持

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 浏览器	不支持

注： 数据来源于 CanIUse 和 MDN

<!--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 保障大家的资源加载安全之外，我们还会为大家带来更稳定的服务以及更多使用的功能，请大家多多支持！

参考资料：

• Subresource Integrity 介绍

• Content Security Policy 介绍

• Content Security Policy Level 2 介绍

• CSP3策略简介