复现dom破坏案例和靶场

DOM破坏

DOM破坏（也称为DOM Clobbering）是一种通过HTML代码注入页面中以操纵DOM（文档对象模型）并最终更改页面上JavaScript行为的技术。其原理主要涉及HTML元素与JavaScript全局变量之间的相互作用，以及这种相互作用如何可能导致意外的行为或安全漏洞

id/name属性覆盖全局变量

在HTML页面中，如果元素的id或name属性与JavaScript的全局对象或内置属性名相同，这些全局对象或属性可能会被意外覆盖

<input id="location">  
<script>  
  // 尝试访问window.location，但已被<input id="location">覆盖  
  console.log(window.location); // 输出：<input id="location"> 而不是Location对象  
</script>

分析：

在这个例子中，<input id="location">创建了一个全局变量window.location，它指向了输入元素而不是原有的window.location对象。这可能导致脚本在尝试访问页面URL时失败，因为window.location不再是一个Location对象。

cookie值的覆盖

通过向页面注入包含name="cookie"的HTML元素，可以覆盖document.cookie属性，使其不再返回页面的cookie值。

<img name="cookie">  
<script>  
  // 尝试读取cookie  
  console.log(document.cookie); // 输出：<img name="cookie"> 而不是cookie值  
</script>

分析：

在这个例子中，<img name="cookie">导致document.cookie被覆盖为一个指向该<img>元素的引用，而不是包含cookie值的字符串。这可能会破坏依赖于document.cookie的脚本功能。

多层覆盖与函数参数

在某些情况下，DOM破坏可以用于覆盖JavaScript函数中的参数或方法，从而改变函数的行为。

<script>  
  setTimeout(ok, 2000); // 假设ok是一个应该在将来被调用的函数  
</script>  
<a id="ok" href="tel:alert(1)">Click me</a>

然而，需要注意的是，直接通过id或name属性与setTimeout的字符串参数名相同来触发DOM破坏并不常见，因为setTimeout通常接受的是函数引用而不是字符串。但在这个假设的场景中，如果某个库或框架错误地将字符串作为setTimeout的参数处理，那么DOM元素可能会覆盖预期的函数引用。