防范 dom 型 xss 的关键是切断不可信数据到执行环境的直通路径,应使用 textcontent 替代 innerhtml、禁用 document.write、动态创建元素用 dom api、必须渲染 html 时用 dompurify 净化、禁用 eval 等动态执行 api、启用 csp 作为兜底策略。

防范 DOM 型 XSS 的关键,不是“堵住所有输入”,而是**切断不可信数据到执行环境的直通路径**。恶意代码之所以能运行,是因为前端 JavaScript 把 URL 参数、localStorage 数据、表单值等“用户可控内容”,未经处理就交给了 innerHTML、document.write、eval()、setTimeout(string) 或事件处理器(如 onclick 属性)这类危险 API。
只用安全的 DOM 写入方式
浏览器原生提供了不解析 HTML 的文本写入方法,这是最基础也最有效的防线:
-
用
textContent替代innerHTML:只要内容不需要渲染 HTML 标签,一律使用element.textContent = data。它会把所有字符当纯文本显示,<script>alert(1)</script>也会原样输出,不会执行。 -
避免
document.write和document.writeln:这两个方法在页面加载后调用会清空整个文档,且天然支持脚本执行,现代项目中应完全禁用。 -
动态创建元素时用 DOM API:比如要插入带样式的欢迎语,不要拼接字符串:
el.innerHTML = '<span class="name">' + name + '</span>';
而应写成:const span = document.createElement('span');<br>span.className = 'name';<br>span.textContent = name;<br>el.appendChild(span);
必须渲染 HTML 时,强制净化
富文本编辑器、后台配置的公告栏等场景确实需要保留部分 HTML。此时不能靠简单替换标签,必须用专业库做上下文感知的净化:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 引入
DOMPurify(轻量、活跃维护、支持 CSP 兼容模式); - 对用户输入的 HTML 字符串调用
DOMPurify.sanitize(dirtyHTML),它会移除 script、onerror、javascript: 等所有执行型内容,只保留安全标签和属性; - 再将净化后的结果赋给
innerHTML:el.innerHTML = DOMPurify.sanitize(userHtml);
警惕所有“动态执行”入口
DOM 型 XSS 的隐蔽性常来自被忽略的执行点:
-
URL 参数解析要校验:比如从
window.location.search或window.location.hash取值后,别直接拼进innerHTML或作为函数参数;先判断是否符合预期格式(如仅含字母数字),或转义后再用; -
禁用
eval()、Function()、setTimeout(string)、setInterval(string):这些 API 会把字符串当作代码执行,是高危红线; -
事件处理器不用字符串形式:避免
el.setAttribute('onclick', 'doSomething()'),改用el.addEventListener('click', doSomething); -
慎用
location.href跳转:如果跳转地址来自用户输入,需白名单校验协议(只允许https:、/开头),防止javascript:alert(1)注入。
启用 Content Security Policy(CSP)
CSP 是浏览器层面的兜底策略,能有效阻断内联脚本和非法外链执行:
- 通过 HTTP 响应头设置:
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; object-src 'none'; base-uri 'self'; - 关键作用:
— 禁止eval()和内联事件(onclick);
— 阻止非白名单域名的脚本加载;
— 关闭data:、javascript:协议执行; - 开发阶段可先用
Content-Security-Policy-Report-Only收集违规日志,再逐步收紧策略。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










