监控页面的资源请求

前言

加载一个web页面，可能会请求各种静态资源，比如图片，js，css等，但是很有可能加载了一些意料之外的东西，比如一段恶意脚本，或者一个广告等等。尤其是你的页面依赖第三方的东西的时候变得更加不可控。

常见的意外

• 看个小说吧

  
  image.png

卧槽，这咋还有棋牌，很多时候就一不小心点进去了，而且还很可能自动开始下载。

• 刷个微博

  
  image.png

诶，还有诱人小广告（你动心了吗）。

• 随便看点啥吧

image.png

还是悄悄地出现了，并且引起了我的注意。

广告有些是网站自己有广告位的，这些是正常的，但是总有些是意外的产出，比如运营商劫持，使用https势在必行，它可以帮我们解决掉大多数的问题。

https全搞定？

image.png

前一段时间event-stream 事件引起了广大猿人的注意，event-stream被很多的前端流行框架和库使用，每月有几千万的下载量。不怕贼偷就怕贼惦记啊！
最简单写一个：

image.png

对于一些“意外”的资源请求多数都是用户反馈我们才得知，但是具体情况一概不知。如何监听甚至是解决呢？

监控dom的一举一动

MutationObserver这个东西大家或许听过，它提供了监控dom的能力，举个例子：

• 首先我们把监控代码写好，当页面有增加script 标签，并且有src属性的时候打log。

image.png

• 打开浏览器运行一下

image.png

可以看到控制台输出了我们想要的东西，此处我们就可以做一些常规上报了。

除此之外我们还可以做一些其他东西，比如：

1. 异常的a标签链接
   当我们监测到异常的a标签可以及时删除掉。

image.png

2. 异常的iframe插入
3. 元素显示内容变化记录

注意：这里MutationObserver只兼容到IE11，对于低版本的可以使用Mutation events，但是这个事件性能不是很好，这里就不在详细介绍。

image.png

虽然我们监控到了有异常资源，但是依然发出了请求，还有什么办法吗？

防守大闸-CSP

CSP策略，全称Content Security Policy，很多人把它喻为XSS攻击的终结者，因为这种策略不再像传统只靠各种正则和特征匹配来识别跨站攻击Payload，而是直接从协议层把一些存在安全隐患的用法默认干掉，把同源同域更发挥到了极致。
比如你的站点js文件请求域名都是a.cdn.cn，那么添加csp策略之后，所以其他域名的js请求全都会被拦截。

image.png

直接拦截掉，异常js请求

image.png image.png

添加方式：

1. meta标签
2. 在返回头信息中添加content-security-policy字段

第一种方式我写了个简单的webpack插件，CSPPlugin，可以拿来直接使用。目前来说貌似只有知乎和github使用了这种策略，因为它实在是太严格了。

小结

网页千万个，安全第一位。
平时不注意，后果很严重。

image.png