XSS攻击及防范

原创于 2026-06-26 10:10:53 发布 · 15 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#xss #前端 #web安全 #php

网络安全同时被 3 个专栏收录

1682 篇文章

订阅专栏

程序员

803 篇文章

订阅专栏

计算机

198 篇文章

订阅专栏

XSS攻击及防范

1 什么是XSS
2 XSS类型
3 怎么预防XSS
- 3.1 纯前端渲染
- 3.2 转义HTML
- 3.3 关注高危API
- 3.4 其他措施
  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基本攻击步骤如下：

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

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

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

2.2 存储型XSS

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

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

2.3 DOM型XSS

DOM型XSS与反射型、存储型的区别在于，DOM型的XSS代码不需要服务器解析响应的直接参与，触发XSS靠的就是浏览器端的DOM解析，可以认为完全是客户端的事情。
DOM的XSS也是一种非持久性的攻击，⼀般通过修改URL参数的⽅式加⼊攻击代码，诱导⽤户访问链接从⽽进⾏攻击。攻击步骤如下：

攻击者构造出特殊的URL，其中包含恶意代码。
用户打开带有恶意代码的URL。
用户浏览器接收到响应后解析执行，前端JavaScript取出URL中的恶意代码并执行。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
例如，触发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，很容易产生安全隐患。