如何安全地过滤 HTML 标签：避免正则陷阱，推荐使用专业 HTML 净化库

心靈之曲 2026-01-22 00:00:00 次阅读

本文讲解为何不应使用正则表达式清理 html 标签，以及如何借助 sanitize-html 或 dompu

rify 等成熟库，精准保留指定标签（如 ``、``），安全移除所有非法标签及属性。

HTML 是一种嵌套结构复杂的标记语言，其语法允许标签嵌套、自闭合（如）、属性值含引号/等号/尖括号（如

b">）、注释（）、CDATA 段甚至恶意构造的畸形标签（如 ipt>）。试图用正则表达式（如 /]*>/g）匹配并剔除非白名单标签，看似简洁，实则存在根本性缺陷：

无法正确处理嵌套与边界：正则无法识别标签层级，易误删或漏删；
属性解析不可靠：[^>]* 会因属性中出现 >（如 php.cn/link/5cd580b09d20ca28f5aeaeb0d505bc6d">）而提前截断；
忽略实体编码与转义：如 zuojiankuohaophpcn、
存在严重 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 = '@@##@@TestPassedwithout any errorsclick here';
const clean = DOMPurify.sanitize(input, config);
console.log(clean); 
// 输出: "TestPassedwithout any errorsclick here"

✅ 推荐方案二：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，仍需确保上下文安全（如避免插入到
定期更新依赖：DOMPurify 和 sanitize-html 持续修复新发现的 bypass 技巧，保持版本最新至关重要。

总之，HTML 净化不是字符串替换问题，而是语义解析与安全策略问题。放弃正则幻想，拥抱经过实战检验的专业工具——这是保障 Web 应用免受 XSS 攻击的第一道也是最关键的防线。