如何安全地过滤 HTML 标签：允许指定标签，移除其余所有（含属性）_技术教程

本文讲解为何不应使用正则表达式清洗 html，推荐采用专业 html 消毒库（如 dompurify 或 sanitize-html），并提供完整、安全、可落地的前端与后端协同过滤方案。

HTML 是一种嵌套结构复杂、语法灵活（如自闭合标签、CDATA、注释、命名空间等）的标记语言。试图用正则表达式匹配并剔除“非白名单标签”看似简洁，实则隐患重重——例如你的正则 /]*>/g 会在以下场景失效：

匹配失败（因 script 不在否定列表开头，但可能被误判为结束标签）；
无法识别 " alt="如何安全地过滤 HTML 标签：允许指定标签，移除其余所有（含属性）" > 中的 > 被包裹在属性值内，导致提前截断；
忽略 HTML 注释、CDATA 区段或 SVG 内联标签；
对大小写不敏感处理缺失（如）；
更严重的是：正则无法解析 DOM 结构，无法防范基于标签嵌套、事件属性（onerror）、伪协议（javascript:）等的 XSS 攻击。

✅ 正确做法：使用专为 HTML 净化设计的成熟库。

✅ 推荐方案：DOMPurify（前端首选）

DOMPurify 是由 Cure53 团队维护的、经严格安全审计的轻量级库，支持白名单机制，自动处理转义、属性过滤、SVG 安全策略等：

const allowedTags = ['a', 'b', 'i', 's', 'u', 'sup', 'sub', 'strong', 'cite', 'code', 'del', 'em'];

const cleanHTML = DOMPurify.sanitize(dirtyHTML, {
  ALLOWED_TAGS: allowedTags,
  // 可选：限制 a 标签仅允许 href（且自动校验为安全协议）
  ALLOWED_ATTR: ['href'],
  FORBID_ATTR: ['onerror', 'onclick', 'javascript:', 'data-*'], // 显式禁止危险属性
  KEEP_CONTENT: true // 移除非允许标签时保留其文本内容（对应示例中 span 的 "without any errors"）
});

// 输入示例将被安全净化为：
// "TestPassedwithout any errorsclick here"

⚠️ 注意：KEEP_CONTENT: true 是实现你示例中 without any errors → "without any errors" 的关键配置，它确保被移除标签的子文本不丢失。

✅ 后端必须同步消毒（不可省略！）

前端净化仅用于用户体验优化与基础防护；攻击者可绕过 JS 直接提交恶意 payload。因此服务端必须独立执行同等强度的消毒：

Node.js：继续使用 sanitize-html（更细粒度配置）或 DOMPurify（服务端需搭配 JSDOM）；
PHP：使用 Symfony HtmlSanitizer（v6.2+ 内置，支持白名单 + 属性控制 + XSS 防御）；
Python：推荐 bleach（基于 html5lib，支持白名单与 CSS 过滤）；
Java：使用 OWASP Java HTML Sanitizer。

示例（Symfony PHP）：

use Symfony\Component\HtmlSanitizer\HtmlSanitizer;
use Symfony\Component\HtmlSanitizer\Rule\TagRule;

$sanitizer = new HtmlSanitizer([
  (new TagRule('a'))->withAllowedAttributes(['href']),
  // 允许的标签列表...
  new TagRule('b'), new TagRule('i'), /* ... */
]);
$clean = $
sanitizer->sanitize($userInput);