手把手教你搭建本地XSS靶场：基于xss.haozi.me的离线复现指南

手把手构建你的专属XSS实验室：从零到精通的本地靶场搭建与实战

最近在和一些做前端安全的朋友聊天，发现一个挺有意思的现象：很多开发者对XSS（跨站脚本攻击）的理解，还停留在“知道有这么个东西”的层面。真要让他们动手测试一个稍微复杂点的场景，要么找不到合适的在线环境，要么担心在公网靶场上留下痕迹。这种“纸上谈兵”的状态，其实挺限制技术成长的。

如果你也遇到过类似困扰——想深入学习XSS的各种绕过技巧，但又需要一个完全可控、随时可用的环境——那么今天这篇文章就是为你准备的。我们不依赖任何在线服务，不担心网络波动，更不用考虑隐私问题，直接在本地机器上，从零开始搭建一个功能完整的XSS靶场。这个靶场将包含多个精心设计的挑战关卡，每个关卡都模拟了真实Web应用中可能存在的不同过滤和防御机制。

1. 环境准备：打造你的安全实验沙箱

在开始之前，我们需要明确一个核心理念：安全测试必须在隔离的环境中进行。你绝对不应该在生产服务器、甚至是你日常使用的开发机上直接运行这些包含潜在恶意代码的示例。最好的做法是创建一个“沙箱”——一个与主系统隔离的虚拟环境。

1.1 选择你的技术栈

搭建本地靶场有多种技术路径，每种都有其适用场景。下面这个表格对比了三种主流方案：

对于大多数个人学习场景，我推荐全栈方案。它既能让你理解前端漏洞的成因，又能接触到服务端的防御逻辑，这种“双视角”对建立完整的安全认知至关重要。

注意：无论选择哪种方案，请确保你的实验环境与日常使用的网络和设备隔离。可以考虑使用虚拟机（如VirtualBox）或专门的测试设备。

1.2 基础环境配置

如果你选择了全栈方案，让我们从Node.js环境开始。我建议使用nvm（Node Version Manager）来管理Node.js版本，这样可以避免全局安装带来的权限问题。

# 安装nvm（以macOS/Linux为例）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 重新加载shell配置
source ~/.bashrc  # 或 ~/.zshrc

# 安装最新的LTS版本Node.js
nvm install --lts
nvm use --lts

# 验证安装
node --version
npm --version

接下来创建项目目录结构。我习惯按照功能模块来组织代码，这样后期维护和扩展都会更清晰：

xss-lab/
├── server/           # 服务端代码
│   ├── challenges/   # 各个挑战关卡的处理逻辑
│   ├── middleware/   # 中间件（如安全头设置）
│   └── app.js        # 主应用文件
├── client/           # 前端代码
│   ├── public/       # 静态资源
│   ├── challenges/   # 各个关卡的前端页面
│   └── index.html    # 入口页面
├── database/         # 数据库相关（如果需要）
│   └── schema.sql
├── config/           # 配置文件
│   └── default.json
└── package.json      # 项目依赖

初始化项目并安装核心依赖：

mkdir xss-lab && cd xss-lab
npm init -y

# 安装Express框架和相关中间件
npm install express body-parser cors helmet

# 开发依赖（用于代码质量和热重载）
npm install --save-dev nodemon eslint prettier

在package.json中添加启动脚本：

{
  "scripts": {
    "start": "node server/app.js",
    "dev": "nodemon server/app.js",
    "lint": "eslint .",
    "format": "prettier --write ."
  }
}

2. 靶场架构设计：构建模块化的挑战系统

一个好的XSS靶场不应该只是一堆随机拼凑的漏洞示例。它应该有清晰的学习路径，从简单到复杂，每个关卡都针对特定的知识点或绕过技巧。下面是我设计的一个12关挑战系统，你可以根据自己的需求调整或扩展。

2.1 关卡设计原则

在设计每个关卡时，我遵循以下几个原则：

