JQuery - 添加常规 HTML 和转义 HTML

Question

我在 firebase 中存储了一些数据（可以在客户端中检索），然后，我使用 JQuery 将其添加到 HTML 中。这很简单——我只是将数据添加到 DOM 元素中。然而，问题是，这个原始代码很容易受到攻击，所以我需要在将其添加到 HTML 之前正确地转义从数据库中获取的数据。我认为下面的代码可以完成这项工作：

function escapeHTML(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

$('#element').prepend('<h1>Heading</h1><p>' + escapeHTML(data) + '</p>');

当我测试这段代码时，通过使数据的值类似于<script>alert('This should not work');</script>，我认为它只会将此文本添加到<p></p>标签中，而不执行JS，但它实际上运行了代码。

我知道使用 $('#element').text() 会为我转义文本，但我不希望所有内容都被转义 - 我仍然想添加 <h1></h1> 和 <p></p> 标签，我只需要变量“数据“要逃脱。我看到了一些关于类似主题的 StackOverflow 帖子，但似乎都没有解决这个问题 - post 1、post 2、post 3。

Answer 1

您问题中的代码不起作用的原因是因为在解析 HTML 中的 JS 时，Javascript 中的所有实体（如 &）都被解析为它们所代表的字符。如果您将代码放在外部 .js 文件中，它会起作用，因为它不会被解析为 HTML。或者你可以对它们进行双重编码：

  var map = {
    '&': '&',
    '<': '&amp;lt;',
    '>': '&amp;gt;',
    '"': '&amp;quot;',
    "'": '&amp;#039;'
  };

但更好的方法是分别创建<h1>和<p>元素，并使用jQuery方法将转义文本放入段落中。

const data = '<scr' + 'ipt>alert("foo");</scr' + 'ipt>';

$("#element").prepend("<h1>Heading</h1>", $("<p>", {text: data}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element"></div>

如果要填写数据属性，类似方法：

$("#element").prepend($("<div>", {
    data: {
        attr: data,
        another: someMoreData
    },
    text: "hello world"
}));