網絡安全-XSS

XSS介紹

原文請看個人GitHub博客>>

維基百科：
跨站腳本（英語：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。這些後端模板都本身內部會作轉義。
轉義的實現方法也無非是經過正則匹配，而後進行替換。

總結

總之，不管是後端模板仍是前端模板，其實都是前端的範疇，因此，XSS的防護前端是關鍵。