本文讲解为何不应使用正则表达式清理 html 标签，以及如何借助 sanitize-html 或 dompurify 等成熟库，精准保留指定标签（如 ``、``），安全移除所有非法标签及属性。
HTML 是一种嵌套结构复杂的标记语言，其语法允许标签嵌套、自闭合（如 ）、属性值含引号/等号/尖括号（如
）、注释（）、CDATA 段甚至恶意构造的畸形标签（如 ipt>）。试图用正则表达式（如 /]*>/g）匹配并剔除非白名单标签，看似简洁，实则存在根本性缺陷：
- 无法正确处理嵌套与边界：正则无法识别标签层级，易误删或漏删；
- 属性解析不可靠：[^>]* 会因属性中出现 >（如 php.cn/link/5cd580b09d20ca28f5aeaeb0d505bc6d">）而提前截断；
- 忽略实体编码与转义：如 <、
- 存在严重 XSS 风险：攻击者可利用事件属性（onerror）、JavaScript 协议（javascript:alert(1)）或标签混淆（）注入脚本。
✅ 正确做法是使用专为 HTML 净化设计的、经过安全审计的库：
✅ 推荐方案一：前端使用 DOMPurify（轻量、高效、默认安全）
npm install dompurify
import DOMPurify from 'dompurify';
const allowedTags = ['a', 'b', 'i', 's', 'u', 'sup', 'sub', 'strong', 'cite', 'code', 'del', 'em'];
const config = {
ALLOWED_TAGS: allowedTags,
// 可选：限制属性（如只允许 href、title）
ALLOWED_ATTR: ['href', 'title', 'target'],
// 自动移除不安全协议
FORBID_CONTENTS: false,
};
const input = '<b><i>@@##@@Test<strong>Passed</strong><span>without any errors</span><a href="http://example.com">click here</a></b></i>';
const clean = DOMPurify.sanitize(input, config);
console.log(clean);
// 输出: "<b><i>Test<strong>Passed</strong>without any errors<a href="http://example.com">click here</a></b></i>"✅ 推荐方案二：Node.js 后端使用 sanitize-html（更灵活配置）
npm install sanitize-html
const sanitizeHtml = require('sanitize-html');
const allowedTags = ['a', 'b', 'i', 's', 'u', 'sup', 'sub', 'strong', 'cite', 'code', 'del', 'em'];
const clean = sanitizeHtml(input, {
allowedTags: allowedTags,
allowedAttributes: {
'a': ['href', 'title', 'target'],
'*': [] // 其他标签不允许任何属性（可按需调整）
},
// 移除所有未明确允许的标签（含其内容）
disallowedTagsMode: 'discard'
});⚠️ 关键安全原则
- 永远服务端净化：前端 JS 可被绕过，用户提交的 HTML 必须在后端再次校验（例如 PHP 使用 Symfony HTML Sanitizer，Java 使用 OWASP Java HTML Sanitizer）；
- 不要信任“已净化”的前端输出：DOMPurify 的 sanitize() 返回的是字符串，若直接 innerHTML = clean，仍需确保上下文安全（如避免插入到 <script> 或事件属性中）；</script>
- 定期更新依赖：DOMPurify 和 sanitize-html 持续修复新发现的 bypass 技巧，保持版本最新至关重要。
总之，HTML 净化不是字符串替换问题，而是语义解析与安全策略问题。放弃正则幻想，拥抱经过实战检验的专业工具——这是保障 Web 应用免受 XSS 攻击的第一道也是最关键的防线。
