起因看到p神星球发了两个xss挑战，做题的时候使用：<details open ontoggle=alert(1)>，后来更改代码之后看到了Zzed师傅的答案： <style>@keyframes x{}</style><form style="animation-name:x" onanimationstart="alert(1)"><input id=attributes><input id=attributes>，知道了一个知识：Dom Clobbering
这个在p神的文章中也会有提到：https://www.leavesongs.com/PENETRATION/a-tour-of-tui-editor-xss.html
0x01：简介
Dom Clobbering 是⼀种将 HTML 代码注⼊⻚⾯中，从而操纵 DOM 并最终更改⻚⾯上的JavaScript
0x02：example1
从代码中可以很直观的看到利用id或者name熟悉会创建一个document或window对象，这就导致了可以利用这种攻击方式创建一个新的属性或者修改某些熟悉，实现攻击或者绕过过滤
比如比较常见的getElementById
可以看到已经被img标签给覆盖了
0x03：example2
有时候会需要x.y的这种格式，应该去怎么构造呢
可能有人和我当时想到一样，直接构造两个标签呢，形如
<div id=x> <img id='y'> </div>
这时候x.y返回的却是undefined
根据Zedd师傅提出的两种方法
第一种是可以通过构建一个 HTMLCollection ，再通过 collection[name]
第二种利用一下标签的两层关系
form->button
form->fieldset
form->image
form->img
form->input
form->object
form->output
form->select
form->textarea
所以想获取两层关系利用其中一个就可以了
0x04：toString
大多数情况下我们需要构造一个我们想要的一个字符串，而不是一段标签
利用a和area的href标签即可进行字符串转换
但是在师傅的文章中用的payload如下：
在我当前版本的Chrome中这个payload并没有成功
测试发现用字母可以，例如a:hasaki
0x05：attack
师傅也给了一个靶场的地址，注册登录即可
https://portswigger.net/web-security/dom-based/dom-clobbering
在resources/js/loadCommentsWithDomPurify.js 文件中可以看到如下代码
可以看到defaultAvatar是从window.defaultAvatar中取得的，而评论处用户如果自己没有头像的话，则默认为：defaultAvatar.avatar，即我们只需要构造defaultAvatar.avatar即可
带入到上面的方式，我们就可以得到payload：
<a id=defaultAvatar><a id=defaultAvatar name=avatar href="x:"onerror=alert(1)//">
评论处提交这个payload，然后再评论一次，刷新全局变量，加载loadCommentsWithDomClobbering.js即可触发xss
回到p神的那个xss挑战
利用这种方法我们可以构造payload，将el.attributes换成我们自己构造的元素，那么遍历所有标签的attributes并将其移除的这种过滤手段也就无从说起了，即可以构造payload：
<form onclick=alert(1)><input id=attributes><input id=attributes>
这时候attributes为input标签里面的元素，再利用form表单进行xss的触发，为什么要用form表单才行呢，这在上面提到form表单配合其他标签的特殊两层关系
所以这了即是利用了form与input，那么利用form表单进行xss即可，我这里用的onclick，需要用户进行交互
当然这种需要交互的不如Zedd 师傅的那种无需交互的
<style>@keyframes x{}</style><form style="animation-name:x" onanimationstart="alert(1)"><input id=attributes><input id=attributes>