跨站脚本攻击（XSS）的变异形式：基于DOM的XSS详解

1. 知识点描述

基于DOM的XSS（DOM-based Cross-Site Scripting）是XSS攻击的一种特殊形式，其恶意代码的注入和执行完全在客户端浏览器端完成，无需与服务器交互。攻击通过篡改页面的DOM（文档对象模型）结构来实现，通常由前端JavaScript代码对用户输入的不安全处理导致。与反射型或存储型XSS不同，DOM型XSS的恶意负载不会经过服务器响应，因此传统服务端防御措施（如输入过滤）可能失效。

2. 攻击原理与触发条件

关键要素：

1. 攻击入口：用户可控的输入源（如URL参数、表单字段、本地存储）。
2. 触发点：前端JavaScript代码通过以下方式动态修改DOM：
   • document.write()
   • innerHTML
   • outerHTML
   • location.hash
   • eval() 或 setTimeout() 等动态执行函数
3. 数据流：恶意输入直接进入DOM解析或JavaScript执行环境，未经 sanitization（净化）。

示例场景：

假设一个页面通过JavaScript读取URL中的#search参数并显示到页面上：

// 从URL片段（hash）获取搜索词  
var searchTerm = location.hash.substring(1);  
document.getElementById("results").innerHTML = "搜索: " + searchTerm;  

若用户访问如下链接：

http://example.com/page#<script>alert('XSS')</script>  

则location.hash返回#<script>alert('XSS')</script>，前端代码将其直接插入innerHTML，导致脚本执行。

3. 攻击流程分解

1. 构造恶意负载：攻击者将恶意代码嵌入URL参数或本地存储数据。
2. 诱导用户触发：通过钓鱼邮件、恶意链接等方式使用户访问携带恶意负载的URL。
3. 客户端解析：浏览器解析URL时，JavaScript代码读取恶意输入并写入DOM。
4. 脚本执行：浏览器将插入的恶意代码视为DOM的一部分并执行。

4. 与反射型/存储型XSS的区别

5. 防御措施

前端代码层面：

1. 避免直接操作DOM：
   • 使用textContent替代innerHTML，防止HTML解析。
   • 若必须使用innerHTML，对用户输入进行转义（如将<转为<）。
2. 谨慎处理来源不可信的数据：
   • 对location.hash、document.referrer等客户端数据视为不可信输入。
3. 使用安全API：
   • 采用DOMPurify等库对输入进行净化。
   • 避免使用eval()或new Function()动态执行代码。

其他补充措施：

• 内容安全策略（CSP）：通过HTTP头限制脚本来源，阻止内联脚本执行。
• 前端代码审计：使用自动化工具（如ESLint安全规则）检测危险函数调用。

6. 实例分析

假设页面有以下代码：

<script>  
  var data = decodeURIComponent(location.search.split("=")[1]);  
  document.querySelector("#content").innerHTML = data;  
</script>  

攻击者构造链接：

http://example.com/?data=<img src=x onerror=stealCookie()>  

防御方案：

// 转义特殊字符后再插入  
function escapeHTML(str) {  
  return str.replace(/[&<>"']/g, char => ({  
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'  
  }[char]));  
}  
document.querySelector("#content").innerHTML = escapeHTML(data);  

7. 总结

DOM型XSS的核心风险在于前端代码对用户数据的不安全处理。防御需结合安全编码实践（转义/净化）、CSP策略与代码审计，形成客户端防护体系。其隐蔽性要求开发者在设计交互功能时，始终将客户端数据视为潜在威胁源。