前言
加載一個(gè)web頁(yè)面某筐，可能會(huì)請(qǐng)求各種靜態(tài)資源，比如圖片艾疟，js来吩，css等，但是很有可能加載了一些意料之外的東西蔽莱，比如一段惡意腳本弟疆，或者一個(gè)廣告等等。尤其是你的頁(yè)面依賴第三方的東西的時(shí)候變得更加不可控盗冷。
常見(jiàn)的意外
-
看個(gè)小說(shuō)吧
image.png
臥槽怠苔，這咋還有棋牌，很多時(shí)候就一不小心點(diǎn)進(jìn)去了仪糖，而且還很可能自動(dòng)開(kāi)始下載柑司。
-
刷個(gè)微博
image.png
誒，還有誘人小廣告（你動(dòng)心了嗎）锅劝。
- 隨便看點(diǎn)啥吧
還是悄悄地出現(xiàn)了攒驰，并且引起了我的注意。
廣告有些是網(wǎng)站自己有廣告位的故爵，這些是正常的玻粪，但是總有些是意外的產(chǎn)出，比如運(yùn)營(yíng)商劫持，使用https勢(shì)在必行劲室，它可以幫我們解決掉大多數(shù)的問(wèn)題伦仍。
https全搞定？
前一段時(shí)間event-stream 事件引起了廣大猿人的注意很洋，event-stream被很多的前端流行框架和庫(kù)使用充蓝，每月有幾千萬(wàn)的下載量。不怕賊偷就怕賊惦記昂泶拧谓苟！
最簡(jiǎn)單寫(xiě)一個(gè)：
對(duì)于一些“意外”的資源請(qǐng)求多數(shù)都是用戶反饋我們才得知，但是具體情況一概不知线定。如何監(jiān)聽(tīng)甚至是解決呢娜谊？
監(jiān)控dom的一舉一動(dòng)
MutationObserver這個(gè)東西大家或許聽(tīng)過(guò)，它提供了監(jiān)控dom的能力斤讥，舉個(gè)例子：
- 首先我們把監(jiān)控代碼寫(xiě)好纱皆，當(dāng)頁(yè)面有增加script 標(biāo)簽，并且有src屬性的時(shí)候打log芭商。
- 打開(kāi)瀏覽器運(yùn)行一下
可以看到控制臺(tái)輸出了我們想要的東西派草，此處我們就可以做一些常規(guī)上報(bào)了。
除此之外我們還可以做一些其他東西铛楣，比如：
- 異常的a標(biāo)簽鏈接
當(dāng)我們監(jiān)測(cè)到異常的a標(biāo)簽可以及時(shí)刪除掉近迁。
- 異常的iframe插入
- 元素顯示內(nèi)容變化記錄
注意：這里MutationObserver只兼容到IE11，對(duì)于低版本的可以使用Mutation events簸州，但是這個(gè)事件性能不是很好鉴竭，這里就不在詳細(xì)介紹。
雖然我們監(jiān)控到了有異常資源岸浑，但是依然發(fā)出了請(qǐng)求搏存，還有什么辦法嗎？
防守大閘-CSP
CSP策略矢洲，全稱Content Security Policy璧眠，很多人把它喻為XSS攻擊的終結(jié)者，因?yàn)檫@種策略不再像傳統(tǒng)只靠各種正則和特征匹配來(lái)識(shí)別跨站攻擊Payload读虏，而是直接從協(xié)議層把一些存在安全隱患的用法默認(rèn)干掉责静，把同源同域更發(fā)揮到了極致。
比如你的站點(diǎn)js文件請(qǐng)求域名都是a.cdn.cn盖桥，那么添加csp策略之后灾螃，所以其他域名的js請(qǐng)求全都會(huì)被攔截。
直接攔截掉揩徊，異常js請(qǐng)求
添加方式：
- meta標(biāo)簽
- 在返回頭信息中添加content-security-policy字段
第一種方式我寫(xiě)了個(gè)簡(jiǎn)單的webpack插件睦焕，CSPPlugin藐握，可以拿來(lái)直接使用。目前來(lái)說(shuō)貌似只有知乎和github使用了這種策略垃喊，因?yàn)樗鼘?shí)在是太嚴(yán)格了。
小結(jié)
網(wǎng)頁(yè)千萬(wàn)個(gè)袜炕，安全第一位本谜。
平時(shí)不注意，后果很嚴(yán)重偎窘。
