DevToolkit Pro

什么是 HTML 实体编码

HTML 实体编码（HTML Entity Encoding）是将特殊字符转换为以 & 开头、; 结尾的安全字符串的过程。它用于在 HTML 中安全地显示特殊字符。

常见 HTML 实体

| 字符 | 实体名称 | 实体编号 | 说明 | |------|---------|---------|------| | < | < | < | 小于号 | | > | > | > | 大于号 | | & | & | & | 和号 | | " | " | " | 双引号 | | ' | ' | ' | 单引号 | | |   |   | 非断行空格 | | © | © | © | 版权符号 | | ® | ® | ® | 注册商标 |

为什么需要 HTML 实体编码

1. 防止 XSS 攻击：用户输入中的 <script> 标签会被转义为安全文本
2. 显示特殊字符：在 HTML 中显示 <、>、& 等字符
3. 国际化支持：显示特殊符号和字符
4. 模板引擎输出：确保动态内容安全渲染
5. 邮件模板：邮件 HTML 需要更严格的转义
6. 富文本编辑器：安全地保存和显示用户内容

XSS 防护示例

危险的未转义输出

<!-- 用户输入：<script>alert('XSS')</script> -->
<div>{{ user_input }}</div>

<!-- 渲染结果（危险！） -->
<div><script>alert('XSS')</script></div>

安全的转义输出

<!-- 用户输入：<script>alert('XSS')</script> -->
<div>&lt;script&gt;alert(&#39;XSS&#39;)&lt;/script&gt;</div>

<!-- 渲染结果（安全） -->
<div>&lt;script&gt;alert('XSS')&lt;/script&gt;</div>

如何使用在线工具

使用 DevToolkit Pro 的 HTML 实体编码/解码工具：

1. 输入要编码或解码的文本
2. 选择编码模式：
   • 编码：将特殊字符转为 HTML 实体
   • 解码：将 HTML 实体转回原始字符
3. 支持实体名称和实体编号

代码中的 HTML 转义

JavaScript

// 编码
function escapeHtml(text) {
  const map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  return text.replace(/[&<>"']/g, m => map[m]);
}

// 解码
function unescapeHtml(text) {
  const map = {
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
    '&quot;': '"',
    '&#039;': "'"
  };
  return text.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, m => map[m]);
}

Python

import html

# 编码
text = '<script>alert("XSS")</script>'
encoded = html.escape(text)
# 输出：&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

# 解码
decoded = html.unescape(encoded)
# 输出：<script>alert("XSS")</script>

FAQ

HTML 编码和 URL 编码有什么区别？

HTML 编码用于 HTML 文档中的特殊字符（< → <）。URL 编码用于 URL 中的特殊字符（空格 → %20）。两者解决不同场景的问题。

为什么 & 要先转义？

& 是 HTML 实体的起始字符。如果 & 不先转义，后续的转义字符会被错误解析。例如：< 如果 & 没转义，会被直接当成实体处理。

React 会自动转义吗？

React 默认对 JSX 中的变量进行自动转义。但如果使用 dangerouslySetInnerHTML，则不会转义，需要手动处理。

本文由 DevToolkit Pro 提供。更多开发者工具请访问 首页。