劫持产生的原因和方式

在网页开发的访问过程中,http是我们主要的访问协议。我们知道http是一种无状态的连接。即没有验证通讯双方的身份,也没有验证信息的完整性,所以很容易受到篡改。运营商就是利用了这一点篡改了用户正常访问的网页,插入广告或者其他一些杂七杂八的东西,达到盈利的目的。

运营商的一般做法有以下手段:

1、对正常网站加入额外的广告,这包括网页内浮层或弹出广告窗口;

2、针对一些广告联盟或带推广链接的网站,加入推广尾巴;

3、把我们的站点非法解析到其他的站点,比如我们在浏览器输入http://baidu.com,百度绑定的服务器ip地址是111.13.101.208,此时如果运营商的dns服务器将baidu.com的对应的ip地址改为qq的服务器ip 14.17.32.211,我们输入http://baidu.com就会跳转到QQ的页面。

以上的手段,通过原理归纳为两种

1、HTTP劫持

当我们使用HTTP请求请求一个网站页面的时候,网络运营商会在正常的数据流中插入精心设计的网络数据报文,让客户端(通常是浏览器)展示“错误”的数据,通常是一些弹窗,宣传性广告或者直接显示某网站的内容,大家应该都有遇到过。做法1、2就是通过这种方式

2、DNS劫持

我们通过域名访问网页的时候,都需要通过DNS服务器把域名解析到对应的服务器地址上,而用户上网的DNS服务器都是运营商分配的。所以,在这个节点上,运营商可以为所欲为。做法3就是通过这种方式

对于以上的劫持方式,我们作为前端的开发人员,通过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;
}
}
}

通过配置白名单的方式,比较适合于我们经常用到的域名,通常我们会遇到这样的需求,合作方要求嵌套我们的页面,我们如果将合作方也加入到我们白名单,一方面会导致白名单很长,另一方面我们需要手动去改代码,这样很不方便。这种情况,我们可以在嵌套的url上加上域名的参数判断,要求嵌套页面带上域名参数,如果匹配,就认为合法。

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;
}
} //判断URL是否带指定参数
var iframeDomain = this.getUrlParam('iframe_domain');
if(iframeDomain && parentUrl.indexOf(iframeDomain) != -1){
return;
}
//页面跳转
var url = location.href;
top.location = url;
}
},
getUrlParam : function(key) {
var regStr = "^.*[\\?|\\&]" + key + "\\=([^\\&]*)",
url = location.href;
reg = new RegExp(regStr,'i');;
var ret = url.match(reg);
if (ret != null) {
return decodeURIComponent(ret[1]);
} else {
return "";
}
}
} avoidIframeNest.init(['baidu.com']);

通过上述的方法,基本可以解决iframe嵌套问题

对于js注入问题,一般都会在页面中插入图片标签,展示广告,诱导用户点击。针对这种方式,我们可以通过监控页面插入的图片内容来检测。这里,我们可以利用HTML5的新特性MutationObserver 和window下的DOMNodeInserted事件

Mutation Observer(变动观察器)是监视DOM变动的接口。当DOM对象树发生任何变动时,Mutation Observer会得到通知。具体的介绍可以参考:

可以监听某个 DOM 范围内的结构变化

http://www.cnblogs.com/jscode/p/3600060.html

DOMNodeInserted顾名思义,可以监听某个 DOM 范围内的结构变化,这个特性只有在firefox的低版本和webkit中使用,IE不支持,这里我们可以作为低版本浏览器的兼容实现。

var validInsertImg = {
httpReg : /^http:\/\/(.*\.baidu\.com|.*\.netwin\.com)\//,
//验证非法图片
validIllegalityImg : function(src){
var httpReg = this.httpReg;
return !httpReg.test(src);
},
init : function(){
this.monitor();
},
monitor: function(){
var MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
var mutationObserverSupport = !!MutationObserver;
//html5监控变化属性
if(!mutationObserverSupport){
this.mutationListen(MutationObserver);
}else{
this.insertedListen();
}
},
insertedListen : function(){
var that = this;
document.addEventListener('DOMNodeInserted', function(e) {
var dom = e ? e.srcElement : document.documentElement;
if (!dom.outerHTML) {
return;
}
var imgList = (dom.nodeName.toUpperCase() == 'IMG') ? [dom] : dom.getElementsByTagName('img');
if (!imgList || imgList.length == 0) {
return;
}
for (var i = 0; i < imgList.length; i++) {
that.removeNode(imgList[i]);
}
});
},
mutationListen: function(MutationObserver){
var that = this;
var observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
var nodes = mutation.addedNodes;
for(var i = 0 ; i < nodes.length ; i++){
var node = nodes[i];
that.removeNode(node);
}
})
})
observer.observe(document, {
subtree: true,
childList: true
}); }, //删除node
removeNode : function(node){
if(node.nodeName.toUpperCase() == 'IMG'){
var src = node.src;
if(this.validIllegalityImg(src)){
node.parentNode.removeChild(node);
console.log('拦截可疑静态脚本:', node.src);
}
}
}
} validInsertImg.init(); body = document.getElementsByTagName('body')[0];
var img = document.createElement('img');
img.setAttribute('src','http://m.baidu.com/img/b')
body.appendChild(img); var img1 = document.createElement('img');
img1.setAttribute('src','/YTRYTRY/A.PNG')
body.appendChild(img1);

对于在返回html内容中插入广告,我们可以借鉴注入的方式,进入页面就检测的img图片路径是否在白名单内

