網路安全-XSS

weixin_33861800發表於2018-01-12

XSS介紹

原文地址：github.com/CodeLittleP…

維基百科： 跨站指令碼（英語：Cross-site scripting，通常簡稱為：XSS）是一種網站應用程式的安全漏洞攻擊，是程式碼注入的一種。它允許惡意使用者將程式碼注入到網頁上，其他使用者在觀看網頁時就會受到影響。

比如，一個網站的評論區，使用者可以輸入<script>標籤，如圖： 點選submit傳送內容，如果前端後端都沒有做任何處理的話，這段評論在提交以後就會原封不動地展示在html上。而這個時候，script裡的程式碼執行了，導致所有訪問這個頁面的使用者的cookie都傳送到了黑客指定的API。

解決思路

前端

提交過程

前端對於這種情況好像在傳送到後端的過程中無能為力，即使在流程中加上前端轉譯，黑客也可以通過直接在控制檯執行js的方式來提交評論。

渲染過程

前端倒是在渲染的時候可以做相應的處理，比如可以用以下方法處理：

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

這樣就能處理掉非法符號了（程式碼僅列舉了部分符號）。 &amp; &lt; &gt;這些字元叫做字元實體因為比如< >這樣的字元遊覽器會認為是標籤，所以，如果想正常顯示< >，那麼就得轉成字元實體，而遊覽器預設也認識這些字元，在展示的時候，還是展示成字元實體對應的符號。 對於渲染階段，像react，vue這樣的庫，又或者是juicer，ejs這樣的前端模板，都會預設處理非法符號為字元實體。 字元實體詳解可以看這裡>>

後端

提交過程

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

渲染過程

這裡的渲染指的是後端模板渲染，渲染模板可能是smarty，可能是laravel的blade，可能是node做中間層用的ejs，亦可能是vue或react的SSR。這些後端模板都自己內部會做轉義。 轉義的實現方法也無非是通過正則匹配，然後進行替換。

例外

在遇到富文字編輯器的時候，處理方法就不同了。因為，在前端展示的時候，我們自然是有什麼標籤就展示什麼標籤，而不是轉為字元實體，不然得到的不都是文字了嘛。 這種情況的話，就需要後端進行非法字元過濾了，把比如script這種標籤給過濾掉，或者轉義掉。當然，其實富文字還有很多過濾條件，比如，非本站的網頁地址過濾，非法字元過濾等。

總結

總之，無論是後端模板還是前端模板，其實都是前端的範疇。 上面也說了，現在的前端庫、前端模板、後端模板，都已經內部做了轉譯了，開發者愉快的使用就好了。 所以，其實除了遇到富文字編輯器的情況（工作量在後端），我們幾乎不用做任何額外的工作。但是，還是理解內部機制比較好。

相關文章