防御XSS攻擊-encode用戶輸入內容的重要性－互聯網

文章出處

一、開場先科普下XSS

跨站腳本攻擊(Cross Site Scripting)，為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫為XSS。惡意攻擊者往Web頁面里插入惡意Script代碼，當用戶瀏覽該頁之時，嵌入其中Web里面的Script代碼會被執行，從而達到惡意攻擊用戶的目的。

二、直接上代碼實例

在線演示：https://wall-wxk.github.io/blogDemo/2017/01/19/noEncode.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>encode防止xss攻擊</title>
</head>
<body>
    <input type="text" id="myInput" />
    <button onclick="toSubmit();">提交</button>
    <p id="myText" class="demo">hello world!</p>

    <script type="text/javascript">
        function toSubmit(){
            var myText = document.getElementById("myText"),
                myInput = document.getElementById("myInput"),
                inputValue = myInput.value;

            myText.innerHTML = inputValue;
        }

    </script>
</body>
</html>

實例解釋：這是網站生產環境抽離出來的簡化代碼。在公司的產品中，有很多輸入框提供給用戶輸入一些自定義字符串。方便用戶的同時，也會招惹一些黑客過來搗亂。最簡單的就是xss注入攻擊。

比如上面的實例，我在輸入框直接輸入內容 <h1>wall</h1>，得到的結果如下：

這種結果，肯定不是產品所想要的。

進一步鼓搗，輸入內容 <script>alert('wall');</script>

如果這段字符串是保存在數據庫里。那么下次用戶刷新這個頁面，alert方法將會被執行，也就是會彈出 wall 這個信息。
因為能插入js代碼，那這個想象空間就很大了，幾乎很多事都能干。
最簡單的就是用js獲取訪問當前網站的用戶的document.cookie，然后ajax發送到信息收集網站，那么用戶就等于在裸泳了。

三、解決方式-對字符串進行轉義后再輸出

1.在存儲進數據庫的時候，對字符串進行encode
這種方式可以解決一部分問題，但是不夠靈活。因為字符串有可能輸出在html，也有可能輸出在JavaScript代碼中。
2.在使用字符串的時候進行encode
這種方式是根據使用場景，在前端輸出時，按需求進行encode，靈活應對。

四、直接上encode方法

function encodeHtml(html){
  return html && html.replace ? 
    (
      html.replace(/&/g, "&amp;") //轉換&符號
      .replace(/ /g, "&nbsp;") // 轉換空格
      .replace(/\b&nbsp;+/g, " ") // 轉換多個空格為單個空格
      .replace(/</g, "&lt;") // 轉換小于符號
      .replace(/>/g, "&gt;") // 轉換大于符號
      .replace(/\\/g, "&#92;") // 轉換斜杠符號
      .replace(/\'/g, "&#39;") // 轉換單引號
      .replace(/\"/g, "&quot;") // 轉換雙引號
      .replace(/\n/g, "<br/>") // 轉換換行符號
      .replace(/\r/g, "") //轉換回車符號
    )
    : html;
}

代碼的作用是把對應的特殊符號，轉換為轉義字符，而不是直接插入html中。
這樣，不管用戶輸入什么內容，都可以直接轉換成字符串輸出在html中。

比如再次輸入內容 <script>alert('wall');</script>，得到的結果如下：

perfect！直接把xss漏洞給堵上了！

五、科普下轉義字符

更多內容，可以查看HTML轉義字符表

在線演示：https://wall-wxk.github.io/blogDemo/2017/01/19/xss.html

最后，附上完整的測試代碼

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>encode防止xss攻擊</title>
</head>
<body>
    <input type="text" id="myInput" />
    <button onclick="toSubmit();">提交</button>
       <p id="myText" class="demo">hello world!</p>

       <script type="text/javascript">
           function toSubmit(){
               var myText = document.getElementById("myText"),
                   myInput = document.getElementById("myInput"),
                   inputValue = myInput.value;
               myText.innerHTML = encodeHtml(inputValue);
           }
           function encodeHtml(html){
            return html && html.replace ? 
              (
                html.replace(/&/g, "&amp;") //轉換&符號
                .replace(/ /g, "&nbsp;") // 轉換空格
                .replace(/\b&nbsp;+/g, " ") // 轉換多個空格為單個空格
                .replace(/</g, "&lt;") // 轉換小于符號
                .replace(/>/g, "&gt;") // 轉換大于符號
                .replace(/\\/g, "&#92;") // 轉換斜杠符號
                .replace(/\'/g, "&#39;") // 轉換單引號
                .replace(/\"/g, "&quot;") // 轉換雙引號
                .replace(/\n/g, "<br/>") // 轉換換行符號
                .replace(/\r/g, "") //轉換回車符號
              )
              : html;
           }
       </script>
</body>
</html>