HTML 实体编码完全指南：XSS 防护基础

HTML 实体编码是 Web 安全的基础。正确使用 HTML 编码可以有效防止 XSS 攻击。

什么是 HTML 实体编码？

HTML 实体编码是将特殊字符转换为 HTML 实体的过程。

< → &lt;
> → &gt;
& → &amp;
" → &quot;
' → &#x27;

为什么需要 HTML 编码？

XSS 攻击示例

<!-- 用户输入 -->
<script>alert('XSS')</script>

<!-- 如果直接插入 HTML -->
<div>欢迎 <script>alert('XSS')</script></div>

<!-- 编码后 -->
<div>欢迎 &lt;script&gt;alert('XSS')&lt;/script&gt;</div>

常用 HTML 实体

编码方法

JavaScript

function encodeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;');
}

// 使用 DOM API
function encodeHTML(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

Java

import org.apache.commons.text.StringEscapeUtils;

// 使用 Apache Commons Text
String encoded = StringEscapeUtils.escapeHtml4(input);

// 手动编码
public static String encodeHTML(String input) {
    return input
        .replace("&", "&")
        .replace("<", "&lt;")
        .replace(">", "&gt;")
        .replace(""", "&quot;")
        .replace("'", "&#x27;");
}

Python

import html

encoded = html.escape(input)
decoded = html.unescape(encoded)

解码方法

JavaScript

function decodeHTML(str) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = str;
  return textarea.value;
}

Java

String decoded = StringEscapeUtils.unescapeHtml4(encoded);

编码上下文

不同上下文需要不同的编码方式：

HTML 内容

<div>用户输入：&lt;script&gt;</div>

HTML 属性

<input value="&quot;hello&quot;">

JavaScript 字符串

var name = "\x3Cscript\x3E";

URL 参数

?q=%3Cscript%3E

最佳实践

1. 输出时编码：在将数据插入 HTML 时编码，不是输入时
2. 使用模板引擎：Vue、React 等框架自动编码
3. 设置 CSP：Content-Security-Policy 限制脚本执行
4. 避免 innerHTML：使用 textContent 替代

在线工具

使用 jsjson.com HTML 编码工具 进行 HTML 实体编码转换。

总结

HTML 实体编码是防止 XSS 攻击的基础。在不同的上下文中使用正确的编码方式，可以有效保障 Web 安全。