一、前言

继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>