1. 什么是XSS

cross-site-scriping,跨站脚本攻击，为了和css区分，取名为xss
通常是在网页里嵌入一段恶意的js代码：让浏览器在渲染dom的时候，意外地执行了恶意的js代码，使得黑客盗取个人信息（通常盗取了新浪微博的账号和密码，还可以试试能不能去登录支付宝qq），执行恶意的操作（比如发恶意帖，删帖，微博关注人，转发未必之类的操作）

2. XSS的分类

1.Dom类型

DOM 型 XSS 的攻击步骤：
? 攻击者构造出特殊的 URL，其中包含恶意代码。
? 用户打开带有恶意代码的 URL。
? 用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
? 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
举例

有这样的代码，输入框让用户输入自己的名字，然后把用户的名字同步显示在div里

    <input id='input' type="text" placeholder="请输入名字">
    <p>你的名字是：</p>
    <div id="box" style="width: 300px; height: 100px; border: 1px solid #000;;;"></div>
    <script>
        document.cookie = "username=John Doe; ";
        let input = document.getElementById('input')
        let box = document.getElementById('box')
        input.onchange = function (e) {
            console.log(e.target.value);
            box.innerHTML = e.target.value
        }
     </script>

用户页面如下：
在这里插入图片描述
加入此时用户注入一段恶意diamante来看看结果如何
<img src="null" onerror="alert(document.cookie)"></img>

3. 解决措施：

避免使用innerHtml,vue中的v-html指令等
可以把innerHtml换成下面两种方式，使内容不会被解析执行

效果如下：

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

对用户输入的内容进行编码转义
设置cookie为httponly，也就是不能在浏览器端对cookie进行获取和修改等操作
强制用户登录验证

DOM 型 XSS 跟其他两种 XSS 的区别
DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

2. 存储型

存储型 XSS 的攻击步骤：
? 攻击者将恶意代码提交到目标网站的数据库中。
? 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
? 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
? 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。
举例
比如qq空间有留言板的功能，那么黑客去给B留言了，留言的内容也是一段恶意代码，那么这段恶意代码作为留言板的内容肯定会被存储到数据库，此时假如A的某个好朋友进入了A的空间留言板，那么留言板数据从数据库提取出来，被浏览器端执行，那么A的好朋友就中了XSS攻击了，A一般都会有很多朋友，都可以访问他的留言板，所以存储性的XSS往往危机到的就不是一个用户了，而是多个用户
防御措施

采用纯前端的渲染方式
纯前端渲染的过程：
? 浏览器先加载一个静态 HTML，此 HTML 中不包含更新到页面上的数据。在纯前端渲染中，我们会明确的告诉浏览器：下面要设置的内容是文本（.innerText），还是属性（.setAttribute），还是样式（.style）等等。浏览器不会被轻易的被欺骗，执行预期外的代码了。但纯前端渲染还需注意避免 DOM 型 XSS 漏洞（例如 onload 事件和 href 中的 javascript:xxx 等）。
但是有些页面的seo需求比较高，还是需要通过拼接html的方式渲染，所以就需要采用合适的过滤转义库
对客户端提交到后台的数据进行过滤验证以及编码
过滤包括对符号< >的转义,对大小写<sCrIPT>,对内嵌<sc<script><script>xx</script>以及替换<img src='' onerror=''> </img>
通常会采用一些专业的库来做这样的事情org.owasp.antisamy等等，有很多

3. 反射型XSS
1. 反射型 XSS 的攻击步骤：
  ? 攻击者构造出特殊的 URL，其中包含恶意代码。
  ? 攻击者需要诱导用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
  ? 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
  ? 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

在这里插入图片描述
2. 应对策略
和存储类型的一样，也是通过编码转义等

反射型 XSS 跟存储型 XSS 的区别是：
存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。POST 的内容也可以触发反射型 XSS，只不过其触发条件比较苛刻（需要构造表单提交页面，并引导用户点击），所以非常少见。