WEB安全--XSS--DOM破坏
一、前言
继XSS基础篇后，我们知道了三种类型的XSS，这篇文章主要针对DOM型XSS的原理进行深入解析。
二、DOM型XSS原理
2.1、什么是DOM
以一个形象的比喻：
网页就像是一座房子，而 **DOM** 就是这座房子的“蓝图”或者“结构图”。房子的每个部分（如门、窗、墙壁）都代表网页上的某个元素，而 **DOM** 就是用来描述这些元素的工具，使得你可以清楚地知道哪里是门、哪里是窗，甚至改变它们的位置或大小。
所以通过DOM可以得到或者修改网页标签的属性。
举例：
<h1 id="header">Hello World</h1>
<button id="changeHeader">Change Header</button>
<script>
// 获取 h1 标签和按钮
let header = document.getElementById('header');
let changeHeaderButton = document.getElementById('changeHeader');
// 给按钮添加点击事件
changeHeaderButton.addEventListener('click', function() {
// 修改 h1 标签的文本内容
header.innerText = 'New Header Text';
});
</script>
//点击按钮时，<h1> 标签的文本内容会从 "Hello World" 改为 "New Header Text"。2.2、DOM破坏
DOM 破坏（DOM Clobbering）是指在 HTML 中，某些属性、元素的 ID 或名称等与浏览器自带的 DOM 对象（如 JavaScript 中的全局变量）发生冲突，导致原本应该是 DOM 元素的引用被覆盖或者破坏的现象。
也就是说，我们插入到浏览器的数据被接受并覆盖网页标签中本来就有的信息，那这就会造成DOM破坏。
举例：
这个例子可以看出原本是没有cookie这个属性的，然后我创建了一个div，再创建一个img，里面包含一个name属性，值为cookie。
接着把img放入div，把div放入document.body下，再调用document.cookie发现获取了这个img标签，这就说明document.cookie已经被我们用img标签给覆盖了。
这个例子可以看出原本是没有cookie这个属性的，然后我创建了一个div，再创建一个img，里面包含一个name属性，值为cookie。
接着把img放入div，把div放入document.body下，再调用document.cookie发现获取了这个img标签，这就说明document.cookie已经被我们用img标签给覆盖了。
实例（xss game第八关）：
<h2 id="boomer">Ok, Boomer.</h2>
<script>
boomer.innerHTML = DOMPurify.sanitize(new URL(location).
searchParams.get('boomer') || "Ok, Boomer")
//这里直接用DOMPurify框架过滤，那想直接绕过这个过滤显然不太可能
setTimeout(ok, 2000)//此时我们试着从这个位置入手
</script>
setTimeout可以接受函数或字符串作为参数并执行它。
在这里，ok变量被执行，但它不存在；这里的JS代码是没有任何关于ok参数的定义的，所以我们可以使用DOM破坏，通过DOM破坏，将HTML元素注入到DOM中。
构造ok参数，因为setTimeout函数执行字符串，所以需要用到<a>或者<textarea>标签，因为这两个标签自带ToString方法。
payload：
<a id=ok href="tel:alert(1)">a
当我创建这个<a>标签时，浏览器会自动在javascript中创建一个ok变量，当setTimeout(ok, 2000)运行时通过id=ok找到这个标签时<a>标签会调用ToString()方法，返回href中的值“tel:alert(1)”到setTimeout()中，最后setTimeout()将执行其中的语句。
这里需要注意的是我们要用DOMPurify框架白名单中的tel来替换javascript。
2.3、多层DOM破坏：
继XSS-GAME的DOM破坏之后，思考如果需要覆盖的数据是双层结构（x.y）该怎么办呢？
方法一、通过自定义方法写入双层字符 HTMLCOLLECTION：
<div id="x">
<a id="x" name="y" href="aaaa:1111"></a>
</div>
</body>
<script>
alert(x.y);
</script>
#这里实际上是创建了一个htmlcollection集合，然后通过collection[name]的方式来调用。方法二、使用筛选出支持双选的标签：
form-button
form-fieldset
form-image
form-img
form-input
form-object
form-output
form-select
form-textarea构建双层：
<from id="x"><output id="y">双层级</output>
<script>
alert(x.y.value);
</script>
构建三层：
<form id="x" name="y"><output id="z">三层级</output></form>
<form id="x"></form>
<script>
alert(x.y.z.value);
</script>