目录
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!
![](https://i-blog.csdnimg.cn/direct/ab7ea459df3641d7b579a5331aecab1a.png)
我们可以看到源码中的(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)">
你看,是不是测试成功了