DOM破坏的一些案例

DOM（文档对象模型，Document Object Model）破坏通常指的是在Web开发过程中，恶意代码或错误操作导致网页的DOM结构出现异常、意外或破坏性的修改。这种破坏可能会导致页面的功能失效、用户体验受损，甚至成为安全漏洞的来源。

DOM破坏的常见情况

1. 直接修改DOM结构： 开发者或恶意脚本直接操作DOM，移除、替换或插入新的节点，从而破坏页面的结构和功能。例如，删除一个重要的表单元素，会导致用户无法正常提交数据。

2. 注入恶意代码： 攻击者通过XSS（跨站脚本攻击）注入恶意脚本，这些脚本会在页面加载时被执行，进而修改或破坏DOM结构。例如，攻击者可能会插入一个隐藏的表单，将用户输入的数据发送到恶意服务器。

3. 使用错误的JavaScript操作DOM： 开发者在操作DOM时，由于对元素的选择或操作不当，可能会导致DOM意外破坏。例如，误删除了页面中的重要节点，或者在未完全加载DOM之前操作它，导致页面部分功能无法正常工作。

4. 过度操作DOM： 当JavaScript频繁且过度地操作DOM时，可能会导致页面渲染性能下降，甚至出现浏览器崩溃的情况。例如，频繁地通过JavaScript动态生成和删除大量DOM节点，会导致页面响应变慢。

如何防止DOM破坏

1. 谨慎操作DOM：在操作DOM时，确保操作前后DOM结构的一致性，避免误操作导致页面功能异常。

2. 防范XSS攻击：通过适当的编码、输入验证、内容安全策略（CSP）等手段，防止用户输入的恶意代码被执行。

3. 使用成熟的库和框架：如React、Vue等前端框架，它们通过虚拟DOM技术有效避免了直接操作DOM所带来的风险，并提高了代码的健壮性和可维护性。

4. 测试和验证：在开发过程中进行充分的测试，尤其是自动化测试，确保DOM的任何操作不会引发意外问题。

第一道题

来看一个简单的。

分析源码

是个get接收参数，默认传参为Somebody，接收到之后就放到innerHTML中去。然后我们传递后的参数就直接放入到了这个h2标签中了。

这里我们需要对innerHTML进行一些了解。这里查看官方文档后，可以知道官方认为innerHTML是不安全的，所以就禁止了在innerHTML下插入<script>标签。但是它却没有禁用其他的标签，例如
<img>。

实战操作

这道题就可以用这种简单的方法成功通过。somebody=<img src='1' οnerrοr="alert(1337)"> 。如果要保证安全的话，这里就最好不要用innerHTML，可以改用innnerText，因为innnerText可以对<>进行html实体编码的转义，转义之后就不会进入到标签开始状态，不进入标签开始状态就会被当成文本展示在页面上。

第二道题

分析源码 

这道题和上一题有所不同，可以看见题目出现了innerText，那么我们的入手方式就需要进行改变了，需要关注的是上面的执行函数eval()。可以发现，上面用户输入的jeff值，直接被放入了eval()中没有进行任何的过滤，所以此时可以考虑的是将eval()中的双引号进行闭合。

实战操作

这里和sql注入有些类似，考虑一下闭合即可，将alert()插入到输入中去。还有一种，在js中，可以使用 ' - ' 来进行字符之间的连接。这样也可以成功通关。

第三道题

分析源码 

和前两道题相比，过滤了<>，而且是将用户输入的值，放入到一个<input>标签中，所以就考虑将对<input>标签进行闭合，看能不能逃逸出标签的限制，写入我们自己的xss。这里我们需要知道<input>标签中提供的两个参数onfocus和autofocus，对焦和自动对焦。也就是说，我们可以将alert(1)直接写道onfocus中去，当用户点击到下面的输入框后，就会出现弹窗。但是，这也就需要进行用户交互，所以就需要使用到autofocus进行自动对焦，这样只要输入之后，就可以自动出现弹窗了。

实战操作

这里需要注意的就是，不要忘了闭合。

第四道题

分析源码 

这段代码表示的就是，获取了一个form表单的id值，action就代表在当前，最后会在2秒之后进行提交。而这个form表单的action中是会出现伪协议事件的。也就是说用户写入的值直接会进到action中进行执行。那么我们就可以直接javascript:alert(1337)，写入之后直接就可以触发了。

实战操作

两秒之后就会自动提交。 

第五道题

分析源码

这一道题就过滤了很多东西，连括号都过滤了。最开始考虑使用%28和%29对括号进行编码，也就也是<img src=1 onerrot=javascript:alert%281%29>但是发现不能成功。后面认为是%没有进行转义，所以又考虑将%再转义，也就是<img src=1 οnerrοr=javascript:alert%25281%2529>，还是不能成功。

实战操作

为什么呢？那是因为将符号进行编码了，这样是无法执行的。所以我们需要先将其转换成字符串再进行编码，才能够成功。所以就可以在前面加上location这个参数，来将我们的输入转换成字符串。

第六道题

分析源码

这关也是过滤了很多东西，还对输入的长度进行了限制。这里就需要我们对js的匿名函数有所了解。在JS中，Function()就代表匿名函数，而Function()()就代表这个匿名函数立即执行。所以我们就可以尝试构建一个匿名函数绕过这个正则。

实战操作

首先，我们知道的是，js中是严格区分大小写的，所以不能直接使用大小写来进行绕过。但是js提供了一些别的函数来对输入的值进行大小写改变。也就是.source.toLowerCase()，很显然，从字面意思来看就是将函数中的源码从大写转换为小写。这样就很巧妙的绕过了这个正则。