
直接使用正则表达式匹配并剔除非法 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 白名单过滤。











