1 什么是XSS

XSS称为跨站脚本攻击（Cross Site Scripting），它的缩写原本应是CSS，但是由于与层叠样式脚本（Cascading Style Sheets，简称CSS）重名，所以将缩写改为XSS。

它是一种代码注入攻击，发生在目标网站中目标用户的浏览器层面上。攻击者在目标网站上注入恶意代码，当用户浏览目标网站时，浏览器会渲染整个HTML文档，这个过程中出现了不被预期的脚本指令，并且被浏览器执行了，XSS就会发生。

利用这些恶意代码，攻击者可以获取用户的敏感信息如Cookie、sessionId等，控制用户的账号权限，进而危害数据安全。

在XSS攻击中，恶意代码与网站正常的代码混合在一起，浏览器没办法分辨出哪些代码是可信的，哪些代码是不可信的，于是会将恶意代码与正常代码一起执行，导致用户信息泄漏。

2 XSS类型

根据攻击的来源，XSS攻击可以分为存储型、反射型、DOM型3类。

2.1 反射型XSS

反射型XSS又称为非持久型XSS，这种攻击一般是一次性的，攻击代码被存储在url中，作为输入提交到服务端，服务端解析后响应，响应内容中出现这段XSS代码，最后浏览器解析执行。这个过程就像一次反射，所以叫反射型XSS。

反射型XSS基本攻击步骤如下：

1. 攻击者通过邮件等形式将包含XSS代码的链接发送给用户，诱导用户点击链接。
2. 用户点击该链接，服务器收到用户的请求，将恶意代码从url中取出，拼接在HTML中返回给浏览器。
3. 用户浏览器接收到响应后解析执行代码，混在其中的恶意代码也被执行。
4. 恶意代码窃取用户数据，攻击者利用该数据进行一系列操作。

例如，当前我写了这样一段html：

<div>
    你好<%- xss%>
</div>

如何我输入这个url：http://xxx?xss=<script>alert('XSS');</script>，那么页面中会弹出写着“XSS”的对话框。

2.2 存储型XSS

存储型XSS又称为持久型XSS，它与反射型XSS的区别在于，攻击代码被存储在服务端（包括数据库、内存和文件系统等），下次请求目标页面时不用再提交XSS代码，具有更强的隐蔽性。

存储型XSS基本攻击步骤如下：

1. 攻击者通过评论、私信、发帖等操作将恶意代码提交到目标网站的数据库中。
2. 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在HTML中返回给浏览器。
3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
4. 恶意代码窃取用户数据，攻击者利用该数据进行一系列操作。

最典型的例子就是留言板XSS。

2.3 DOM型XSS

DOM型XSS与反射型、存储型的区别在于，DOM型的XSS代码不需要服务器解析响应的直接参与，触发XSS靠的就是浏览器端的DOM解析，可以认为完全是客户端的事情。

DOM的XSS也是一种非持久性的攻击，⼀般通过修改URL参数的⽅式加⼊攻击代码，诱导⽤户访问链接从⽽进⾏攻击。攻击步骤如下：

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

例如，触发XSS的方式可以是输入一段这样的url：http://xxx.com#alert(1)，常见的输入点有：

document.URL
document.location
document.cookie

常见的输出点：

document.write()
document.body.innerHtml = ...
document.create...(...)
document.open(...)

3 怎么预防XSS

XSS攻击的实现需要有两个必要条件：

• 攻击者输入恶意代码；
• 浏览器执行恶意代码；

3.1 纯前端渲染

纯前端渲染是指，浏览器首先加载一个空白的HTML，然后执行该HTML引入的JS文件，JS通过AJAX获取业务数据，调用DOM API，更新到页面上。

在纯前端渲染中，我们会明确的告诉浏览器：这是文本.innerText，还是属性.setAttribute，还是样式.style等等。

纯前端渲染可以避免存储型和反射型的攻击，但没法避免DOM型，攻击者可以通过onload事件、href中嵌入javascript:...进行攻击。

3.2 转义HTML

对于需要考虑SEO的SSR项目，不得不在服务端拼接HTML文件。那么必须使用HTML转义库，基本规则是将& < > " ' /几个字符转义掉，但是并不完善：

XSS安全漏洞	简单转义是否有防护作用
HTML标签	有
HTML属性值	有
CSS内联样式	无
内联js	无
内联JSON	无
跳转链接	无

3.3 关注高危API

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，很容易产生安全隐患。

3.4 其他措施

Content Security Policy

Content Security Policy（内容安全策略，简称csp）用于检测并阻止网页加载非法资源的安全策略，可以减轻xss攻击带来的危害和数据注入等攻击。

严格的CSP在XSS的防范中可以起到以下的作用：

• 禁止加载外域代码，防止复杂的攻击逻辑
• 禁止外域提交，网站被攻击后，用户的数据不会泄露到外域
• 禁止内联脚本执行
• 禁止未授权的脚本执行
• 合理使用上报可以及时发现XSS，利于尽快修复问题

开启http only

禁止JavaScript读取某些敏感Cookie，攻击者完成XSS注入后也无法窃取此Cookie。

加入验证码

加入验证码，防止脚本冒充用户提交危险操作