XSS攻击的介绍和防护

由于最近开会接触到了前端安全渗透方面相关内容，对XSS攻击的一些内容了解还不是很透彻，所有查看了XSS攻击的相关内容，做了一些总结

Cross-Site Scripting（跨站脚本攻击）简称 XSS

XSS官方定义是 恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。”

恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

举个栗子

页面中的搜索内容会在页面上显示，获取时

    <script>
      function test() {
        var str = document.getElementById('text').value
        document.getElementById('t').innerHTML =
          "<a href='http://123.com/" + str + "' >testLink</a>"
      }
    </script>
    <div id="t"></div>
    <input type="text" id="text" value="" />
    <button onclick="test()">OK</button>

此时如果我们在输入框里输入

'onclick=alert(/xss/) //

点击页面上的testLink 就会弹出Xss攻击弹框

使用 '单引号将a href属性闭合，再插入点击事件。

此时html页面代码就是这样的

<a href="http://123.com/" onclick="alert(/xss/)//'">testLink</a>

这里就需要我们对用户输入的内容进行校验。

除了这种方式，还会有别的形式内容

• 在html内嵌的文本，加入恶意的script标签
• img onerror 注入不受控制的代码
• 在标签的 href、src 等属性中，包含 javascript: 等可执行代码。
• 在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。

开发人员如果将客户输入的内容不做处理的就显示在html中，是很容易产生漏洞的。

现在开发基本上很少拼接html 但是即使用vue框架也可能回使用到v-html的情况。

XSS分类

• 存储型XSS
• 反射型XSS

存储型XSS

• 攻击者会在输入时将恶意代码插入并提交到网站数据库
• 用户打开网站后，服务端返回的数据会解析，并将恶意代码执行
• 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作

例如评论，留言，论坛可能会出现这类攻击

反射型XSS

• 攻击者构造出有恶意代码的url
• 用户点击链接时，网站会将恶意代码取出并执行。
• 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作

存储型的XSS攻击危害更大一些，因为反射型的XSS还需要用户点击URL的动作

前端预防 XSS 攻击

DOM 型 XSS 攻击，实际上就是网站前端 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行了。

在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。

如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。

DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等，<a> 标签的 href 属性，JavaScript 的 eval()、setTimeout()、setInterval() 等，都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，请务必避免。

xss攻击练习