使用SRI属性,防止CDN劫持托管的js/css等静态文件

SRI 全称是 Subresource Integrity，目的是防止CDN资源被污染或劫持而导致的 XSS 漏洞的方案。

当浏览器检测加载的文件签名与给定的签名不一致时，会拒绝加载文件。

支持SRI的浏览器,看下面的链接:
https://caniuse.com/#search=SRI

如何使用SRI
a 静态调用SRI:

<script 
    crossorigin="anonymous" 
    integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I7f" 
    src="https://domain.com/jquery/3.2.1/jquery.min.js"
> </script>

b 动态调用:
如果CDN的文件被禁止加载,那么我们可以通过fallback请求本站资源

var s = document.createElement('script');
s.crossOrigin = 'anonymous';
s.integrity="sha384-qu2J8HSjv8EaYlbzBdbVeJncuCmfBqnZ4h3UIBZ9WTZ/5Wrqt0/9hofL0047NCkc";
s.onerror = function() {
  // 错误时上报劫持数据
  var img = document.createElement('img');
  img.src = 'https://yoursite.com?url='+s.src;
  document.body.appendChild(img);

  // 更换本地资源下载地址
  s.src = 'https://localhost.com/jquery.min.js';  
};
s.onload = function() {
  console.log($);
}
s.src = 'https://cdndomain.com/jquery/1.2.0/jquery.min.js';
document.head.appendChild(s);

利用CSP 3获得与SRI相同的防劫持功能
CSP 的好处是向后兼容,对浏览器要求不高,但是设置比较麻烦

你需要在apache/nginx上面设置header,以白名单的形式启用
如何添加header请搜索apache/nginx教程

Content-Security-Policy: script-src 'sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW4I2f'

另外,附赠在线生成SRI签名的网站
https://www.srihash.org/
good luck!