Dom型和反射型的区别

DOM型与反射型XSS的区别及分析

前言

XSS漏洞根据触发方式可分为三类：反射型、存储型和DOM型。初学者常混淆反射型与DOM型XSS，本文通过对比分析帮助理解二者的核心差异。

---

DOM型与反射型对比图

以下为两种XSS的异同对比示意图：

反射型XSS数据流：客户端→服务端→客户端

DOM型XSS数据流：完全在客户端处理

---

反射型XSS分析

攻击流程

1. 攻击者构造恶意URL并诱导用户点击。
2. 服务器接收请求后，未过滤输入直接返回包含恶意脚本的响应。
3. 用户浏览器解析响应并执行脚本。

示例（Pikachu靶场）

输入测试Payload

<script>alert('1_Ry')</script>

后端PHP代码片段

if(isset($_GET['submit'])){
    $html = "who is {$_GET['message']},i don't care!";
}
echo $html;

前端渲染逻辑

<input name="message" />
<?php echo $na'me; ?>  <!-- 直接输出未过滤的用户输入 -->

漏洞验证截图

输入Payload后触发弹窗

---

DOM型XSS分析

攻击流程

1. 攻击者构造恶意URL（含Payload）。
2. 用户访问URL后，前端JavaScript直接操作DOM触发漏洞。
3. 全程无需服务器参与处理Payload。

示例1：在线翻译场景

输入内容：

This is a test <script>alert('1_Ry')</script> about xss

前端渲染逻辑

翻译页面直接解析恶意脚本

示例2：Pikachu靶场

前端代码

<script>
function domxss(){
    var str = document.getElementById("text").value;
    document.getElementById("dom").innerHTML = `<a href='${str}'>click</a>`;
}
</script>
<input id="text" />
<button onclick="domxss()">Submit</button>
<div id="dom"></div>

输入Payload

#' onclick="alert('1_Ry')">

渲染结果

<a href='#' onclick="alert('1_Ry')">click</a>  <!-- 事件属性被注入 -->

漏洞验证截图

点击后触发弹窗

---

反射型 vs DOM型核心区别

特征	反射型XSS	DOM型XSS
数据流	客户端→服务端→客户端	完全在客户端处理
服务端参与	响应中包含恶意脚本	服务端不处理Payload
触发位置	服务端返回的HTML	前端JS动态修改DOM
检测难度	可通过抓包分析	需动态分析前端代码

---

防御方案

1. 输入过滤
   • 过滤 <>'"& 等特殊字符，或使用白名单机制。
2. 输出编码
   • 根据上下文采用HTML实体编码（如<）、URL编码等。
3. 前端安全实践
   • 避免使用innerHTML，优先使用textContent。
   • 对动态拼接的URL参数使用encodeURIComponent()。
4. CSP策略
   • 通过Content-Security-Policy限制脚本来源。
5. HttpOnly Cookie
   • 防止通过document.cookie窃取敏感信息。

---

总结

• 反射型XSS：服务端未过滤输入，恶意脚本“反射”回客户端执行。
• DOM型XSS：纯前端漏洞，由JS操作DOM时未转义用户输入引发。
• 防御核心：始终遵循“不信任用户输入”原则，结合服务端与前端双重防护。