前端，如何应对流量劫持

面对流量劫持，我们前端能做什么？

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