前端頁面JS注入問題，前端JS注入解決辦法

在頁面中增加 JS 校驗，對特殊符號進行替換，防止用戶輸入惡意代碼導致 JS 注入問題。

在 web 開發中，對用戶輸入的內容做校驗是必不可少的環節，不管是通過正則表達式對用戶的輸入進行校驗，還是通過對特殊符號進行轉義，均可達到目的。通過正則表達式校驗，可能會導致用戶體驗差一點（因爲用戶不能自由輸入~~），本文通過對 特殊符號進行轉義 的方法來演示。

示例

自定義添加角色，包括角色名稱、角色描述

1.1 未對特殊符號進行替換，直接保存到數據庫。

在輸入框中輸入僞惡意代碼，點擊保存，去列表頁面查看效果如下

首先會彈框，說明惡意代碼執行了。

數據顯示錯位或者不完整，用戶體驗差，會被老闆罵。

數據庫中存儲的是用戶輸入的原始字符

1.2 在提交表單前或者發送 ajax 請求前，對用戶輸入的值做校驗，並對特殊符號進行替換。

js 函數代碼如下

function replaceStr(a) {
    a = a.replace(/(<br[^>]*>| |\s*)/g, '')
        .replace(/\&/g,"&amp;")
        .replace(/\"/g,"&quot;")
        .replace(/\'/g,"&#39;")
        .replace(/\</g,"&lt;")
        .replace(/\>/g,"&gt;");
    return a;
}

本示例中是通過 form 表單進行提交的，所以在 form 表單提交前，對錶單屬性的值進行了 replace。同樣，通過常規的 ajax 請求，也可以在提交請求前，對參數的 value 進行 replace 再提交。

再次執行 1.1 中的添加角色步驟，查看頁面效果和數據庫存儲情況。

經過特殊符號替換後，頁面顯示正常，沒有彈框、數據錯位等問題

查看此時數據庫中存儲的數據：
數據庫中存儲的是經過轉義過後的特殊字符，這樣當數據在頁面上顯示的時候，就不會出現 js 注入的問題

所以，web 開發中，對於用戶可以自由輸入的地方，一定要做校驗和處理，因爲你不知道你的用戶是不是也懂一點 JavaScript。

經驗有限，如果紕漏或錯誤，歡迎指正！