关闭

JavaScript防流量劫持【前端安全】

时间: 2019-02-15阅读: 1097标签: 安全

劫持产生的原因和方式

在网页开发的访问过程中,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 范围内的结构变化

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,运营商的劫持无法达到目的,自然不会去做这样吃力不讨好的事情。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2027

关闭

网络安全的新方向_边缘计算

分布式、无所不在的计算基础设施可能以更大的攻击面为代价。通过采用边缘计算,公司将一些处理转移到外围,更靠近需要工作的地方,以提高性能、减少网络流量和减少延迟。这带来了一系列网络安全挑战,常规数据中心运营商可能无法应对。

什么是SSL证书?SSL证书的好处

互联网发展至今,已经让人们对它产生了很大的依赖,很多交易都是在网上进行的。然而,网络攻击事件也在与日俱增,网络安全已经成为一件大事,这就不得不用到SSL证书了。

Web安全测试检查单

Web安全测试检查单。上传功能:绕过文件上传检查功能,上传文件大小和次数限制。注册功能:注册请求是否安全传输,注册时密码复杂度是否后台检验,激活链接测试

9项你不得不知道的Kubernetes安全最佳实践

由于Kubernetes控制台中的配置错误,特斯拉被一个恶意挖掘加密货币的软件所感染。***者利用了特定Kubernetes控制台没有密码保护的这一漏洞,访问其中一个包含特斯拉大型AWS环境访问凭据的pod。

贯彻 10 项原则,构建 Linux 系统安全体系

通过大量的实践经验,我们总结出 10 个最关键且有效的安全原则,分别是纵深防御、运用 PDCA 模型、最小权限法则、白名单机制、安全的失败、避免通过隐藏来实现安全、入侵检测、不要信任基础设施

前端用v-html影响安全性

你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值。使用 <pre> 标签替换掉 <div> 标签。

30 分钟理解 CORB 是什么

我当前的 chrome 版本是 v68,如果是 v66 或更低版本可能提示的警告信息略有不同。印象中只对 CORS 比较熟悉,CORB 是个什么鬼?好奇心迫使我想要了解一下它到底是什么,于是暂时把手头工作放下查了一些资料并花时间汇总了一下,就有了这篇文章

AJAX请求真的不安全么?谈谈Web安全与AJAX的关系。

AJAX请求真的不安全么?AJAX请求哪里不安全?怎么样让AJAX请求更安全?本文包含的内容较多,包括AJAX,CORS,XSS,CSRF等内容,要完整的看完并理解需要付出一定的时间。

访问http网站Safari提示网站不安全怎么办?

macOS和iOS上的Safari在所有通过HTTP连接的地址栏中会显示“不安全”的警告。去年,谷歌Chrome和火狐MozillaFirefox是最先显示这种警告的主流浏览器。

叮咚生活官网,叮咚生活软件安全吗?

刷信用卡时爽的不行,还信用卡时头疼的要命,这恐怕是很多刷卡族的共性,也是不少普通收入的人面对信用卡账单时的一些痛点。那么,有没有更好的方法,既能让我们刷卡爽,还能让我们不为还款头疼呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!