Lvzl Blog是什么
Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie 等，进而危害数据安全。 为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。 XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。
特点是什么
恶意代码直接在用户的终端执行，可以访问用户信息（cookie 等），发起攻击请求
有哪些类型
XSS 攻击可分为存储型、反射型和 DOM 型三种。
存储型
假如我在掘金写的文章里，加了一些恶意的脚本：
html
<script>alert('我正在攻击你')</script>如果掘金没有处理，那么当别的用户打开我的文章，我的脚本就能执行，这就是典型的存储型XSS 攻击。
反射型
我这次改了一种方式，我在文章里加了一个超链接：
html
嘿，点击这里查看有趣的照片：<a href="https://xxx.com/?image=<script>alert('这可是你自己点了，我才攻击你');</script>">点击这里</a>这就是典型的反射型XSS 攻击。
DOM 型
假如掘金的评论是前端动态添加到页面，那么我在评论中写到：
html
<script>alert('我正在攻击你')</script>此时正在浏览这篇文章的另一个人的客户端收到我新增的评论，然后未经过任何处理的情况下添加了这个评论到页面（比如通过 document.write、innerHtml），那么恶意代码将执行。
区别
- 反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。
- DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。
如何防范
- 输入校验长度、合法性能避免一些 XSS 攻击
- 后端使用可靠的转义库来转译 html
- 纯前端渲染，明确的告诉浏览器：要设置的内容是文本（.innerText），还是属性（.setAttribute），还是样式（.style）等等。浏览器不会被轻易的被欺骗，执行预期外的代码。针对内部管理系统可以，SEO 要求高的系统不行
- DOM 中的内联事件监听器，慎用
- Vue 中慎用 v-html
- Js 中使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。
- cookie 设置成 Http-Only，这样可以防止脚本被 JS 读取
- 敏感操作加验证码多层验证，防止脚本冒充用户执行
- 合理配置CSP（内容安全策略）