如何安全地过滤 HTML 标签:允许指定标签,移除其余所有(含属性)

阿浩酱_2363

阿浩酱_2363

2026-01-22

531人浏览

原创

如何安全地过滤 HTML 标签:允许指定标签,移除其余所有(含属性)

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

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

  • 匹配 <script>alert(1)</script> 失败(因 script 不在否定列表开头,但 可能被误判为结束标签);
  • 无法识别 中的 > 被包裹在属性值内,导致提前截断;
  • 忽略 HTML 注释 、CDATA 区段或 SVG 内联标签;
  • 对大小写不敏感处理缺失(如 );
  • 更严重的是:正则无法解析 DOM 结构,无法防范基于标签嵌套、事件属性(onerror)、伪协议(javascript:)等的 XSS 攻击。

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

✅ 推荐方案:DOMPurify(前端首选)

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

<script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
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")
});

// 输入示例将被安全净化为:
// "<b><i>Test<strong>Passed</strong>without any errors<a href="%5C%22http://example.com%5C%22">click here</a></i></b>"
⚠️ 注意:KEEP_CONTENT: true 是实现你示例中 without any errors → "without any errors" 的关键配置,它确保被移除标签的子文本不丢失。

✅ 后端必须同步消毒(不可省略!)

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

jm-jsjkxyjs02-zlm-405
jm-jsjkxyjs02-zlm-405

使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。

下载
  • 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);

✅ 总结:安全 HTML 过滤的黄金法则

  • ❌ 永远不要用正则表达式解析/修改 HTML;
  • ✅ 前端用 DOMPurify 实现即时、用户友好的白名单过滤;
  • ✅ 后端必须用语言原生消毒库做最终校验,且策略应与前端一致(避免“信任前端输出”);
  • ✅ 白名单优先:只允许明确需要的标签和属性,其余一律拒绝;
  • ✅ 敏感属性(如 href, src)需额外校验协议(仅允许 http://, https://, mailto: 等);
  • ✅ 日志记录非法输入,用于安全审计与规则迭代。

遵循以上实践,你不仅能精准达成“保留 等标签、剥离

前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
PHP Symfony框架
PHP Symfony框架

本专题专注于PHP主流框架Symfony的学习与应用,系统讲解路由与控制器、依赖注入、ORM数据操作、模板引擎、表单与验证、安全认证及API开发等核心内容。通过企业管理系统、内容管理平台与电商后台等实战案例,帮助学员全面掌握Symfony在企业级应用开发中的实践技能。

2025.09.11

6057

17

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4716

8

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

2023.07.05

3201

4

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

2023.07.05

8902

9

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

2023.08.11

812

5

正则表达式空格
正则表达式空格

正则表达式空格可以用“\s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。本专题为大家提供正则表达式相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

520

5

Python爬虫获取数据的方法
Python爬虫获取数据的方法

Python爬虫可以通过请求库发送HTTP请求、解析库解析HTML、正则表达式提取数据,或使用数据抓取框架来获取数据。更多关于Python爬虫相关知识。详情阅读本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.13

693

12

正则表达式空格如何表示
正则表达式空格如何表示

正则表达式空格可以用“\s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。想了解更多正则表达式空格怎么表示的内容,可以访问下面的文章。

2023.11.17

406

3

正则表达式中如何匹配数字
正则表达式中如何匹配数字

正则表达式中可以通过匹配单个数字、匹配多个数字、匹配固定长度的数字、匹配整数和小数、匹配负数和匹配科学计数法表示的数字的方法匹配数字。更多关于正则表达式的相关知识详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.12.06

739

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习