MENU

全线启用SRI 支持の墨灵音乐

2019 年 03 月 17 日 • 技术,原创,作品

SRI 全称是 Subresource Integrity,是用来解决由于 CDN 资源被污染而导致的 XSS 漏洞的方案。当浏览器检测加载脚本签名与给定的签名不一致时,会拒绝执行该脚本。

SRI 开启需要有两个条件:首先需要资源为同域或者开启 CORS 设置,然后需要在<script>中提供签名以供校验。

墨灵音乐所有第三方脚本启用SRI验证。
例如:

<script crossorigin="anonymous" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>

SRI 的使用
刚才也说到了,当资源不匹配的时候浏览器是会拒绝执行脚本的。这虽然保障了网页的安全性,但是这样让页面变的不可用对用户来说其实是极不友好的。考虑到这种情况我们最好在资源加载失败后提供一个 fallback 方案,例如请求本站资源。同时一般网络劫持具有区域性特征,我们也可以打点上报case,可以统计查看被劫持情况。下面是个简单的例子:

Javascript

var s = document.createElement('script');
s.crossOrigin = 'anonymous';
s.integrity="sha384-????????";
s.onerror = function() {
  // 打点上报劫持数据
  var img = document.createElement('img');
  img.src = 'http://xxx.com?url='+s.src;
  document.body.appendChild(img);

  // 更换其他域名下载地址
  s.src = 'http://?????????';  
};
s.onload = function() {
  console.log($);
}
//CDN地址
s.src = 'http://??????????';
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 的签名是一致的,而且由于向后兼容不影响不支持的版本,所以我们也可以利用起来。

最后编辑于: 2019 年 07 月 29 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码