以上方法,都是针对运营商劫持的常用手段进行的一些黑科技操作。只能尽量的减少劫持给我们带来的负面影响。针对劫持问题,最好的办法就是全站升级https的方式,验证通讯双方的身份以及信息的安全性。

但是https也不能完全的解决劫持问题,如果https页面被劫持,浏览器会出现空白页面或者提示不安全,无法显示正常的内容。这也会影响到用户的体验。但是还是推荐使用https,如果大部分的网站都使用了https,运营商的劫持无法达到目的,自然不会去做这样吃力不讨好的事情。

原文:https://www.cnblogs.com/caizhenbo/p/6836376.html

【前端安全】JavaScript防流量劫持的更多相关文章

  1. 【前端安全】JavaScript防http劫持与XSS

    作为前端,一直以来都知道HTTP劫持与XSS跨站脚本(Cross-site scripting).CSRF跨站请求伪造(Cross-site request forgery).但是一直都没有深入研究过 ...

  2. 【前端安全】JavaScript防http劫持与XSS (转)

    作为前端,一直以来都知道HTTP劫持与XSS跨站脚本(Cross-site scripting).CSRF跨站请求伪造(Cross-site request forgery).但是一直都没有深入研究过 ...

  3. 【流量劫持】SSLStrip 的未来 —— HTTPS 前端劫持

    前言 在之前介绍的流量劫持文章里,曾提到一种『HTTPS 向下降级』的方案 -- 将页面中的 HTTPS 超链接全都替换成 HTTP 版本,让用户始终以明文的形式进行通信. 看到这,也许大家都会想到一 ...

  4. 【流量劫持】躲避 HSTS 的 HTTPS 劫持

    前言 HSTS 的出现,对 HTTPS 劫持带来莫大的挑战. 不过,HSTS 也不是万能的,它只能解决 SSLStrip 这类劫持方式.但仔细想想,SSLStrip 这种算劫持吗? 劫持 vs 钓鱼 ...

  5. WiFi流量劫持—— JS脚本缓存投毒

    在上一篇<WiFi流量劫持—— 浏览任意页面即可中毒>构思了一个时光机原型,让我们的脚本通过HTTP缓存机制,在未来的某个时刻被执行,因此我们可以实现超大范围的入侵了. 基于此原理,我们用 ...

  6. 关于全站https必要性http流量劫持、dns劫持等相关技术

    关于全站https必要性http流量劫持.dns劫持等相关技术 微信已经要求微信支付,申请退款功能必须12月7号之前必须使用https证书了(其他目前为建议使用https),IOS也是2017年1月1 ...

  7. 如何使用HTTPS防止流量劫持

    何为流量劫持 前不久小米等六家互联网公司发表联合声明,呼吁运营商打击流量劫持.流量劫持最直观的表现,就是网页上被插入了一些乱七八糟的广告/弹窗之类的内容.比如这样: 网页右下角被插入了游戏的广告. 流 ...

  8. Web如何应对流量劫持?

    虽然互联网经过多年的发展,可是网站使用的底层协议仍是 HTTP,HTTP 作为一种明文传播协议,所有的传输数据都是明文,我们都知道在通信中使用明文(不加密) 内容可能会被窃听,同时网站存在被劫持的风险 ...

  9. 拒绝流量劫持,全面使用 HTTPS!

    最近收到数个 BootCDN 用户的反馈:某些地区的宽带运营商劫持了部分 BootCDN 上的文件,并篡改文件加入了广告代码. 这种方式的流量劫持属于中间人攻击(Man-in-the-Middle A ...

随机推荐

  1. 20165236 《Java程序设计》第七周学习总结

    20165236 <Java程序设计>第七周学习总结 教材学习内容总结 第十一章  JDBC与MySQL数据库 1.MySQL数据库管理系统: MySQL数据库管理系统,简称MySQL,是 ...

  2. 前端框架之Vue(3)-计算属性

    计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ ...

  3. LigerUi折叠与展开

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. 将中文字符串分割为数组 解决str_split中文乱码php

    首先来介绍str_split()这个函数: 它的作用是将字符串分割为数组: 例如: $str='abcde';str_plite($str); 打印结果如下:Array(    [0] => a ...

  5. Swagger Editor本地安装

    一:安装Node JS 二:下载源码swagger-editor源码,解压 下载地址:https://github.com/swagger-api/swagger-editor 三:在解压目录下运行进 ...

  6. app刷新

    https://segmentfault.com/a/1190000006733978 优化TCP socket参数,包括:是否关闭快速回收.初始RTO.初始拥塞窗口.socket缓存大小.Delay ...

  7. System.Web.UI.Page的页面基类

    服务器端的page类 所有我们编写的页面都继承自page类,可见page类是非常重要的,page类提供了哪些功能,直接决定了我们的页面类可以继承什么功能,或者说,直接决定了我们的页面类功能的强大与否! ...

  8. SQL _ Create Procedure

    -- ================================================ -- Template generated from Template Explorer usi ...

  9. ElasticSearch6.2.3安装Head插件

    1.环境 Linux centos7 elasticsearch-head的zip包,github网址如下:https://github.com/mobz/elasticsearch-head nod ...

  10. python内置函数值 -- chr() ord()

    chr()接收一个数字, 找到这个数字对应的ascii里的元素(只能接受数字) a = chr(65) print(a) #结果: A ord()接收一个字符,返回这个字符对应的数字.(只能接受一个字 ...