JavaScript
编程
JavaScript 程序设计（第 2 版）（书籍）

前端 JavaScript 程序如何实现 HTML 标签转义？

关注者
2
被浏览
35

2 个回答

HTML标签是我们在前端开发中经常会遇到的一种元素。有时候由于用户的输入或是数据来源不可靠，我们需要对HTML标签进行转义，避免恶意的脚本注入，保障应用的安全性。

HTML标签转义，其实就是将在HTML中有特殊意义的字符，如小于号()、&符号等，进行替换，将其转义为HTML实体，避免它们被当成HTML标签解析。

Javascript中有专门对HTML实体进行转义的函数，可以通过这些函数对HTML标签进行转义。

一、Javascript中的HTML实体转义函数

在Javascript中，有3个常见的函数可以用来对HTML实体进行转义：

1. escape()

2. encodeURIComponent()

3. replace()方法

下面我们分别来看一下这几个函数的用法和注意点。

1. escape()函数

escape()函数可以将字符串中的某些特殊字符转换为对应的ASCII码。主要的转义字符有： “@*_+-./”。

在HTML中，比较常见的HTML实体有：小于号()、单引号(')、双引号(")、以及&符号。

由于escape()函数并不支持对这些HTML实体的转义，所以不能够直接用于HTML标签的转义。

2. encodeURIComponent()函数

encodeURIComponent()函数可以将字符串的所有特殊字符都转换成字符串的UTF-8编码。

在Javascript中，常见的特殊字符主要包括：小于号()、单引号(')、双引号(")、空格、以及&符号。

这个函数可以将上述特殊字符转义成%xx的形式，其中xx是字符的ASCII码的16进制表示。比如，&符号会被转义成%26。

当我们需要对HTML标签进行转义时，encodeURIComponent()函数可以一定程度上实现基本的转义，但是它存在一个问题：它会把逗号、斜杠、问号等字符都转义成字符串的UTF-8编码，导致HTML标签解析出现混淆。因此，不能够完全替代其他HTML实体转义函数的作用。

比如：

var str = "&<>'\"/";

console.log(encodeURIComponent(str)); //输出结果：%26%3C%3E%27%22%2F

我们发现，逗号、斜杠、问号等在这里也被转义了，而这些字符其实并不需要被转义。

3. replace()方法

在Javascript中，字符串类型具有replace()方法，可以用来替换字符串的某些特定字符，实现对HTML标签的转义。

具体用法如下：

var str = "";

str = str

.replace(/&/g, '&')

.replace(/

.replace(/>/g, '>')

.replace(/"/g, '"')

.replace(/'/g, ''');

console.log(str); //输出结果：<script>alert('XSS')</script>

这个方法是比较常用且推荐的一种HTML标签转义方式，因为它可以对大部分HTML实体进行转义，而且可以避免encodeURIComponent()函数的一些问题。

二、HTML标签转义的注意事项

在实际编写代码的过程中，需要注意一些细节问题，以确保HTML标签转义的正确性。

1. JS文件中的HTML标签不需要转义

在Javascript文件中，HTML标签的解析和字符串解析是分开的，因此不需要对JS文件中的HTML标签进行转义。

比如，我们写在JS文件中写一个弹框函数，在里面使用HTML标签：

function showAlert(message){

var alertHtml = '


' +

'

提示信息

' +

'

' +

message +

'

' +

'


';

$("#alert_div").child(alertHtml);

}

这里使用的HTML标签不需要转义，否则会导致解析出错。

2. 转义后的字符需要保持一致性

在控制器或其他多个地方使用同一个字符串时，需要保持字符串输出的一致性。也就是说，同一个字符串的输出必须一模一样，否则可能会导致解析出错。

比如，下面两个控制器返回的字符串就不一样：

// XxxController.php

function index() {

$str = '';

return $str;

}

// YyyController.php

function index() {

$str = '<iframe src=" google.com "></iframe>';

return $str;

}

同样的字符串，第一个控制器中的HTML标签并没有被转义，而第二个控制器中的HTML标签已经被转义了。如果在页面中使用这两个控制器返回的字符串，会导致解析出错。

因此，需要注意转义后的字符串需要保持一致性，否则会产生不可预知的后果。

三、总结

在前端开发中，我们需要时刻关注应用的安全问题。HTML标签转义是保障应用安全的一个非常重要的措施，可以避免恶意的脚本注入，有效的提升了应用的安全性。

在Javascript中，常见的HTML标签转义函数有escape()、encodeURIComponent()和replace()方法。不同函数之间还存在一些区别，需要根据实际情况选择合适的函数进行使用。

同时，需要注意一些转义的细节问题，以确保HTML标签的转义正确性和一致性。

在前端 JavaScript 程序中，可以通过内置的 HTML 转义函数 `htmlspecialchars()` 来实现 HTML 标签转义。该函数将字符串中的 HTML 操作符（例如 `<`, `>`, `&`, `"` 等）转换为等价的 HTML 实体（例如 `&lt;`，`&gt;`，`&amp;`，`&quot;` 等）。


以下是使用 `htmlspecialchars()` 函数来实现 HTML 标签转义的代码示例： 

```js
function escapeHtml(str) {
  var div = document.createElement('div');
  var text = document.createTextNode(str);
  div.appendChild(text);
  return div.innerHTML;