使用 SRI 解决 CDN 劫持

最近项目频频遇到 CDN 劫持的事情，学习到能够经过 Subresource Integrity 的方式有效应对。

SRI 简介

SRI 全称 Subresource Integrity - 子资源完整性，是指浏览器经过验证资源的完整性（一般从 CDN 获取）来判断其是否被篡改的安全特性。

经过给 link 标签或者 script 标签增长 integrity 属性便可开启 SRI 功能，好比：

<script type="text/javascript" src="//s.url.cn/xxxx/aaa.js" integrity="sha256-xxx sha384-yyy" crossorigin="anonymous"></script>
复制代码

integrity 值分红两个部分，第一部分指定哈希值的生成算法（sha25六、sha384 及 sha512），第二部分是通过 base64 编码的实际哈希值，二者之间经过一个短横（-）分割。integrity 值能够包含多个由空格分隔的哈希值，只要文件匹配其中任意一个哈希值，就能够经过校验并加载该资源。上述例子中我使用了 sha256 和 sha384 两种 hash 方案。

备注：crossorigin="anonymous" 的做用是引入跨域脚本，在 HTML5 中有一种方式能够获取到跨域脚本的错误信息，首先跨域脚本的服务器必须经过 Access-Controll-Allow-Origin 头信息容许当前域名能够获取错误信息，而后是当前域名的 script 标签也必须声明支持跨域，也就是 crossorigin 属性。link、img 等标签均支持跨域脚本。若是上述两个条件没法知足的话， 可使用 try catch 方案。

为何要使用 SRI

在 Web 开发中，使用 CDN 资源能够有效减小网络请求时间，可是使用 CDN 资源也存在一个问题，CDN 资源存在于第三方服务器，在安全性上并不彻底可控。

CDN 劫持是一种很是难以定位的问题，首先劫持者会利用某种算法或者随机的方式进行劫持（狡猾大大滴），因此很是难以复现，不少用户出现后刷新页面就再也不出现了。以前公司有同事作游戏的下载器就遇到这个问题，用户下载游戏后解压不能玩，后面经过文件逐一对比找到缘由，原来是 CDN 劫持致使的。怎么解决的呢？据说是找 xx 交了保护费，后面也是利用文件 hash 的方式，想必原理上也是跟 SRI 相同的。

所幸的是，目前大多数的 CDN 劫持只是为了作一些夹带，好比经过 iframe 插入一些贴片广告，若是劫持者别有用心，好比 xss 注入之类的，仍是很是危险的。

开启 SRI 能有效保证页面引用资源的完整性，避免恶意代码执行。

浏览器如何处理 SRI

• 当浏览器在 script 或者 link 标签中遇到 integrity 属性以后，会在执行脚本或者应用样式表以前对比所加载文件的哈希值和指望的哈希值。
• 当脚本或者样式表的哈希值和指望的不一致时，浏览器必须拒绝执行脚本或者应用样式表，而且必须返回一个网络错误说明得到脚本或样式表失败。

使用 SRI

经过使用 webpack 的 html-webpack-plugin 和 webpack-subresource-integrity 能够生成包含 integrity 属性 script 标签。

import SriPlugin from 'webpack-subresource-integrity'
 
const compiler = webpack({
    output: {
        crossOriginLoading: 'anonymous',
    },
    plugins: [
        new SriPlugin({
            hashFuncNames: ['sha256', 'sha384'],
            enabled: process.env.NODE_ENV === 'production',
        })
    ]
})
复制代码

那么当 script 或者 link 资源 SRI 校验失败的时候应该怎么作呢？

比较好的方式是经过 script 的 onerror 事件，当遇到 onerror 的时候从新 load 静态文件服务器之间的资源：

<script type="text/javascript" src="//11.url.cn/aaa.js"
        integrity="sha256-xxx sha384-yyy"
        crossorigin="anonymous"
        onerror="loadScriptError.call(this, event)"
        onsuccess="loadScriptSuccess"></script>
