课程笔记：DOM型XSS跨站脚本攻击

课程名称：计算机网络应用 核心摘要：本讲为跨站脚本攻击（XSS）系列的最后一讲，重点讲解 DOM型XSS攻击。核心要点为：不存储、不与服务端交互，仅基于 DOM（文档对象模型）在客户端浏览器本地执行。通过 innerHTML 等特性绕过、利用 img/onerror、anchor 事件等方式实现恶意 payload 注入，诱导用户完成攻击。

一、 核心概念与原理

  • DOM型XSS：跨站脚本攻击的第三种类型，严格意义上属于一种特殊的反射型 XSS。
  • 两大特殊点：
    1. 基于 DOM（Document Object Model，文档对象模型） 的漏洞实时触发。
    2. 不需要与服务端进行交互，仅在客户端（浏览器）本地执行。
  • 核心特性：
    • 不存储：恶意 payload 不会存入服务端数据库。
    • 不交互：不与后端 Controller 程序进行交互，页面加载完成即可触发攻击。
    • 本地执行：所有工作均在客户端浏览器中完成，利用 JavaScript（JS）脚本 实现漏洞利用。
  • 攻击效果：通过 DOM 动态修改页面内容，用户加载的页面可能并非原始页面，而是被 DOM型XSS 篡改后的页面，以此诱导用户完成攻击。

反射型 XSS vs DOM型 XSS 对比

对比维度反射型 XSSDOM型 XSS
是否与服务端交互需要参数提交给 Controller，服务端处理后回显不与服务端交互，纯客户端执行
数据流转用户参数 → Controller → 处理 → 回显到页面用户参数 → 本地 JS → DOM 动态渲染
存储性不存储不存储
触发位置服务端响应中客户端浏览器本地
利用基础服务端输出未过滤DOM 文档对象模型漏洞

二、 技术细节与协议分析

1. DOM型 XSS 的执行流程

  1. 用户访问一个 HTML 页面（注意：访问的是 HTML 文件而非 Controller 接口）。
  2. 页面中存在接收外部参数的 JS 函数。
  3. 函数将参数通过 innerHTML 属性输出到指定 DOM 节点。
  4. 攻击者构造恶意 payload 通过参数注入，完成页面篡改。

2. 演示代码结构

<!-- 目标页面包含一个 div 节点 -->
<div id="mystr"></div>

<script>
// 接收外部传入参数的函数
function processInput(param) {
    // 对参数做简单处理后返回
    return param;
}
// 将用户通过参数录入的数据，通过 innerHTML 输出到 div 中
document.getElementById("mystr").innerHTML = processInput(输入参数);
</script>

3. innerHTML 的关键特性（重点）

  • 通过 innerHTML 植入的 <script> 标签 JS 代码不会被执行。
  • 原因：innerHTML 插入的 <script> 只有在页面初次加载时才会生效；通过 DOM 动态注入后页面不会重新刷新/加载，故直接植入 <script>alert(...)</script> 不生效。
  • 因此 DOM型XSS 需要绕过该限制，改用其他可触发执行的 DOM 元素。

4. 常见绕过与利用方式

利用方式说明示例
HTML 表单注入通过 innerHTML 植入伪造的登录表单/按钮，诱导用户输入凭据<input type="button" value="登录"> 可附加 onclick 等事件
完整 form 表单植入完整的伪造表单，诱导用户提交敏感数据构造完整 <form> 结构
iframe 注入植入 <iframe> 嵌入恶意页面<iframe src="恶意地址"></iframe>
img + onerror利用 <img> 的 src 加载失败触发 onerror 事件执行 JS<img src=x onerror=alert(document.cookie)>
anchor + onclick 事件构造复杂 DOM，绑定 anchor 锚点与 onclick 事件，弹出 cookie 信息<a onclick="alert(document.cookie)">登录</a>

5. 利用 img 标签 onerror 的原理

<!-- img 标签定义 src 属性后会尝试加载图片
     若图片加载失败，则触发 onerror 方法 -->
<img src="不存在的图片地址" onerror="alert(document.cookie)">
  • src 指向一个必然加载失败的地址 → 触发 onerror 回调 → 执行其中的 JS 代码。
  • 由于该方式不依赖 <script> 标签直接执行，可绕过 innerHTML 不执行脚本的限制。

三、 实践应用与配置命令

实操演示流程

  1. 访问目标页面：因 DOM型XSS 不与服务端交互，访问的是 HTML 文件而非 Controller 接口。
  2. 正常访问（无攻击）：
http://目标地址/dom_xss.html?param=拉勾教育

页面正常显示传入文本。

  1. 尝试直接 script 注入（失败）：
http://目标地址/dom_xss.html?param=<script>alert('拉勾')</script>

由于 innerHTML 不执行动态注入的 <script>，攻击不生效。

  1. 绕过：植入按钮/表单：
http://目标地址/dom_xss.html?param=<input type="button" value="登录">

成功渲染伪造登录按钮，诱导用户点击。

  1. 绕过：img + onerror 弹出 cookie：
http://目标地址/dom_xss.html?param=<img src=x onerror=alert(document.cookie)>

图片加载失败触发 onerror，成功弹出 cookie 信息。

  1. 绕过：anchor + onclick 获取 cookie：
http://目标地址/dom_xss.html?param=<a onclick="alert(document.cookie)">登录</a>

点击伪造链接即可获取 cookie。

四、 重点与难点提示

  • 考点①：DOM型XSS 的核心特征——不存储、不与服务端交互、纯客户端执行。
  • 考点②：DOM型XSS 本质上是一种特殊的反射型 XSS，需能区分两者差异。
  • 易错点：innerHTML 插入的 <script> 不会执行，这是 DOM型XSS 必须绕过的关键限制，切勿误以为直接注入 <script> 即可。
  • 难点：掌握多种绕过 innerHTML 限制的方式（img/onerror、onclick 事件、表单、iframe）。
  • 面试题：
    • 简述 XSS 的三种类型及区别（反射型 / 存储型 / DOM型）。
    • 为什么通过 innerHTML 注入的 <script> 不生效？如何绕过？
    • DOM型XSS 与反射型 XSS 的本质区别是什么？

三种 XSS 类型对比表

对比维度反射型 XSS存储型 XSSDOM型 XSS
存储位置不存储，URL 参数携带存储于服务端数据库不存储
与服务端交互需要（经 Controller 回显）需要（经数据库存取）不需要
触发方式用户点击恶意链接页面加载存储数据时自动触发客户端页面加载后 DOM 渲染时触发
执行位置服务端响应回显服务端响应回显客户端浏览器本地
危害程度中高（持久化）中
利用基础服务端输出未过滤服务端存储未过滤DOM 文档对象模型漏洞

五、 课后疑问/遗留问题

  1. 防御思考：既然 DOM型XSS 不经过服务端，服务端过滤/WAF 是否能有效防御？应在前端如何防范？
  2. 编码绕过：实际场景中如何通过编码（HTML实体编码、JS编码、URL编码）绕过前端过滤？
  3. 框架安全：现代前端框架（Vue/React）默认对插值表达式做转义，是否仍存在 DOM型XSS 风险（如 v-html、dangerouslySetInnerHTML）？
  4. 后续课程：XSS 三种类型已讲解完毕，后续应进入 CSRF（跨站请求伪造）或其他 Web 安全攻防主题。
最近更新:
Contributors: yangwenguang