DOM型XSS漏洞源于前端脚本将用户可控数据未经安全处理直接写入DOM敏感位置，如innerHTML、eval等，导致恶意代码执行。其核心特点是完全在浏览器端发生，不依赖服务器反射或存储，攻击者通过构造URL或操控本地数据触发漏洞。与反射型和存储型XSS不同，DOM型XSS的“投毒”过程由前端代码自主完成，即使服务器返回干净页面仍可能被利用。常见危险函数包括innerHTML、outerHTML、document.write、eval、setTimeout及script标签src属性等，这些操作若接收用户输入且未过滤，极易成为攻击入口。查找此类漏洞需结合静态分析与动态调试：通过开发者工具在Sources面板设置断点追踪数据流，在Elements面板观察DOM变化，使用Console模拟payload注入，并全局搜索location.hash、location.search等数据源及sink函数定位风险点。防御关键在于对所有外部输入进行严格编码或净化，优先使用textContent代替innerHTML显示文本，必要时借助DOMPurify等库净化HTML；避免执行用户控制的字符串，校验URL协议合法性，并配合CSP策略限制脚本执行，形成多层防护。
HTML DOM型XSS漏洞的查找，核心在于追踪客户端脚本中不可信的用户输入，看它是否在未经过滤或不当处理的情况下，被直接写入了DOM结构中的“敏感位置”，从而导致恶意代码执行。这与服务器端反射或存储型XSS有所不同，它完全发生在浏览器端，是前端脚本处理数据不当的产物。
解决方案
要深入查找DOM型XSS，我们通常需要结合静态代码审计和动态运行时分析。首先，我的经验告诉我，最直接的方法是像个侦探一样，去追踪那些可能被用户控制的“数据源”——比如location.hash、location.search、document.referrer，甚至是localStorage、sessionStorage或通过postMessage接收到的数据。这些都是前端脚本常常会直接获取并使用的信息。
追踪到这些源头后，下一步就是看这些数据流向了哪里。哪些JavaScript函数或DOM属性会“消费”这些数据，并将它们插入到HTML结构中？这些“消费点”就是我们常说的“sink”（接收器），例如innerHTML、outerHTML、document.write()、eval()、setTimeout()、setInterval()，甚至是script标签的src属性，或者标签的href属性如果被用于javascript:伪协议。
整个过程有点像玩“管道工”游戏：找到入口（source），找到出口（sink），然后看看中间有没有“漏洞”让恶意数据溜进去。这往往需要我们耐心地阅读前端JavaScript代码，尤其关注那些涉及到字符串拼接、DOM操作、以及任何可能执行代码的函数调用。
立即学习“前端免费学习笔记（深入）”；
DOM型XSS与反射型/存储型XSS有何本质区别？
说实话，很多人在初学XSS的时候，会把这几种类型搞混。但理解它们之间的区别，对于我们定位和防御漏洞至关重要。我个人觉得，DOM型XSS最本质的特点就是它的“本地性”和“无服务器依赖性”。
简单来说，反射型XSS和存储型XSS都需要服务器参与。反射型是服务器把用户提交的恶意内容“原样”或“不当处理后”又吐回给浏览器，浏览器一解析就中招了。存储型更狠，恶意内容先被服务器存起来，下次任何访问这个页面的用户都可能中招。这两种，攻击者都是通过服务器来“投毒”的。
而DOM型XSS呢？它是个纯粹的前端问题。服务器可能提供了一个完全“干净”的页面，没有任何恶意代码。但页面加载后，前端的JavaScript代码自己“作死”了。它从浏览器环境中的某个地方（比如URL的哈希部分、查询参数、甚至是一个Cookie值）获取了数据，然后没有经过充分的安全检查，就直接把这些数据插入到了DOM中，导致了恶意脚本的执行。所以，攻击者并不需要服务器的“反射”或“存储”，他只需要构造一个特殊的URL，诱导用户点击，或者通过其他手段（比如控制Cookie）来影响前端脚本的行为。这种情况下，即使服务器对所有用户输入都做了严格编码，前端代码的不当处理依然可能导致漏洞。
前端代码中哪些“危险函数”或“危险操作”是DOM型XSS的常见温床？
在我的实际工作中，发现一些特定的JavaScript函数和DOM属性简直就是DOM型XSS的“重灾区”。它们功能强大，但也因此容易被滥用。
首先，innerHTML和outerHTML绝对是榜首。当我们需要动态更新页面内容时，这两个属性非常方便，但如果我们将用户可控的、未经净化的字符串直接赋给它们，那几乎是敞开了大门欢迎XSS。比如：
// 假设 'userInput' 来自 location.hash 或查询参数
document.getElementById('content').innerHTML = userInput; // 危险！类似地，document.write()也是一个大坑，它直接向文档流写入内容，同样容易被利用。
其次，涉及代码执行的函数，如eval()、setTimeout()和setInterval()，如果它们的参数是用户可控的字符串，那风险就极高了。
// 假设 'callback' 也是用户可控的 eval(callback); // 极度危险！ setTimeout(userControlledCode, 1000); // 危险！
还有，动态创建script元素并设置其src属性，或者直接在script标签中插入内容，如果内容来自用户，那也是致命的。
var s = document.createElement('script');
s.src = userControlledUrl; // 如果用户能控制 URL，可以加载恶意脚本
document.body.appendChild(s);再者，标签的href属性如果被赋予javascript:伪协议，也是一个经典的攻击点。
// 如果 userInput 是 "javascript:alert(1)"
document.getElementById('mylink').href = userInput; // 危险！此外，像img标签的src属性、iframe的src属性、甚至style标签的内容，如果能被用户以某种方式控制，都可能被用来注入恶意内容或执行脚本。识别这些“危险操作”，是进行DOM型XSS审计的关键。
如何利用浏览器开发者工具高效定位潜在的DOM XSS漏洞？
开发者工具简直是前端安全审计的瑞士军刀。定位DOM XSS，它能提供无与伦比的便利。
我的习惯是，首先打开浏览器的开发者工具（通常是F12），然后切换到“Sources”标签页。在这里，我们可以对JavaScript代码进行动态调试。一个非常有效的策略是，在那些我们怀疑可能成为“sink”的DOM操作函数上设置断点。例如，你可以在innerHTML、document.write这些关键字上搜索，然后找到对应的代码行，设置一个断点。
当页面执行到这些断点时，程序会暂停，我们就可以检查此时的变量值，特别是那些即将被写入DOM的字符串。如果发现某个字符串包含了我们之前注入的测试payload（比如），并且这个payload没有被正确编码或净化，那么恭喜你，你很可能找到了一个漏洞点。
此外，在“Elements”标签页，我们可以实时观察DOM的变化。当页面加载或用户交互时，你可以留意DOM树中是否有异常的节点被创建或修改，尤其是那些包含可疑内容的script标签、iframe或者带有on*事件处理器的元素。
“Console”标签页也很有用。你可以尝试直接在控制台执行一些DOM操作，模拟漏洞利用，看看是否能成功。比如，手动设置location.hash为一个XSS payload，然后观察页面的反应。
一个更高级的技巧是利用浏览器的“搜索”功能（通常是Ctrl+Shift+F或Cmd+Option+F），在所有加载的脚本中搜索“危险函数”的关键字，比如innerHTML、eval、location.hash等。这能帮助我们快速定位到所有可能存在风险的代码片段，然后我们再逐一分析这些片段的数据流向。这种组合拳下来，大部分DOM XSS都无处遁形。
编写代码时，有哪些防御措施可以有效避免DOM型XSS的产生？
预防总是优于治疗。在编写前端代码时，有一些黄金法则可以帮助我们有效避免DOM型XSS的产生。
最核心的一点是：永远不要相信任何来自用户或外部环境的数据。任何要插入到DOM中的数据，都必须经过严格的净化（Sanitization）或编码（Encoding）。
具体来说，如果只是想在页面上显示文本内容，最安全的做法是使用textContent或innerText，而不是innerHTML。它们会自动对内容进行编码，确保不会被解析为HTML标签。
// 安全的做法
document.getElementById('message').textContent = userInput;如果确实需要插入HTML结构，那么就必须使用一个经过充分测试和验证的安全库来进行净化。例如，DOMPurify就是一个非常优秀的JavaScript库，它可以帮助我们从HTML字符串中移除所有潜在的XSS攻击载荷。
// 使用 DOMPurify 进行净化
var cleanHtml = DOMPurify.sanitize(userInput);
document.getElementById('content').innerHTML = cleanHtml;另一个重要的防御策略是避免使用eval()、setTimeout()、setInterval()等函数来执行用户可控的字符串。如果确实需要动态执行代码，应该考虑使用更安全的方式，比如将数据转换为JSON对象，然后进行属性访问，而不是直接执行字符串。
对于URL的处理，特别是涉及到标签的href属性或img标签的src属性时，一定要对URL进行严格的校验。确保URL的协议是http、https，而不是javascript:或其他可疑协议。
function isValidUrl(url) {
try {
const u = new URL(url);
return u.protocol === 'http:' || u.protocol === 'https:';
} catch (_) {
return false;
}
}
if (isValidUrl(userSuppliedUrl)) {
document.getElementById('link').href = userSuppliedUrl;
} else {
document.getElementById('link').href = '#'; // 或其他安全默认值
}最后，别忘了内容安全策略（Content Security Policy, CSP）。虽然CSP不能完全阻止DOM型XSS，但它可以作为一道强大的防线，限制页面上可执行脚本的来源，禁止内联脚本和eval等操作，从而大大降低XSS攻击的成功率和危害。合理配置CSP，可以为你的前端应用提供额外的安全层。
这些措施并非孤立，而是需要综合运用。前端安全是一个持续的挑战，需要开发者始终保持警惕。