复制代码

在此以前注入如下代码：

(function () {
	function loadScriptError (event) {
		// 上报
		...
		// 从新加载 js
		return new Promise(function (resolve, reject) {
			var script = document.createElement('script')
			script.src = this.src.replace(/\/\/11.src.cn/, 'https://x.y.z') // 替换 cdn 地址为静态文件服务器地址
			script.onload = resolve
			script.onerror = reject
			script.crossOrigin = 'anonymous'
			document.getElementsByTagName('head')[0].appendChild(script)
		})
	}
	function loadScriptSuccess () {
		// 上报
		...
	}
	window.loadScriptError = loadScriptError
	window.loadScriptSuccess = loadScriptSuccess
})()
复制代码

比较痛苦的是 onerror 中的 event 中没法区分到底是什么缘由致使的错误，多是资源不存在，也多是 SRI 校验失败，固然出现最多的仍是请求超时，不过目前来看，除非有统计需求，无差异对待并无多大问题。

注入 onerror 事件

固然，因为项目中的 script 标签是由 webpack 打包进去的，因此咱们要使用 script-ext-html-webpack-plugin 将 onerror 事件和 onsuccess 事件注入进去：

const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')

module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin(),
    new SriPlugin({
      hashFuncNames: ['sha256', 'sha384']
    }),
	new ScriptExtHtmlWebpackPlugin({
	  custom: {
	    test: /\/*_[A-Za-z0-9]{8}.js/,
	    attribute: 'onerror',
	    value: 'loadScriptError.call(this, event)'
	  }
	}),
	new ScriptExtHtmlWebpackPlugin({
	  custom: {
	    test: /\/*_[A-Za-z0-9]{8}.js/,
	    attribute: 'onsuccess',
	    value: 'loadScriptSuccess.call(this, event)'
	  }
	})
  ]
}
复制代码

而后将 loadScriptError 和 loadScriptSuccess 两个方法注入到 html 中，可使用 inline 的方式。

如何判断发生 CDN 劫持？

前面说到 script 加载失败多是因为多种缘由形成的，那如何是否判断发生了 CDN 劫持呢？

方法就是再请求一次数据，比较两次获得文件的内容（固然没必要所有比较），若是内容不一致，就能够得出结论了。

function loadScript (url) {
	return fetch(url).then(res => {
		if (res.ok) {
			return res
		}
		return Promise.reject(new Error())
	  }).then(res => {
	  	return res.text()
	}).catch(e => {
		return ''
	})
}
复制代码

比较两次加载的 script 是否相同

function checkScriptDiff (src, srcNew) {
	return Promise.all([loadScript(src), loadScript(srcNew)]).then(data => {
		var res1 = data[0].slice(0, 1000)
		var res2 = data[1].slice(0, 1000)
		if (!!res1 && !!res2 && res1 !== res2) {
			// CDN劫持事件发生
		}
	}).catch(e => {
		// ...
	})
}
复制代码

这里为何只比较前 1000 个字符？由于一般 CDN 劫持者会在 js 文件最前面注入一些代码来达到他们的目的，注入中间代码须要 AST 解析，成本较高，因此比较所有字符串没有意义。若是你仍是有顾虑的话，能够加上后 n 个字符的比较。

最后

还在知乎上看到一位大神另辟蹊径，经过相似 jsonp 的方式解决 CDN 劫持。我的感受这种方式目前可以完美应对 CDN 劫持的主要缘由是运营商经过文件名匹配的方式进行劫持，做者的方式就是经过 onerror 检测拦截，而且去掉资源文件的 js 后缀以应对 CDN 劫持。

应对流量劫持，前端能作哪些工做？

这篇文章思路清晰，很是推荐学习。

---

《IVWEB 技术周刊》 震撼上线了，关注公众号：IVWEB社区，每周定时推送优质文章。

• 周刊文章集合: weekly