DOM Clobbring个人理解-CSDN博客

本文链接：https://blog.csdn.net/Thewei666/article/details/141288796

Dom Clobbering：就是⼀种将 HTML 代码注⼊⻚⾯中以操纵 DOM 并最终更改⻚⾯上 JavaScript ⾏为的技术

DOM Clobbering中的操作也是根据JavaScript行为的层级来分为一层、两层、三层和更多

toString

我们通过以下代码进行fuzz去获取可以通过toString方法将转换成字符串的标签。这些标签的属性值是能够控制的，因此我们也就不再是获取无用的标签了，而是变成了获取到我们想要的字符串

    Object.getOwnPropertyNames(window)
    .filter(p => p.match(/Element$/))
    .map(p => window[p])
    .filter(p => p && p.prototype && p.prototype.toString 
    !== Object.prototype.toString)

这段代码主要是对 window 对象的属性进行一系列操作：

Object.getOwnPropertyNames(window) 获取 window 对象的所有自身属性的名称。
然后通过 filter 方法筛选出名称以 Element$ 结尾的属性。
接着通过 map 方法将这些属性对应的值提取出来。
最后再通过 filter 方法进一步筛选出那些值存在且有原型且原型的 toString 方法不同于 Object.prototype.toString 的元素。

我们得到了两种标签对象：HTMLAreaElement（<area>）&HTMLAnchorElement（<a>），这两个标签对象，我们都可以利用href属性来进行字符串转换

One Level

当JavaScript的行为只有一层时，只需要简单的使用id或name属性来定义该名称，即可在JavaScript进行执行时对该变量覆盖，如

Two Level

当JavaScript的行为为两层时，需要两层嵌套才能覆盖

需要注意：内外层使用id还是name，需要取决标签之间的层级关系

在双id属性的情况下，可以使用以下来嵌套双层标签：

form->button
form->fieldset
form->image
form->img
form->input
form->object
form->output

var log=[];
var html = ["a","abbr","acronym","address","applet","area","article","aside","audio","b",
						"base","basefont","bdi","bdo","bgsound","big","blink","blockquote","body","br"
						,"button","canvas","caption","center","cite","code","col","colgroup","command"
						,"content","data","datalist","dd","del","details","dfn","dialog","dir","div",
						"dl","dt","element","em","embed","fieldset","figcaption","figure","font","footer"
						,"form","frame","frameset","h1","head","header","hgroup","hr","html","i","iframe"
						,"image","img","input","ins","isindex","kbd","keygen","label","legend","li","link"
						,"listing","main","map","mark","marquee","menu","menuitem","meta","meter","multicol"
						,"nav","nextid","nobr","noembed","noframes","noscript","object","ol","optgroup",
						"option","output","p","param","picture","plaintext","pre","progress","q","rb","rp"
						,"rt","rtc","ruby","s","samp","script","section","select","shadow","slot","small"
						,"source","spacer","span","strike","strong","style","sub","summary","sup","svg",
						"table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr",
						"track","tt","u","ul","var","video","wbr","xmp "], logs = [];
div=document.createElement('div'); 
for(var i=0;i<html.length;i++){
	for(var j=0;j<html.length;j++) {
		div.innerHTML='<'+html[i]+' id=element1>'+'<'+html[j]+'id=element2>'; 
		document.body.appendChild(div);
		if(window.element1 && element1.element2){ 
			log.push(html[i]+','+html[j]);
		}
		document.body.removeChild(div);
	}
}
console.log(log.join('\n'));

可以修改代码去获取id和name之间标签的层级关系

Three Level

当JavaScript的行为为三层时，需要构造同名称的同级标签，在其中一同级目录标签同时具有id和name属性，然后在其中再嵌套一个子标签。

这样在定位x时，返回是数组，即HTMLCollection。HTMLCollection是可以通过name作为索引进行查找的。所以x.y才会定位到第一个form标签。所以当定位到z时，就成功为三层了。

三层以上的层级，需要用到iframe与srcdoc来配合使用

<body>
    <iframe name=a srcdoc="<iframe name=b srcdoc='<a id=c name=d href=cid:Clobbered></a><a id=c>' >">
    </iframe>
    <script>setTimeout(()=>alert(a.b.c.d),500)</script>
</body>

因为需要等待所有的iframe加载完毕我们才能获得这个层级关系，所以需要⽤到延时，不⽤延时也可以通过⽹络请求来进⾏延缓

<iframe name=a srcdoc="
<iframe srcdoc='<a id=c name=d href=cid:Clobbered>test</a><a id=c>' name=b>">
</iframe>
<style>@import 'http://example.com';</style>
<script> 
alert(a.b.c.d)
</script>

需要注意：如果没有延时或者延缓，可能会导致iframe加载不全，导致undefined

只使用a返回的是最外层iframe标签的srcdoc属性，a.b返回内层iframe标签的srcdoc属性，到a.b.c时，返回的才是HTMLCollection

最内层的标签也可以转换成form标签和output标签的嵌套