DOM实战操作

柒七柒77

已于 2024-08-19 14:05:43 修改

阅读量483

点赞数 17

文章标签：前端 javascript html

于 2024-08-18 15:00:13 首次发布

本文链接：https://blog.csdn.net/psz7722/article/details/141292085

版权

DOM是什么

DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。

• 文档

– 文档表示的就是整个的HTML网页文档

• 对象

– 对象表示将网页中的每一个部分都转换为了一个对象。

• 模型

– 使用模型来表示对象之间的关系，这样方便我们获取对象

DOM破坏

Dom Clobbering（Dom破坏）就是⼀种将 HTML 代码注入页面中以操纵 DOM 并最终更改页面上 JavaScript 行为的技术

DOM破坏的原理：

1、全局变量自动创建

当DOM元素拥有id或name属性时，浏览器会自动在全局作用域（即window对象上）创建一个同名的属性，指向该DOM元素。例如，<div id="foo">会创建一个window.foo属性，指向这个div元素。

2、属性名冲突

如果元素的id或name属性与已有的JavaScript全局对象或内置属性名冲突，会覆盖原有的JS代码。例如，如果有一个<input id="location">，它会覆盖window.location，这会导致脚本中试图访问window.location时得到<input>元素，而不是期望的Location对象。

3、影响脚本操作

由于全局变量被覆盖，脚本在访问这些全局变量时会得到意外的结果，导致错误或不可预测的行为。

如何防御DOM破坏（例如XSS攻击）

1、使用内容安全策略（CSP）

CSP是一个额外的安全层，它限制了网页能够加载的资源。

2、使用模板，并确保输出数据时使用了转义

对于服务器端模板，如Jinja2（Python），使用{{ variable | escape }}。对于客户端模板，如Handlebars，确保使用了适当的转义函数。

3、使用DOM方法进行转义

使用DOM API自己编写转义函数，例如element.textContent = escapeHTML(data)
使用现成的库，如DOMPurify，它提供了一个强大的转义功能

4、使用http头部进行防御

设置X-XSS-Protection: 1; mode=block来启用浏览器内置的XSS过滤器
设置Content-Security-Policy（CSP）来进一步限制资源加载

实战操作

1、Ma Spaghet！

我们可以看到源码中的(new URL(location).searchParams.get('somebody') || "Somebody") + " Toucha Ma Spaghet!" 这里的意思为获取url中的get参数somebody，如果有那么就设置h2的值为get参数的值，如果没有则设置h2的值为Somebody") + " Toucha Ma Spaghet!

（1）当get参数中存在somebody时，h2回显

（2）当get参数中不存在somebody时，h2回显

这里存在一个问题，somebody传谁就显示谁，那么我们传递给js代码给h2时，那我们就直接输入x下面代码进行测试，不出意外的话弹出一个弹窗就可以完成任务
?somebody=<script>alert(1)</script>

但是不出意外的情况下就完成了，但是意外发生了，并没有按照我们想象的出现弹窗，正常在h2标签中执行，而在这里没有执行的原因是：h2的id为spaghet，我们使用innerHTML将我们get参数传递到h2标签中
在html 5中指定不执行由 innerHTML 插入的 <script></script>标签，这就是不能弹窗的原因
innerHtml 只过滤了<script>，我们可以写其他的来触发：当传递其他的可以触发js的时就不能过滤，所以我们换一个

?somebody=<img%20src=%271%27%20onerror="alert(1337)">

你看，是不是测试成功了