# DOM 破坏反模式 **严重性：** 中 ## 总结 DOM Clobbering 通过攻击者控制的 HTML 覆盖全局 JavaScript 变量。浏览器会根据“id”和“name”属性自动创建全局变量。启用逻辑旁路、XSS 和安全控制规避。绕过允许“id”和“name”的 HTML 清理程序。 ## 反模式应用程序 JavaScript 依赖于 HTML 注入覆盖的全局变量。代码需要合法对象，但会接收 DOM 元素引用。 ### 错误代码示例 // 脆弱：使用可被破坏的全局变量。 // 想象一下攻击者将这个 HTML 注入到页面中： //

// 应用程序代码期望 `appConfig` 是一个配置对象。 // 但是，`window.appConfig` 现在指向上面的

元素。如果（window.appConfig.isAdmin）{ // DOM 元素是“真实的”，因此该检查通过。 // 攻击者无需成为管理员即可访问管理面板。显示管理面板（）； } // 另一个例子： // 注入的 HTML:

// 合法按钮：函数提交表单（）{ // 该代码旨在获取合法形式，但获取的是注入的形式。 var form = document.getElementById('someForm'); 表单.提交(); // 向攻击者的站点提交数据。 } ### 好的代码示例 // 安全：避免全局变量并验证 DOM 元素。 // 1. 为应用程序的对象使用命名空间。常量 myApp = {}; myApp.config = { 是管理员：假 // ...其他配置 }; // 通过命名空间访问配置。如果（myApp.config.isAdmin）{ 显示管理面板（）； } // 2. 验证从 DOM 检索的元素的类型。函数提交表单（）{ var form = document.getElementById('someForm'); // 在使用该元素之前检查它是否实际上是一个表单。 if (HTMLFormElement 的表单实例) { 表单.提交(); } 否则{ console.error("错误：'someForm' 不是有效的表单元素。"); } } // 3. 冻结关键对象以防止修改。对象.freeze(myApp.config); ### 反应示例 **不好：** // 漏洞：访问可能被破坏的窗口全局函数管理面板（）{ // 攻击者注入：

// window.appConfig 现在指向 div，而不是配置对象 if (window.appConfig?.isAdmin) { 返回 ; } 返回<访问拒绝/>； } **好：** // 安全：使用 React Context 或模块范围从'react'导入{useContext}；从'./ConfigContext'导入{ConfigContext}；函数管理面板（）{ const config = useContext(ConfigContext); 如果（config.isAdmin）{ 返回 ; } 返回<访问拒绝/>； } ### TypeScript 示例 **好：** // 类型安全防止 DOM 破坏接口应用程序配置{ isAdmin：布尔值； apiURL：字符串； } // 模块范围，而非全局 const appConfig: AppConfig = { 是管理员：假， apiURL: '/api' }; // TypeScript 强制进行类型检查函数 checkAdmin(): void { // 即使 window.appConfig 存在，TypeScript 也需要该接口 if (appConfig.isAdmin) { // 类型安全访问显示管理面板（）； } } // 使用类型保护验证 DOM 元素函数submitForm(formId: string): void { const elem = document.getElementById(formId); if (!(elem 实例 HTMLFormElement)) { throw new TypeError(`元素 ${formId} 不是表单`); } elem.submit(); } ## 检测 **JavaScript 模式：** * 全局变量访问：`window.config`、`document.userInfo` * 隐式全局变量：`config.isAdmin`（无 var/let/const 声明） * `document.getElementById()` 没有类型验证 * 对全局变量进行安全检查：`if (window.auth.isLoggedIn)` **搜索模式：** * Grep: `窗口\.[a-zA-Z]+\.|\bdocument\.[a-zA-Z]+\.|getElementById$.*$\.(?!tag|class)` * 查找：`if (window.` 或 `if (document.`) * 检查：直接属性访问，无需instanceof检查 **HTML 消毒剂评论：** * DOMPurify：检查`FORBID_ATTR`不排除`id`，`name` * Sanitize-html：查看“allowedAttributes”配置 * HTML Purifier：验证属性白名单 **手动测试：** 1. 识别全局变量：检查控制台中的“window”对象 2. 注入破坏性 HTML：`

` 3. 验证覆盖：`console.log(typeof window.globalVarName)` 4. 测试安全影响：尝试绕过检查 ## 预防 * **避免使用全局变量**进行安全关键操作或配置。相反，请使用私有命名空间（例如，`const myApp = { config: { ... } };`）。 * **使用“Object.freeze()”冻结关键对象**，使它们只读，防止它们被覆盖。 * **在使用从 DOM 检索的任何对象之前验证其类型**（例如，“if (elem instanceof HTMLFormElement)”）。 * **使用强大的 HTML 清理程序**，但请注意，允许“id”和“name”属性仍然会让您容易受到攻击。 DOM 破坏保护必须在 JavaScript 代码中实现。 * **使用不太可能与全局变量冲突的元素 ID 前缀（例如，`id="myapp-user-form"`）。 ## DOM 破坏测试 **手动测试：** 1. **识别全局变量：** 打开浏览器控制台，输入“window.”并检查自动完成 2. **测试破坏：** 通过输入字段注入 `

` 3. **验证类型更改：** `typeof window.targetGlobal` 应显示对象 → 对象（元素） 4. **测试绕过：** 检查安全检查是否失败（管理员访问、身份验证绕过） **自动化测试：** * **静态分析：** ESLint 插件 `eslint-plugin-no-unsanitized` * **动态测试：** Burp Suite DOM 破坏扫描器 * **代码审查：** 搜索 `window.` 访问模式 * **类型检查：** TypeScript 严格模式捕获许多情况 **测试示例：** // 测试关键对象不能被破坏描述('DOM破坏保护', () => { it('应该防止配置对象破坏', () => { // 尝试破坏 const div = document.createElement('div'); div.id = 'appConfig'; document.body.appendChild(div); // 验证原始对象完好无损 Expect(typeof myApp.config).toBe('object'); 期望（myApp.config.isAdmin）。toBe（假）； // 清理 document.body.removeChild(div); }); it('应该验证表单元素类型', () => { // 创建假表单 const div = document.createElement('div'); div.id = '登录表单'; document.body.appendChild(div); // 应该抛出或返回 false Expect(() =>submitForm('loginForm')).toThrow(TypeError); }); }); **浏览器开发工具检查：** // 在控制台中运行以查找潜在的破坏目标 Object.keys(窗口).filter(key => typeof window[key] === '对象' && 窗口[键] !== null && !window[key].toString().includes('[本机代码]') ）； ## 修复步骤 1. **识别全局依赖项** \- 搜索 `window.` 和隐式全局变量 2. **审核 HTML sanitizer** \- 检查是否允许 `id` 和 `name` 3. **创建命名空间** \- 将全局变量移动到模块范围或命名空间对象 4. **添加类型验证** \- 在使用 DOM 元素之前检查 `instanceof` 5. **冻结关键对象** \- 在配置对象上使用 `Object.freeze()` 6. **更新代码** \- 将 `window.foo` 替换为 `myApp.foo` 7. **测试保护** \- 验证破坏尝试失败 8. **启用 TypeScript** \- 利用类型安全性提供额外保护 ## 相关安全模式和反模式 * [跨站脚本 (XSS) 反模式]()：DOM Clobbering 可以是启用 XSS 的载体。 * [Mutation XSS Anti-Pattern]()：另一种滥用浏览器解析 HTML 方式的清理绕过技术。 * [缺少输入验证反模式]()：未能验证 DOM 元素的类型是缺少输入验证的一种形式。 ## 参考文献 * [OWASP Top 10 A05:2025 - 注入]() * [OWASP GenAI LLM05:2025 - 不正确的输出处理]() * [CWE-79：跨站脚本]() * [CAPEC-588：基于 DOM 的 XSS]() * [PortSwigger DOM 破坏]() * [DOM 破坏研究]() * 来源：[sec-context]()

Dom 破坏反模式

包含技能