1. 渐进式难度：从完全不设防的基础反射型XSS开始，逐步引入各种过滤和防御机制
2. 现实相关性：每个关卡都对应真实Web应用中常见的编码、过滤或验证逻辑
3. 多解可能性：鼓励探索不同的绕过思路，而不是只有唯一“标准答案”
4. 即时反馈：用户提交payload后能立即看到执行结果，便于调试和学习

基于这些原则，我设计了以下关卡主题：

• 关卡1-3：基础标签注入与闭合
• 关卡4-6：事件处理器与属性注入
• 关卡7-9：绕过基础过滤（括号、引号、尖括号过滤）
• 关卡10-12：高级绕过技巧（编码、大小写、特殊字符）

2.2 服务端架构实现

服务端使用Express框架，每个关卡对应一个独立的路由处理器。这种设计便于后期维护和扩展——如果你想增加新的关卡，只需要添加新的路由和处理器即可。

首先创建主应用文件server/app.js：

const express = require('express');
const bodyParser = require('body-parser');
const helmet = require('helmet');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// 安全中间件 - 但在靶场中我们会有选择地禁用某些防护
app.use(helmet({
  contentSecurityPolicy: false, // 在XSS靶场中暂时禁用CSP
  xssFilter: false // 禁用浏览器XSS过滤器，以便观察原始效果
}));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '../client/public')));

// 引入关卡路由
const challengeRoutes = require('./challenges/index');
app.use('/challenges', challengeRoutes);

// 首页路由
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/index.html'));
});

// 全局错误处理
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('服务器内部错误');
});

app.listen(PORT, () => {
  console.log(`XSS靶场运行在 http://localhost:${PORT}`);
  console.log('重要提示：此环境仅用于学习测试，请勿用于非法用途！');
});

接下来创建关卡路由文件server/challenges/index.js：

const express = require('express');
const router = express.Router();

// 导入各个关卡的处理函数
const challenge1 = require('./challenge1');
const challenge2 = require('./challenge2');
// ... 导入其他关卡

// 定义关卡路由
router.get('/1', challenge1.getHandler);
router.post('/1', challenge1.postHandler);

router.get('/2', challenge2.getHandler);
router.post('/2', challenge2.postHandler);

// ... 其他关卡路由

// 关卡列表
router.get('/', (req, res) => {
  const challenges = [
    { id: 1, title: '基础脚本注入', description: '没有任何过滤，直接执行脚本' },
    { id: 2, title: 'textarea标签逃逸', description: '学习如何在RCDATA元素中注入代码' },
    { id: 3, title: 'input属性注入', description: '利用未过滤的属性值执行代码' },
    { id: 4, title: '括号过滤绕过', description: '当括号被过滤时的替代方案' },
    { id: 5, title: 'HTML注释逃逸', description: '从注释中逃逸并执行代码' },
    { id: 6, title: '关键字过滤绕过', description: '通过换行绕过on/auto关键字检测' },
    { id: 7, title: '标签闭合绕过', description: '利用HTML解析特性执行不完整标签' },
    { id: 8, title: 'style标签逃逸', description: '从style标签中逃逸' },
    { id: 9, title: 'URL验证绕过', description: '绕过域名验证执行脚本' },
    { id: 10, title: '字符编码绕过', description: '使用编码绕过特殊字符过滤' },
    { id: 11, title: '大小写过滤绕过', description: '处理大小写转换的防御' },
    { id: 12, title: '多重过滤综合绕过', description: '综合运用多种技巧' }
  ];
  
  res.json({
    success: true,
    data: challenges,
    message: `共${challenges.length}个挑战关卡`
  });
});

module.exports = router;

2.3 第一个关卡：无过滤基础注入

让我们从最简单的关卡开始。这个关卡没有任何过滤，纯粹是为了让用户理解XSS的基本原理。

创建server/challenges/challenge1.js：

