在 Web 安全领域，有一句话广为流传：只要有输入，就有风险；只要输出不严谨，就可能被 XSS 攻击。 作为 OWASP Top 10 的常年霸榜选手，Cross-Site Scripting（跨站脚本攻击，简称 XSS） 是每一位开发者与运维人员都必须掌握的基础安全知识。

本期我们来聊聊 Web 安全中最常见的威胁之一——XSS 跨站脚本攻击。

XSS 是什么？

XSS（Cross-Site Scripting）是一类将恶意脚本注入到网页中的攻击技术，攻击者通常利用网站对用户输入过滤不严的漏洞，将 JavaScript 等脚本注入网页，并在其他用户浏览页面时执行。

它本质上不是“跨站”，而是“跨信任边界”。

为了与 CSS（Cascading Style Sheets，层叠样式表）区分，所以命名为 XSS。

核心原理只有一句话：

未经过滤的用户输入，被当作脚本执行了。

XSS 的三种主要类型

1. 反射型 XSS（Reflective XSS）

• • 最常见的 XSS 类型
• • 恶意脚本经由 URL 参数等方式传入
• • 服务器直接原样“反射”回页面中并执行

典型场景：搜索框、跳转链接。

示例 URL：

https://example.com/search?q=<script>alert(1)</script>

2. 存储型 XSS（Stored XSS）

• • 危害更大
• • 攻击脚本被存入数据库、日志等
• • 所有访问该页面的用户都会被攻击

典型场景：评论区、用户资料、论坛帖子。

3. DOM 型 XSS（DOM-based XSS）

• • 前端 JavaScript 直接从 URL 或 DOM 中取值并拼接到页面中
• • 不经过服务器，因此更隐蔽

示例：

document.body.innerHTML = location.hash.slice(1);

如果 URL 为：

https://example.com/#<img src=x onerror=alert(1)>

则脚本会直接执行。

XSS 能造成什么危害？

XSS 的威力来自于它能让攻击者冒充用户。当恶意脚本在受害者浏览器中执行时，它可以达到以下目标：

1. 窃取 Cookie / Token

攻击者可借此登录用户账号，甚至控制后台管理系统。

2. 伪造操作（CSRF 进阶版）

脚本能自动发起转账、修改密码等请求。

3. 跳转到钓鱼网站

诱导用户输入账号密码。

4. 注入恶意脚本，形成蠕虫

如著名的 MySpace 蠕虫，仅几小时感染百万账户。

5. 获取浏览器指纹、设备信息

为更精准的攻击提供数据。

简单来说：
XSS 攻击可以让攻击者完全控制用户的浏览器，这意味着几乎可以做任何事。

XSS 是如何产生的？（常见漏洞根源）

1. 1. 未对用户输入进行过滤
2. 2. 直接将输入输出到 HTML 中
3. 3. 在 JavaScript 中使用危险 API，如：
• • innerHTML
• • document.write
• • eval
• • setTimeout("xxx")
4. 4. 拼接 HTML 导致 DOM XSS
5. 5. 缺少 CSP（内容安全策略）限制

如何防御 XSS？（最实用的解决方案）

1. 输出编码永远是第一原则（Output Encoding）

• • HTML 内容：转义 < > &
• • 属性值：转义引号
• • URL 参数：encodeURIComponent
• • JavaScript 中的值：JSON 序列化

模板引擎如 Vue / React 默认做了输出转义，非常有效。

2. 使用严格的内容安全策略（CSP）

CSP 是浏览器层面的防御手段，通常可以限制：

• • 脚本从哪里加载
• • 是否允许 inline script
• • 是否允许 eval
• • 是否允许外部资源

推荐设置（示例）：

Content-Security-Policy: default-src 'self'; script-src 'self';

3. 禁止危险 API

如下 API 极易引发 XSS，应避免使用或确保输入可控：

• • innerHTML
• • outerHTML
• • eval
• • new Function
• • document.write

使用安全替代：

• • textContent
• • setAttribute

4. 服务端过滤与校验

• • 对输入进行白名单校验
• • 对富文本内容使用 HTML Sanitizer（如 DOMPurify）
• • 限制可上传的文件类型，防止 .html 上传后被访问执行

5. 设置 HttpOnly Cookie

即使 XSS 发生，攻击者也无法轻易读取 Cookie 中的敏感信息。

Set-Cookie: session=xxxx; HttpOnly; Secure; SameSite=Lax

6. 开启框架自带的 XSS 防护

• • Django：{{ variable }} 自动编码
• • Spring Security：输出过滤
• • Vue/React：默认转义
• • Nginx/Apache：可添加 CSP、X-XSS-Protection

常见业务系统中的 XSS 高发区

可以重点检查这些地方：

如何快速自测是否存在 XSS 漏洞？

常用测试 Payload：

"><img src=x onerror=alert(1)>

或更隐蔽一些：

<svg/onload=alert(1)>

如果弹窗出现，说明存在 XSS。

​写在最后

XSS 是最容易被忽视、但危害巨大的攻击。

• • 原理简单，但影响巨大
• • 大部分漏洞来自开发不规范
• • 防护要做到：编码 + 校验 + 限制 + 策略

XSS 攻击虽然古老，但在今天依然是 Web 安全的主要威胁之一。据统计，超过 60% 的 Web 应用都存在 XSS 漏洞。无论是开发者还是普通用户，了解 XSS 攻击原理和防御方法都至关重要。

安全无小事，预防胜于补救。认真检查你的 Web 应用吧！