HTML 实体：编码特殊字符以实现安全的网页显示

为什么 HTML 编码很重要

HTML 使用特定字符作为其语法：< 和 > 用于标签，& 用于实体，" 用于属性值，' 用于替代属性引用。当这些字符出现在内容中（而非 HTML 结构）时，必须将其编码为 HTML 实体，以防止浏览器将其误解析为 HTML 语法。

未编码的特殊字符会导致两个主要问题：

1. HTML 损坏：浏览器将字符解析为标记，导致页面渲染错误
2. XSS 漏洞：未编码的用户输入显示时可能执行恶意脚本

HTML 实体语法

HTML 实体可以用三种形式表示：

命名实体

最易读的形式，使用标准名称：

• & → &
• < → <
• > → >
• " → "
• ' → '
•   → 不间断空格
• © → ©
• ® → ®
• ™ → ™
• € → €

十进制数字引用

使用 Unicode 码点的十进制形式：

• < → <（60 十进制）
• > → >（62 十进制）
• © → ©（169 十进制）
• € → €（8364 十进制）

十六进制数字引用

使用 Unicode 码点的十六进制形式（前缀 x）：

• < → <（0x3C 十六进制）
• > → >（0x3E 十六进制）
• © → ©（0xA9 十六进制）
• € → €（0x20AC 十六进制）

需要了解的 HTML 实体

安全关键五字符

显示用户生成的内容时，必须对这五个字符进行编码：

排版实体

常见的排版字符：

• — → —（长破折号）
• – → –（短破折号）
• ‘ ’ → ' '（弯单引号）
• “ ” → " "（弯双引号）
• … → …（省略号）
• • → •（项目符号）
• · → ·（中间点）

数学和科学符号

• × → ×（乘号）
• ÷ → ÷（除号）
• ± → ±（正负号）
• ° → °（度符号）
• ∞ → ∞（无穷大）
• ∑ → ∑（求和）
• π → π（圆周率）

箭头

• ← → ←（左箭头）
• → → →（右箭头）
• ↑ → ↑（上箭头）
• ↓ → ↓（下箭头）
• ↔ → ↔（左右箭头）

XSS 防护：HTML 编码

跨站脚本攻击（XSS）发生在用户输入未经编码直接显示在 HTML 中时：

<!-- 有漏洞：直接显示用户输入 -->
Hello, <?= $_GET['name'] ?>

<!-- 如果 name = "><script>alert('xss')</script>< 则变为： -->
Hello, "><script>alert('xss')</script><

<!-- 安全：编码后的输出 -->
Hello, <?= htmlspecialchars($_GET['name'], ENT_QUOTES, 'UTF-8') ?>

始终在输出时进行编码，而不仅仅在明显的显示位置。编码必须在输出点进行，而不是在输入时。

不同语言中的编码

JavaScript

function escapeHtml(text) {
  return text
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

Python

import html
safe = html.escape('<script>alert("xss")</script>')
# &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;

PHP

$safe = htmlspecialchars($input, ENT_QUOTES | ENT_HTML5, 'UTF-8');

使用 HTML 实体工具

我们的工具：

1. 编码文本 — 将特殊字符转换为 HTML 实体
2. 解码实体 — 将 HTML 实体转换回字符
3. 多种格式 — 选择命名实体、十进制或十六进制实体
4. 字符参考 — 浏览所有命名的 HTML 实体
5. 复制输出 — 一键复制编码/解码后的文本

对于处理用户生成内容、构建模板系统和测试 XSS 防护的 Web 开发者来说，这是必不可少的工具。