// 关卡1：无过滤基础注入
const getHandler = (req, res) => {
  const html = `
  <!DOCTYPE html>
  <html>
  <head>
    <title>关卡1：基础脚本注入</title>
    <style>
      body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
      .challenge { background: #f8f9fa; border-radius: 8px; padding: 25px; margin-bottom: 30px; }
      .description { color: #495057; line-height: 1.6; margin-bottom: 20px; }
      .input-group { display: flex; gap: 10px; margin: 20px 0; }
      input[type="text"] { flex: 1; padding: 12px; border: 2px solid #dee2e6; border-radius: 6px; font-size: 16px; }
      button { background: #007bff; color: white; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-size: 16px; }
      button:hover { background: #0056b3; }
      .result { margin-top: 25px; padding: 20px; background: #e9ecef; border-radius: 6px; }
      .success { color: #28a745; font-weight: bold; }
      .code { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 6px; font-family: 'Courier New', monospace; overflow-x: auto; }
    </style>
  </head>
  <body>
    <h1>关卡1：基础脚本注入</h1>
    
    <div class="challenge">
      <div class="description">
        <p>这是最简单的XSS场景：用户输入直接插入到页面中，没有任何过滤或编码。</p>
        <p><strong>目标：</strong>让页面弹出一个包含数字1的警告框。</p>
        <p><strong>提示：</strong>尝试输入 <code>&lt;script&gt;alert(1)&lt;/script&gt;</code></p>
      </div>
      
      <form method="POST" action="/challenges/1">
        <div class="input-group">
          <input type="text" name="payload" placeholder="输入你的XSS payload..." value="${req.query.payload || ''}">
          <button type="submit">测试</button>
        </div>
      </form>
      
      ${req.query.payload ? `
        <div class="result">
          <h3>执行结果：</h3>
          <div>你的输入是：<strong>${req.query.payload}</strong></div>
          <div>页面渲染为：</div>
          <div class="code">${req.query.payload}</div>
        </div>
      ` : ''}
      
      <div style="margin-top: 30px; padding: 15px; background: #fff3cd; border-radius: 6px;">
        <h4>💡 学习要点：</h4>
        <ul>
          <li>理解<strong>反射型XSS</strong>的基本原理：用户输入直接反映在响应中</li>
          <li>掌握<strong>&lt;script&gt;标签</strong>的基本用法</li>
          <li>了解浏览器如何解析和执行脚本标签</li>
        </ul>
      </div>
    </div>
    
    <div style="margin-top: 40px; text-align: center;">
      <a href="/challenges/2" style="color: #007bff; text-decoration: none; font-weight: bold;">→ 进入下一关</a>
    </div>
  </body>
  </html>
  `;
  
  res.send(html);
};

const postHandler = (req, res) => {
  const { payload } = req.body;
  // 重定向到GET请求，以便在URL中显示payload
  res.redirect(`/challenges/1?payload=${encodeURIComponent(payload)}`);
};

module.exports = { getHandler, postHandler };

这个实现有几个关键设计点：

1. 教学导向：不仅展示漏洞，还解释原理和学习要点
2. 即时反馈：用户提交payload后立即看到渲染结果
3. 安全考虑：虽然展示漏洞，但通过重定向避免直接POST渲染，减少CSRF风险
4. 渐进式提示：给初学者提供基础提示，但不直接给出答案

3. 核心挑战实现：从简单过滤到复杂绕过

有了基础框架后，让我们实现几个有代表性的关卡，展示不同类型的过滤和绕过技巧。

3.1 关卡2：textarea标签逃逸

这个关卡模拟了一个常见场景：用户输入被包裹在<textarea>标签中。由于<textarea>是RCDATA元素，其中的HTML实体不会被解析，常规的标签注入会失效。

创建server/challenges/challenge2.js：

// 关卡2：textarea标签逃逸
const getHandler = (req, res) => {
  const userInput = req.query.payload || '';
  
  const html = `
  <!DOCTYPE html>
  <html>
  <head>
    <title>关卡2：textarea标签逃逸</title>
    <style>
      /* 样式同上，省略以节省篇幅 */
    </style>
  </head>
  <body>
    <h1>关卡2：textarea标签逃逸</h1>
    
    <div class="challenge">
      <div class="description">
        <p>用户输入被包裹在<str