前端安全（1）之HTTP劫持

什么是HTTP劫持呢，大多数情况是运营商HTTP劫持，当我们使用HTTP请求请求一个网站页面的时候，网络运营商会在正常的数据流中插入精心设计的网络数据报文，让客户端（通常是浏览器）展示“错误”的数据，通常是一些弹窗，宣传性广告或者直接显示某网站的内容，大家应该都有遇到过。

一般常见的http劫持就是运营商为了减少广告代码对网页源码的影响，而用于网页大小相同的iframe，那么就可以通过这个 iframe 来隔离广告代码对原有页面的影响。那么我们要做的就是判断我们的页面是否被iframe引用，如果遭到引用就重置url跳到自己正常的页面。

当我们的页面遇见这种情况时(iframe嵌套)，我们该怎么办：

<script type="text/javascript">
		var top = window.top;//获取顶部对象
		var self = window.self;//返回一个正常的window引入对象
		if(top!=self){
			var url = location.href;//获取正常页面的url
			top.location = url;//将顶层对象的url重定向打正常页面
		}
</script>

但是在一些情况，由于运营的需要，我们的页面可能会被推广，那我们可以对上面方法进行改造，加入白名单。但我们的页面被白名单嵌套时，我们可以放行，不进行url的重定向。

function selfInspect(){
		var top = window.top; //获取顶部对象
		var self = window.self; //返回一个正常的window引入对象
		// 建立白名单
		var whiteList = [
			'www.a.html?',
			'res.bbb.com'
		];
		if(self != top) {
			var
				// 使用 document.referrer 可以拿到跨域 iframe 父页面的 URL
				parentUrl = document.referrer,
				length = whiteList.length,
				i = 0;
               console.log(parentUrl)
			for(; i < length; i++) {
				// 建立白名单正则
				var reg = new RegExp(whiteList[i], 'i');

				// 存在白名单中，放行
				if(reg.test(parentUrl)) {
					return
				}
			}

			// 我们的正常页面
			var url = location.href;
			// 父级页面重定向
			top.location = url;
		}
		}
		selfInspect()

如果在我们页面被多层嵌套呢，现在中确实存在这种情况。但是通常被运营商嵌套过的页面都会在url中留下参数，如www.a.com?iframe=1,iframe=1表示页面已经被劫持过了，就不再嵌套 iframe 了。所以根据这个特性，我们可以改写我们的 URL ，使之看上去已经被劫持了：

                                var flag = 'iframe';
				var parts = url.split('#');
				if(location.search) {
					parts[0] += '&' + flag + '=1';
				} else {
					parts[0] += '?' + flag + '=1';
				}
				try {
					top.location.href = parts.join('#');
				} catch(e) {
				}

当然，如果这个参数一改，防嵌套的代码就失效了。所以我们还需要建立一个上报系统，当发现页面被嵌套时，发送一个拦截上报，即便重定向失败，也可以知道页面嵌入 iframe 中的 URL，根据分析这些 URL ，不断增强我们的防护手段，这个后文会提及。