什么是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>