前端,如何应对流量劫持

面对流量劫持,我们前端能做什么?

1.如果文件被劫持了,浏览器的srihash校验会失败,触发onerror事件回调,
2.然后多次拉取文件,第一次拉取的是缓存里面的,第二次拉取带上参数时间戳,拿到无缓存的,diff size,
3.收集客户端信息。,js url,js文件内容
4.我们可以把onerror收回来的这一条条信息入库,然后分析出报错的运营商,报错的代码类型有多少种,客户分布情况等等。然后再结合页面的pv,就可以看到劫持的流量趋势了。

解决:保证cdn全链路https,onerror发生时,改为拉取本地项目里面的js,
上面是js文件被劫持的情况,另外一种如果是document里面追加了script标签,用MutationObserver对象监听,判断追加了Script节点 的src属性 ,如果不在白名单内,说明呗劫持了,

function errorhandle(e){
  
    console.error('流量被劫持了!',e)
   var ajax= new XMLHttpRequest();
   ajax.open("GET",'https://cdn.bootcss.com/vue/2.6.10/vue.js');
   ajax.send(null);

   ajax.onreadystatechange = function () {
     
        if (ajax.readyState == 4 && ajax.status == 200) {
           console.log('拉取成功')
           var size=ajax.responseText.length;
           console.log('首次拉取文件的size是:::',size)
        }
        else {
          console.error('拉取失败')
        }
    }

}
//完整的正确integrity
    </script>
<!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js" integrity="sha384-9u9lzb/hr8e14GLHe5TEOrTiH3Qtw5DX2Zw9X/g7cqj81W2McEMx5CKOszxdb8jg" crossorigin="anonymous"></script> -->
//错误的integrity
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js" onerror="errorhandle(this)" integrity="sha384-9u9lzb/hr8e14GLHe5TEOrTiH3Qtw5DX2Zw9X/" crossorigin="anonymous"></script>
附上在线生成SRI hash的网站 https://www.srihash.org

转载于:https://www.jianshu.com/p/8475cef90b5c

猜你喜欢

转载自blog.csdn.net/weixin_33728268/article/details/91340499
今日推荐