JavaScript 转义 HTML 特殊字符：全面的指南和最佳实践

2024-03-16 06:19:22

用 JavaScript 转义 HTML 特殊字符：全面指南

导言

在 JavaScript 中，转义 HTML 特殊字符对于保护你的应用程序免受安全漏洞和跨站点脚本攻击至关重要。当你在 HTML 元素中显示用户输入或动态数据时，必须进行转义，以防止潜在的恶意代码执行。本文将深入探讨如何使用 JavaScript 安全有效地转义 HTML 特殊字符。

HTML 特殊字符

HTML 特殊字符是一组预定义的字符，用于在 HTML 中表示特殊符号和标记。这些字符包括：

< 和 > - 小于号和大号符号
& - 与号
" - 双引号
' - 单引号

当这些字符出现在 HTML 文档中时，它们会分别被解释为开始和结束标签、实体引用和引号。然而，在某些情况下，你可能希望将这些字符作为普通文本显示，而不是作为 HTML 标记。这就是转义这些字符变得至关重要的原因。

转义 HTML 特殊字符的方法

在 JavaScript 中，有两种主要方法可以转义 HTML 特殊字符：

1. String.prototype.replace() 方法

String.prototype.replace() 方法允许你使用正则表达式从字符串中替换匹配的子字符串。要转义 HTML 特殊字符，你可以使用以下正则表达式：

/[<>&"']/g

这个正则表达式匹配所有常见的 HTML 特殊字符，然后你可以使用它来将匹配的字符替换为相应的 HTML 实体引用：

const escapedString = string.replace(/[<>&"']/g, (match) => {
  switch (match) {
    case '<':
      return '&lt;';
    case '>':
      return '&gt;';
    case '&':
      return '&amp;';
    case '"':
      return '&quot;';
    case "'":
      return '&#39;';
  }
});

2. HTML 实体引用

另一种转义 HTML 特殊字符的方法是直接使用 HTML 实体引用。每个特殊字符都有一个对应的实体引用，例如：

< - <
> - >
& - &
" - "
' - '

你可以手动将这些实体引用插入到你的字符串中，或使用 JavaScript 函数将其自动生成：

const escapedString = string.replace(/<|>/g, (match) => {
  if (match === '<') {
    return '&lt;';
  } else {
    return '&gt;';
  }
});

最佳实践

始终转义用户输入： 从用户那里获取的数据可能包含恶意代码，因此在将其显示在 HTML 中之前，必须始终对其进行转义。
只转义必要的字符： 并非所有字符都需要转义。只转义 <, >, &, " 和 ' 这些 HTML 特殊字符。
使用库： 有许多 JavaScript 库可以帮助你转义 HTML 特殊字符，例如 html-entities 和 owasp-esapi-js。使用这些库可以简化转义过程。