目录
源码展示
解法一：绕过过滤-DOM clobbering
什么是DOM clobbering
DOM clobbering原理
全局变量自动创建
属性名冲突
影响脚本执行
逐过程分析
源码展示
<script>
const data = decodeURIComponent(location.hash.substr(1));;
const root = document.createElement('div');
root.innerHTML = data;
// 这里模拟了XSS过滤的过程，方法是移除所有属性，sanitizer
for (let el of root.querySelectorAll('*')) {
let attrs = [];
for (let attr of el.attributes) {
attrs.push(attr.name);
}
for (let name of attrs) {
el.removeAttribute(name);
}
}
document.body.appendChild(root);
</script>题目分析：可以看到这是个明显的DOM XSS，用户的输入会构成一个新div元素的子结点，但在插入body之前会被移除所有的属性(例如：<img src=x οnerrοr=alert(1)> 经过上述代码过滤后会变为<img>，使得我们传入的数据失效)
解法一：绕过过滤-DOM clobbering
什么是DOM clobbering
DOM clobbering主要是用来进行DOM型的XSS攻击，其可以篡改JS函数原本的属性恶意插入一些XSS代码到页面的JS中去，它的特征就是利用了元素配置id或name属性后可以使用包括document、window、自己名称的形式进行访问(假如我们写了一个a标签，给他了一个id和name，那么我们就可以通过id或name来拿到这个a标签)。其可以对document的属性进行恶意的替换。特别是在元素的属性名与JavaScript全局对象的属性名冲突时，可能会破坏正常的DOM操作或脚本运行从而影响dom树的结构造成破坏。也是这一特性让它有了DOM COLBBERING这个名号。
DOM clobbering原理
全局变量自动创建
当DOM元素拥有id或name属性时，浏览器会自动在全局作用域（即window对象上）创建一个同名的属性，指向该DOM元素。例如，<div id="foo">会创建一个window.foo属性，指向这个div元素。
属性名冲突
如果元素的id或name属性与已有的JavaScript全局对象或内置属性名冲突，会覆盖原有的JS代码。例如，如果有一个<input id="location">，它会覆盖window.location，这会导致脚本中试图访问window.location时得到<input>元素，而不是期望的Location对象。
影响脚本执行
由于全局变量被覆盖，脚本在访问这些全局变量时会得到意外的结果，导致错误或不可预测的行为。
实例讲解1：
控制台打印的结果为：
通过上述结果分析可得：id和name中的值可以直接引用，引用的值即为标签的全部，但使用document可进行name引用，不可进行id引用。 DOM元素<img>拥有id属性=“x”，浏览器会自动在document对象上创建一个同名的属性document.x指向该DOM元素<img>，因此使用document.x可以直接抓取<img>标签，无需通过 getElementById 抓取<img>标签。
实例讲解2：
可以看到输出值为空
而当我们新创建的<div>标签中插入一个<img>标签并将该<div>标签插入到<body>中后，再利用document.cookie函数输出网页的cookie时，输出的结果却由空值改变成<img>标签
造成这一现象的原因：
<img>标签拥有name属性=“cookie”，浏览器会自动在document对象上创建一个同名的属性document.cookie指向该DOM元素<img>
浏览器创建的同名name=cookie属性与已有的JavaScript内置属性名cookie冲突，会覆盖原有的JS代码的作用即执行document.cookie时不是获取当前网页的cookie值而是抓取<img>标签
这种行为虽然有时可以方便地访问元素，但也会引发一些潜在的问题，特别是在元素的属性名与JavaScript全局对象的属性名冲突时，可能会破坏正常的DOM操作或脚本运行。我们可以利用这种方法。
逐过程分析
<script>
const data = decodeURIComponent(location.hash.substr(1));;
const root = document.createElement('div');
root.innerHTML = data;
// 这里模拟了XSS过滤的过程，方法是移除所有属性，sanitizer
for (let el of root.querySelectorAll('*')) {
let attrs = [];
for (let attr of el.attributes) {
attrs.push(attr.name);
}
for (let name of attrs) {
el.removeAttribute(name);
}
}
document.body.appendChild(root);
</script>payload：
<style>@keyframes x{}</style><form style="animation-name: x" onanimationstart="alert(1)"><input id=attributes><input id=attributes>对代码进行调试(n+f12):
当程序走进第一个style标签中，因为没有属性，所以不会进行过滤
当走进form标签中时，因为form中还嵌套了两个input标签，而他们的id刚好为attributes，所以程序中的el.attributes刚好把两个input标签拿到了，变成一个数组[0:input#attributes,1:intup#attributes]
然后attr拿出了数组中的第一个元素：input#attributes ，但此时input#attributes中的name为" ",所以下面的代码就不会移除name
然后再拿出数组中第二个元素，name也为空
当循环完成后，程序又走进input标签中，此时input的name会被程序过滤掉
所以最后的结果就变为
<style>@keyframes x{}</style><form style="animation-name: x" onanimationstart="alert(1)"><input><input>
可以看到我们的恶意代码并没有被过滤掉，弹窗成功！
