流量劫持一般分为两种:http劫持、DNS劫持
1、HTTP劫持
当我们使用HTTP请求请求一个网站页面的时候,网络运营商会在正常的数据流中插入精心设计的网络数据报文,让客户端(通常是浏览器)展示“错误”的数据,通常是一些弹窗,宣传性广告或者直接显示某网站的内容,大家应该都有遇到过。
2、DNS劫持
我们通过域名访问网页的时候,都需要通过DNS服务器把域名解析到对应的服务器地址上,而用户上网的DNS服务器都是运营商分配的。所以,在这个节点上,运营商可以为所欲为。
对于以上的劫持方式,我们作为前端的开发人员,通过javascript如何来做到有效的防护呢?
对于DNS劫持,由于发生在域名解析的时候,我们无法控制,javascript更无能为力。我们能做的就是拿起手机,投诉网络运营商,或者直接打工信部电话(12300)投诉。
http劫持防范
对于http劫持,运营商在实现上一般有以下几种做法
1、iframe嵌套展示原来正常网页
2、在原html中插入js,再通过js脚本安插广告
3、直接返回一个带广告的HTML
解决方式
首先我们来看页面被嵌入了 iframe 的情况。网络运营商为了尽可能地减少植入广告对原有网站页面的影响,通常会通过把原有网站页面放置到一个和原页面相同大小的 iframe 里面去,那么就可以通过这个 iframe 来隔离广告代码对原有页面的影响。这种情况比较容易处理。我们只要判断我们的页面是否被嵌套在iframe中即可。Window对象中有两个属性self(指向本身的窗口),top(指向顶层的窗口)可以帮我们来识别判断
if (window.self != window.top) { var url = location.href; top.location = url; }但是有时候我们在实际业务中,我们的页面确实需要被嵌套在iframe中推广,上面的判断会导致页面无法嵌套,这时候我们可以采用配置域名白名单的方式来解决
var avoidIframeNest = { whiteList : [], init: function(whiteList){ if(Object.prototype.toString.call(whiteList) == "[object Array]"){ this.whiteList = whiteList; } this.redirect(); }, redirect: function(){ if(self != top){ var parentUrl = document.referrer; //是否在白名单内 for(var i = 0 ,length = this.whiteList.length ; i < length ; ++ i){ var reg = new RegExp(this.whiteList[i],'i'); if(reg.test(parentUrl)){ return; } } //页面跳转 var url = location.href; top.location = url; } } }
对于js注入问题,一般都会在页面中插入图片标签,展示广告,诱导用户点击。针对这种方式,我们可以通过监控页面插入的图片内容来检测。这里,我们可以利用HTML5的新特性MutationObserver 和window下的DOMNodeInserted事件
Mutation Observer(变动观察器)是监视DOM变动的接口。当DOM对象树发生任何变动时,Mutation Observer会得到通知。具体的介绍可以参考:
转载地址:https://www.cnblogs.com/caizhenbo/p/6836376.html