HTML 转义/反转义
将 &、<、>、"、' 等特殊字符转换为 HTML 实体(转义),或将实体还原为原始字符(反转义)。适用于防范 XSS 攻击及在 HTML 中嵌入文本。
常用命名 HTML 实体一览
| 字符 | 命名实体 | 数字字符引用 | 说明 |
|---|---|---|---|
| & | & | & | 和号(表示"and"的符号) |
| < | < | < | 小于号(与 HTML 标签的起始字符相同) |
| > | > | > | 大于号(与 HTML 标签的结束字符相同) |
| " | " | " | 双引号(属性值的分隔符) |
| ' | ' | ' | 单引号(属性值的分隔符) |
| |   | 不换行空格(不会触发换行的空白字符) | |
| © | © | © | 版权符号 |
| ® | ® | ® | 注册商标符号 |
| ™ | ™ | ™ | 商标符号 |
| € | € | € | 欧元符号 |
| ¥ | ¥ | ¥ | 日元符号 |
| ¢ | ¢ | ¢ | 美分符号 |
什么是 HTML 转义
HTML 转义是把 &・<・>・"・' 这五个特殊字符,转换为浏览器不会当作语法解析的其他表记(HTML 实体)的处理。若把用户输入的字符串原样嵌入 HTML,< 与 > 会被误认为标签的开始与结束而导致排版错乱,还可能引发 <script> 之类恶意代码被执行的 XSS(跨站脚本)。HTML 转义正是防范该风险的基本对策。
反转义则相反,是把 & 之类具名实体或 & 之类数值字符引用还原为原本字符的处理。适用于从其他网站复制 HTML 源码时,或查看 CMS、论坛的发帖数据时,希望把以实体表记难以阅读的原文还原出来的场合。转换仅由浏览器内的 JavaScript 完成,输入内容不会发送至外部。
HTML 转义的使用方法
- 选择模式 若想把字符转换为实体请选择“转义”,若想把实体还原为原本字符请选择“反转义”。
- 把文本粘贴到输入栏 把想嵌入 HTML 的字符串,或含有实体表记的字符串粘贴到输入栏。
- 确认转换结果 输入的同时会实时反映到下方的转换结果栏。重新编辑输入则每次都会重新计算。
- 复制结果 可用“复制”按钮把转换结果送入剪贴板,直接粘贴到 CMS 正文或源代码中。
用好本工具的小技巧
- HTML 转义是防范 XSS(跨站脚本攻击)的基础手段。在将用户输入嵌入 HTML 之前,务必先进行转义处理。
&必须最先转义。如果先转换其他字符,新生成的&中的&会被再次转义,造成重复转义。- 在属性值中嵌入字符串时,除了
"(双引号)外,最好连'(单引号)也一并转义,这样更安全。 - 本工具支持将十进制数字引用(
&)、十六进制数字引用(&)以及常用命名实体(如&)反转义还原。 - 许多模板引擎(Blade、JSX、Vue 等)在插入变量时会自动进行 HTML 转义,但如果使用
{!! !!}或 v-html 这类"原始 HTML 输出"语法,就需要自行手动转义。
HTML 转义的应用场景
在 CMS、博客文章中嵌入引用
在正文中刊载程序代码或其他网站的引文时,若把含 <、> 的字符串原样粘贴,会被误认为标签而导致显示错乱。事先转义后再粘贴即可安全显示。
确认论坛、评论区的发帖内容
想查看以实体表记原样保存在论坛或评论区数据库中的发帖时,可用反转义还原为原文以便阅读。
在 Markdown 中嵌入 HTML 片段
若想在 Markdown 文档中原样显示 HTML 标签的示例或示例代码,事先转义即可避免被 Markdown 解析器或浏览器当作标签解析,从而以字符串形式显示。
HTML 模板的调试
在模板引擎输出的 HTML 源码中查找意外被转义(或遗漏转义)之处时,也可用于对照转换前后的字符串。
术语集
- HTML 实体(字符实体引用)
- 在 HTML 文档中安全显示具有特殊含义之字符的表记法。具名形式以「&」开头、以「;」结尾,如
&。 - 数值字符引用
- 以 Unicode 码位编号指定字符的表记法。十进制写作
&,十六进制写作&,二者表示同一字符。 - XSS(跨站脚本)
- 用户输入中所含脚本未经转义即被嵌入页面,从而在其他用户浏览器中执行非预期代码的漏洞。HTML 转义是代表性的对策之一。
- 净化(sanitize)
- 泛指从外部接收的数据中去除危险要素、或将其转换为无害形式的处理。HTML 转义是净化的一种。
- &(和号)的转义
- 转义处理中应最先转换的字符。若先转换其他字符,生成的
&等中的&也会被二次转义,因此处理顺序至关重要。 - 属性值的分隔符
- 指包裹 HTML 标签属性值的
"(双引号)或'(单引号)。属性值中若含这些字符而不转义,便会被误认为属性的分隔。
常见问题
<、>、& 这三个字符会被 HTML 解析器当作语法的一部分来解释。如果忘记转义,浏览器可能会误认为是标签的开始或结束,从而导致页面布局错乱,甚至引发XSS(恶意脚本注入)攻击。&、<、>、"、' 这 5 个字符。表情符号和中文等非 ASCII 字符在现代 UTF-8 环境下可以直接安全显示,无需转换。
闲话 ― 继承自 SGML 的"字符引用"机制
HTML 实体(字符引用)的起源可以追溯到 HTML 的前身 SGML(标准通用标记语言)。1986 年标准化的 SGML 就已经具备了"字符引用"机制,用于在正文中使用标签分隔符 < 本身。HTML 几乎原封不动地继承了这一机制,早在 20 世纪 90 年代 HTML 的初期规范中,<、>、& 等基本命名实体就已经被定义。
在 Unicode 尚未普及的年代,命名实体最初被广泛用于在纯 ASCII 环境下显示印刷用的特殊符号,例如版权符号 ©、注册商标符号 ® 以及各种希腊字母。HTML5 规范最终定义了超过 2000 种命名实体,甚至涵盖了对勾符号、音符符号等冷门字符。
如今随着 UTF-8 编码的普及,为避免乱码而使用字符引用的必要性已大大降低。但 <、>、& 这三个字符至今仍必须转义,原因完全不同:它们对 HTML 解析器而言具有特殊的语法含义(分别代表标签的开始、结束以及实体的开始),一旦忘记转义,就可能直接导致页面布局错乱或引发XSS 漏洞。