前言
加载一个web页面，可能会请求各种静态资源，比如图片，js，css等，但是很有可能加载了一些意料之外的东西，比如一段恶意脚本，或者一个广告等等。尤其是你的页面依赖第三方的东西的时候变得更加不可控。
常见的意外
-
看个小说吧
image.png
卧槽，这咋还有棋牌，很多时候就一不小心点进去了，而且还很可能自动开始下载。
-
刷个微博
image.png
诶，还有诱人小广告（你动心了吗）。
- 随便看点啥吧
还是悄悄地出现了，并且引起了我的注意。
广告有些是网站自己有广告位的，这些是正常的，但是总有些是意外的产出，比如运营商劫持，使用https势在必行，它可以帮我们解决掉大多数的问题。
https全搞定？
前一段时间event-stream 事件引起了广大猿人的注意，event-stream被很多的前端流行框架和库使用，每月有几千万的下载量。不怕贼偷就怕贼惦记啊！
最简单写一个：
对于一些“意外”的资源请求多数都是用户反馈我们才得知，但是具体情况一概不知。如何监听甚至是解决呢？
监控dom的一举一动
MutationObserver这个东西大家或许听过，它提供了监控dom的能力，举个例子：
- 首先我们把监控代码写好，当页面有增加script 标签，并且有src属性的时候打log。
- 打开浏览器运行一下
可以看到控制台输出了我们想要的东西，此处我们就可以做一些常规上报了。
除此之外我们还可以做一些其他东西，比如：
- 异常的a标签链接
当我们监测到异常的a标签可以及时删除掉。
- 异常的iframe插入
- 元素显示内容变化记录
注意：这里MutationObserver只兼容到IE11，对于低版本的可以使用Mutation events，但是这个事件性能不是很好，这里就不在详细介绍。
虽然我们监控到了有异常资源，但是依然发出了请求，还有什么办法吗？
防守大闸-CSP
CSP策略，全称Content Security Policy，很多人把它喻为XSS攻击的终结者，因为这种策略不再像传统只靠各种正则和特征匹配来识别跨站攻击Payload，而是直接从协议层把一些存在安全隐患的用法默认干掉，把同源同域更发挥到了极致。
比如你的站点js文件请求域名都是a.cdn.cn，那么添加csp策略之后，所以其他域名的js请求全都会被拦截。
直接拦截掉，异常js请求
添加方式：
- meta标签
- 在返回头信息中添加content-security-policy字段
第一种方式我写了个简单的webpack插件，CSPPlugin，可以拿来直接使用。目前来说貌似只有知乎和github使用了这种策略，因为它实在是太严格了。
小结
网页千万个，安全第一位。
平时不注意，后果很严重。
