DOM 型 XSS攻击一共包含哪些部分？使用场景是什么？底层原理是什么？-CSDN博客

本文链接：https://blog.csdn.net/qq_36777143/article/details/146404980

1. DOM 型 XSS 攻击包含哪些部分？

想象一下，你在一家咖啡店点餐：

你告诉服务员你的名字（如“Alice”），服务员直接把你的名字写在杯子上。
如果你告诉服务员的名字是一段恶意的 JavaScript 代码（如 <script>alert('Hacked!')</script>），而服务员没有检查就直接展示给其他人，其他人的浏览器就会执行这段代码。
在 Web 开发中，这种漏洞被称为 DOM 型 XSS 攻击。

(1) 核心组成部分

输入点：
- 用户通过 URL 参数、表单提交等方式向客户端传递数据。
- 示例：
```
<a href="#" onclick="displayGreeting()">Click to greet</a>
```

处理阶段：

客户端 JavaScript 使用用户输入的数据动态修改页面内容，未对其进行过滤或转义。

示例：

function displayGreeting() {
    const name = new URLSearchParams(window.location.search).get('name');
    document.getElementById('output').innerHTML = `Hello, ${name}!`;
}

输出点：
- 恶意代码通过 JavaScript 动态插入到页面中，浏览器解析并执行。
- 示例：
```
<div id="output"></div>
```
恶意脚本：
- 攻击者通过构造恶意 URL 或表单提交注入恶意代码。
- 示例：
```
https://example.com/greet?name=<script>alert('Hacked!')</script>
```

2. 使用场景是什么？

(1) URL 参数处理

场景：攻击者通过 URL 参数注入恶意代码，诱导用户点击恶意链接。

示例：

https://example.com/greet?name=<script>alert('Hacked!')</script>

(2) 动态内容生成

场景：页面通过 JavaScript 动态生成内容，未对用户输入进行过滤。

示例：

const query = new URLSearchParams(window.location.search).get('query');
document.getElementById('search-results').innerHTML = `Search results for: ${query}`;

(3) 单页应用（SPA）

场景：单页应用中，前端通过路由参数或用户输入动态渲染内容。

示例：

const page = window.location.hash.substring(1);
document.getElementById('content').innerHTML = `Loading page: ${page}`;

(4) 第三方脚本

场景：攻击者通过第三方脚本（如广告、插件）注入恶意代码。

示例：

<script src="https://malicious-site.com/malware.js"></script>

3. 底层原理是什么？

(1) 数据流分析

输入阶段：
- 用户通过 URL 参数、表单提交等方式向客户端传递数据。
- 示例：
```
<a href="#" onclick="displayGreeting()">Click to greet</a>
```

处理阶段：

客户端 JavaScript 使用用户输入的数据动态修改页面内容，未对其进行过滤或转义。

示例：

function displayGreeting() {
    const name = new URLSearchParams(window.location.search).get('name');
    document.getElementById('output').innerHTML = `Hello, ${name}!`;
}

输出阶段：
- 浏览器解析页面时，会执行嵌入的恶意代码。
- 示例：
```
<div id="output">Hello, <script>alert('Hacked!')</script>!</div>
```

(2) 恶意代码传播

即时性：
- 恶意代码不会被存储在服务器中，而是通过客户端 JavaScript 动态插入到页面中。
依赖用户交互：
- 攻击者需要诱使用户点击恶意链接或提交恶意表单。

(3) 安全漏洞

未过滤输入：
- 客户端 JavaScript 未对用户输入进行有效性验证或转义。
盲目信任输入：
- 客户端假设用户输入是安全的，未对其进行二次检查。

4. 图示说明

(1) DOM 型 XSS 攻击流程

用户输入 -> 客户端接收 -> 未过滤 -> 动态插入到页面 -> 浏览器执行恶意代码
       |
       v
攻击者 -> 构造恶意链接 -> 诱导用户点击 -> 成功攻击

(2) 输入与输出对比

正常输入：
+--------------------------+
| 用户输入正常数据         |
| （如用户名、搜索关键词） |
+--------------------------+

恶意输入：
+--------------------------+
| 用户输入恶意代码         |
| （如 <script>...</script>）|
+--------------------------+