什麼是XSS攻擊-如何解決XSS防禦？

首先來說一下什麼是XSS攻擊：跨站腳本攻擊(Cross Site Scripting)，爲不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫爲XSS。

就目前而言，應對XSS攻擊的主要手段還是編碼與過濾兩種（過濾輸入，轉義輸出）。

編碼，對一些特殊字符進行轉換編碼或者轉義，讓他們不直接出現在腳本中，從而使瀏覽器不會去執行這段腳本。（主要將符號 <、>、&、’、"進行轉義）。

過濾，顧名思義，就是將提交上來的數據中的敏感詞彙直接過濾掉。例如對"<script>"、"<a>"、"<img>"等標籤進行過濾，有的是直接刪除這類標籤中的內容，有的是過濾掉之類標籤中的on事件或是'javascript'等字符串，讓他們達不到預期的DOM效果。（主要過濾特定的標記、屬性、事件）。

XSS危害：
1、盜取用戶cookie。
2、注入惡意腳本。
3、通過JS改變頁面的正常操作。
4、通過CSS改變頁面樣式等等。

再者來說一下如何解決XSS防禦，舉個例子：

    <textarea class="txt" cols="60" rows="10"></textarea>
    <div class="login">
        <p>賬號：<input type="text" name="user" class="user"></p>
        <p>密碼：<input type="text" name="pass" class="pass"></p>
        <p><button class="btn">登錄</button></p>
    </div>
    <div class="comment">
        執行惡意腳本。。。<img src="1.png" onerror="alert('你電腦中毒啦！')"/>
        你很帥喲。。。<img src="1.png" onerror="alert(document.cookie)"/>
        帶你去旅行。。。<img src="1.png" onerror="location.href='https://www.baidu.com/'"/>
        你完了。。。<img src="1.png" onerror="document.body.innerHTML=''"/>
    </div>

<script>
    document.cookie = 'user1=xiaoming';

    var user = document.querySelector('.user');
    var pass = document.querySelector('.pass');
    var txt = document.querySelector('.txt');
    var btn = document.querySelector('.btn');
    var comment = document.querySelector('.comment');

    function encode(str) {//過濾轉義
        if (!str || str.length === 0) return '';
        str = str.replace(/>/gm, '&gt;');
        str = str.replace(/</gm, '&lt;');
        // str = str.replace(/&/gm, '&amp;');
        str = str.replace(/"/gm, '&quot;');
        str = str.replace(/'/gm, '&apos;');
        return str;
    }

    btn.onclick = function (){

        // fetch('xss.php?user='+user.value+'&pass='+pass.value)
        // .then(res => res.text())
        // .then(data => {
        //     comment.innerHTML = data;
        // }

        comment.innerHTML = txt.value;
        
        // comment.innerHTML = encode(txt.value);

    };
</script>