網絡安全-XSS

XSS介紹

原文地址：github.com/CodeLittleP…

維基百科： 跨站腳本（英語：Cross-site scripting，一般簡稱爲：XSS）是一種網站應用程序的安全漏洞攻擊，是代碼注入的一種。它容許惡意用戶將代碼注入到網頁上，其餘用戶在觀看網頁時就會受到影響。

好比，一個網站的評論區，用戶能夠輸入<script>標籤，如圖： 點擊submit發送內容，若是前端後端都沒有作任何處理的話，這段評論在提交之後就會原封不動地展現在html上。而這個時候，script裏的代碼執行了，致使全部訪問這個頁面的用戶的cookie都發送到了黑客指定的API。

解決思路

前端

提交過程

前端對於這種狀況好像在發送到後端的過程當中無能爲力，即便在流程中加上前端轉譯，黑客也能夠經過直接在控制檯執行js的方式來提交評論。

渲染過程

前端卻是在渲染的時候能夠作相應的處理，好比能夠用如下方法處理：

processedContent(comment) {
    return comment
        .replace(/&/g, "&")
	.replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
	.replace(/"/g, "&quot;")
	.replace(/'/g, "&#039;")
}
複製代碼

這樣就能處理掉非法符號了（代碼僅列舉了部分符號）。 & < >這些字符叫作字符實體由於好比< >這樣的字符遊覽器會認爲是標籤，因此，若是想正常顯示< >，那麼就得轉成字符實體，而遊覽器默認也認識這些字符，在展現的時候，仍是展現成字符實體對應的符號。 對於渲染階段，像react，vue這樣的庫，又或者是juicer，ejs這樣的前端模板，都會默認處理非法符號爲字符實體。 字符實體詳解能夠看這裏>>

後端

提交過程

後端在收到前端的提交之後，直接存起來就好。

渲染過程

這裏的渲染指的是後端模板渲染，渲染模板多是smarty，多是laravel的blade，多是node作中間層用的ejs，亦多是vue或react的SSR。這些後端模板都本身內部會作轉義。 轉義的實現方法也無非是經過正則匹配，而後進行替換。

例外

在遇到富文本編輯器的時候，處理方法就不一樣了。由於，在前端展現的時候，咱們天然是有什麼標籤就展現什麼標籤，而不是轉爲字符實體，否則獲得的不都是文本了嘛。 這種狀況的話，就須要後端進行非法字符過濾了，把好比script這種標籤給過濾掉，或者轉義掉。固然，其實富文本還有不少過濾條件，好比，非本站的網頁地址過濾，非法字符過濾等。

總結

總之，不管是後端模板仍是前端模板，其實都是前端的範疇。 上面也說了，如今的前端庫、前端模板、後端模板，都已經內部作了轉譯了，開發者愉快的使用就行了。 因此，其實除了遇到富文本編輯器的狀況（工做量在後端），咱們幾乎不用作任何額外的工做。可是，仍是理解內部機制比較好。