防范DOM型XSS的HTML标签安全转义与文档结构净化底层策略-html教程-PHP中文网

dom型xss源于前端将未净化的不可信数据直接传入innerhtml、document.write等危险api，而非后端过滤缺失；关键在是否未经净化进入dom解析流程，需用dompurify白名单净化并配合trusted types强制类型约束。

防范dom型xss的html标签安全转义与文档结构净化底层策略

DOM型XSS不是后端没过滤好，而是前端把不可信数据直接塞进危险API——innerHTML、document.write、location.hash这些地方一松手，攻击就进来了。

哪些HTML操作会触发DOM型XSS

关键不在“有没有用户输入”，而在“是否未经净化就进入DOM解析流程”。常见触发点包括：

element.innerHTML = userContent —— 即使后端返回的是纯文本，只要前端用innerHTML写入，就可能执行<script></script>或onerror=alert(1)
document.write(location.search.slice(1)) —— URL参数被原样写入文档流，?x=<img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="防范DOM型XSS的HTML标签安全转义与文档结构净化底层策略">立刻生效
eval('var a = ' + location.hash.slice(1)) —— 用eval解析URL片段，等同于把攻击者代码交由JS引擎执行
iframe.srcdoc = userHtml —— srcdoc内容被当作完整HTML文档解析，无任何默认转义

为什么不能只靠正则过滤HTML标签

正则匹配<script></script>或javascript:是典型防御错位：攻击者早就不写<script></script>了，改用<img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="防范DOM型XSS的HTML标签安全转义与文档结构净化底层策略">、<svg onload="..."></svg>、甚至 style="max-width:90%">绕过。更麻烦的是，浏览器对HTML的解析规则远比正则复杂（比如注释内换行、属性名大小写混用、Unicode变体等）。

真正可靠的做法是交给专业净化器处理，例如：

用DOMPurify.sanitize(dirtyHTML, { ALLOWED_TAGS: ['b', 'i', 'p'], ALLOWED_ATTR: ['class'] }) —— 白名单制，未声明的标签/属性一律剔除
禁用ADD_TAGS和ADD_ATTR扩展配置，避免误开攻击面
配合RETURN_DOM_FRAGMENT返回DocumentFragment，再用append()插入，避免二次解析风险

Vue/React里v-html和dangerouslySetInnerHTML怎么用才安全

这两个API本身没错，错在绕过框架默认防护还假装“已处理”。真实项目中必须满足两个前提：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

传入内容必须来自DOMPurify.sanitize()处理后的结果，且配置项显式锁定（不能依赖默认值）
禁止将location.hash、localStorage.getItem()、URLSearchParams.get()等原始输入直接喂给v-html，中间必须过净化
Vue3中若用defineCustomElement封装富文本组件，需在props校验层就拒绝含on*、javascript:、data:text/html的内容

示例错误写法：<div v-html="userInput"></div>；正确写法：<div v-html="DOMPurify.sanitize(userInput, {ALLOWED_TAGS: []})"></div>（空白ALLOWED_TAGS表示只允许纯文本）

Trusted Types不是可选项，是现代浏览器的强制约束入口

Chrome 83+、Edge 83+、Firefox 93+ 已支持Trusted Types，它从机制上封死innerHTML等API接收原始字符串的能力。启用后，所有危险赋值都必须通过trustedTypes.createPolicy()创建的策略对象生成可信类型（如TrustedHTML）。

实际落地要点：