HTML 实体编码：特殊字符转义

显示

在网页上变 HTML 标签、用户输入含 " 导致 XSS 攻击——HTML 实体编码解决这些。本文详解 HTML 实体。

什么是 HTML 实体？

HTML 实体是用 & 开头、; 结尾的字符串，表示特殊字符：

&lt;   →  <
&gt;   →  >
&amp;  →  &
&quot; →  "
&apos; →  '
&nbsp; →  (空格)

为什么需要实体？

1. 显示 HTML 标签字面

<p>用 &lt;div&gt; 创建容器</p>

显示：用

创建容器。

2. 防止 XSS 攻击

用户输入，直接渲染会执行。先转义：

&lt;script&gt;alert('xss')&lt;/script&gt;

显示为文本，不执行。

3. 显示特殊符号

字符	实体
©	©
®	®
™	™
€	€
¥	¥
£	£
¢	¢
§	§
¶	¶
•	•
…	…
—	—
–	–
"	“ "
'	‘ '
←	←
→	→
↑	↑
↓	↓
★	☆
✓	✓
✗	✗

4. 连续空格

HTML 默认空格折叠为一个。表示不换行空格：

<p>多   空格</p>           <!-- 显示：多 空格 -->
<p>多&nbsp;&nbsp;&nbsp;空格</p>  <!-- 显示：多   空格 -->

5. 软换行

或长单词可断行处。

必转义字符

5 个特殊字符必须转义：

字符	实体	用途
`<`	`<`	标签起始
`>`	`>`	标签结束
`&`	`&`	实体起始
`"`	`"`	属性值
`'`	`'`	属性值（单引号）

52tool HTML 实体工具

工具地址：HTML 实体编码

功能

HTML 编码（实体化）
HTML 解码（去实体）
编号实体（<）和命名实体（<）切换
浏览器端处理

实战 1：编码

输入：

<div class="box">Hello & "World"</div>

输出：

&lt;div class=&quot;box&quot;&gt;Hello &amp; &quot;World&quot;&lt;/div&gt;

实战 2：解码

输入：

&lt;script&gt;alert(1)&lt;/script&gt;

输出：

<script>alert(1)</script>

编程实现

JavaScript

// 编码
function htmlEncode(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

// 解码
function htmlDecode(str) {
  const div = document.createElement('div');
  div.innerHTML = str;
  return div.textContent;
}

// 或用正则
function htmlEncode(str) {
  return str.replace(/[<>&"']/g, c => ({
    '<': '&lt;',
    '>': '&gt;',
    '&': '&amp;',
    '"': '&quot;',
    "'": '&#39;'
  })[c]);
}

Python

import html

# 编码
encoded = html.escape('<div>Hello & "World"</div>')
# '&lt;div&gt;Hello &amp; &quot;World&quot;&lt;/div&gt;'

# 解码
decoded = html.unescape('&lt;script&gt;alert(1)&lt;/script&gt;')
# '<script>alert(1)</script>'

PHP

// 编码
$encoded = htmlspecialchars('<div>Hello & "World"</div>', ENT_QUOTES);
// '&lt;div&gt;Hello &amp; &quot;World&quot;&lt;/div&gt;'

// 解码
$decoded = htmlspecialchars_decode('&lt;script&gt;alert(1)&lt;/script&gt;');

Java

import org.apache.commons.text.StringEscapeUtils;

String encoded = StringEscapeUtils.escapeHtml4("<div>Hello</div>");
String decoded = StringEscapeUtils.unescapeHtml4("&lt;div&gt;");

实战场景

场景 1：显示代码

在网页显示 HTML 代码：

<pre>&lt;div class="box"&gt;
  Hello
&lt;/div&gt;</pre>

显示为代码块。

场景 2：用户评论防 XSS

用户输入：

<script>fetch('/api/user', {credentials: 'include'})</script>

后端转义后存数据库，渲染时安全：

&lt;script&gt;fetch('/api/user', {credentials: 'include'})&lt;/script&gt;

显示为文本，不执行。

场景 3：属性值转义

<input value="用户输入">

如果用户输入含 "，会破坏 HTML。先转义：

<input value="用户&quot;输入">

场景 4：URL 参数

URL 中的特殊字符转义用 URL 编码（不是 HTML 实体）：

https://example.com/?q=hello%20world

参考 URL 编解码。

场景 5：JSON 数据

JSON 字符串中的双引号需转义：

{
  "text": "He said \"Hello\""
}

参考 JSON 格式化。

XSS 防御

1. 输出转义

所有用户输入在渲染前转义：

function safeRender(userInput) {
  const div = document.createElement('div');
  div.textContent = userInput;  // 自动转义
  document.body.appendChild(div);
}

2. 不同上下文不同转义

#### HTML 上下文

<div>{userInput}</div>

转义 < > & " '。

#### 属性上下文

<input value="{userInput}">

转义 " &。

#### JavaScript 上下文

const data = { userInput: "{userInput}" };

转义 ' " \，并加 JSON.stringify。

#### URL 上下文

<a href="{userInput}">link</a>

验证 URL 协议（禁止 javascript:），URL 编码。

3. CSP 防护

Content Security Policy 限制脚本来源：

Content-Security-Policy: script-src 'self'

即使 XSS 注入