HTML 标签过滤：为何应避免正则表达式而选用专业 HTML 清洗库

碧海醫心 2026-01-22 00:00:00 次阅读

直接使用正则表达式匹配并剔除非法 html 标签存在严重安全与可靠性风险；推荐采用 dompurify、sanitize-html 等成熟库实现白名单式标签过滤，兼顾准确性、xss 防护与跨平台兼容性。

HTML 是嵌套、不规则且语法宽松的标记语言——自闭合标签（如）、大小写混用（）、属性中含 >（如 title=">click me"）、注释、CDATA 区段、命名实体等都会让正则表达式迅速失效。您尝试的 /]*>/g 表面看似可行，但实际会错误匹配或遗漏多种合法结构：

❌ 错误捕获： 中的 strong 属于白名单，但正则 (?!a|b|...) 在
❌ 无法处理嵌套边界：正则无状态，无法识别 ... 中是否在内部；

❌ XSS 漏洞温床：绕过正则的攻击向量极多，例如或 svg onload=alert(
1)> 可完全逃逸简单标签名校验。

✅ 正确做法是交由专为 HTML 设计的解析器处理。以下是两个主流方案：

1. 前端首选：DOMPurify（轻量、高效、主动维护）

import DOMPurify from 'dompurify';

const allowedTags = ['a', 'b', 'i', 's', 'u', 'sup', 'sub', 'strong', 'cite', 'code', 'del', 'em'];
const cleanConfig = {
  ALLOWED_TAGS: allowedTags,
  ALLOWED_ATTR: ['href', 'title'], // 可选：限制属性
  FORBID_TAGS: ['script', 'style'],
  KEEP_CONTENT: true // 移除非白名单标签时保留其文本内容（如 `hello` → `hello`）
};

const input = '@@##@@TestPassedwithout any errorsclick here';
const cleaned = DOMPurify.sanitize(input, cleanConfig);
// 输出: "TestPassedwithout any errorsclick here"

2. Node.js 后端：sanitize-html（服务端必备）

const sanitizeHtml = require('sanitize-html');

const options = {
  allowedTags: ['a', 'b', 'i', 's', 'u', 'sup', 'sub', 'strong', 'cite', 'code', 'del', 'em'],
  allowedAttributes: { a: ['href', 'title'] },
  disallowedTagsMode: 'recursiveEscape' // 移除非白名单标签并转义其内容（防 XSS）
};

const cleaned = sanitizeHtml(input, options);

⚠️ 关键安全原则：

永远服务端清洗：前端 JS 可被绕过，PHP/Python/Java 后端必须独立执行清洗（如 Symfony HTML Sanitizer、OWASP Java HTML Sanitizer）；
不要信任“已清洗”的输入：即使前端用了 DOMPurify，服务端仍需二次校验；
属性比标签更危险：onerror、javascript:、data: 协议等需严格限制，DOMPurify 默认已防御此类向量。

总结：正则处理 HTML 是技术债的起点，而非解决方案。用对工具——DOMPurify（浏览器）、sanitize-html（Node）、Symfony HtmlSanitizer（PHP）等——才能真正实现安全、可维护、符合标准的 HTML 白名单过滤。