Javascript 在jQuery html（）中防止XSS

我使用ajax从数据库接收数据，然后使用.HTML（）jQuery函数将其与HTML代码一起添加到网站，如下所示：

$.ajax({
    url: "getDatabaseData.php",
    type: "post",
    dataType: "json",
    success: function(response){
        $("#message-div").html(getMessagesHtml(response));
    }
});

function getMessagesHtml(messages){
    var result = "";
    for(var i = 0; i < messages.length; i++){
        result += 
            "<div>" + 
                "<p>Name: " + messages[i].name + "</p>" + 
                "<p>Message: " + messages[i].message + "</p>" + 
            "</div>";
    }
    return result;
}

例如，假设消息包含以下文本：

<script>XSS Attack code goes here</script>

XSS攻击代码在这里

我的问题是：

这样做时是否会出现XSS问题

如果出现问题，我如何预防

我猜在这种情况下，使用text（）而不是html（）不是一个选项，因为我还添加了html代码

---

如果没有javascript，在使用PHP打印数据时，我只对从数据库接收的变量使用htmlentities来防止XSS，例如htmlentities（messages[I].name）和HTMLenties（messages[I].message）。但是我还没有看到类似的javascript。用用户输入设置文本是最安全的方法。与其创建html字符串，不如创建元素

比如：

function getMessagesHtml(messages){

  return messages.map(function(o){
    var $div = $('<div>');
    $div.append($('<p>', {text: "Name: " + o.name}));
    $div.append($('<p>', {text: "Message: " + o.message}));
    return $div;
  });

}

函数getMessagesHtml（消息）{ 返回消息.map（函数（o）{ 变量$div=$（''）； $div.append（$（“”，{text:“Name:”+o.Name}））； $div.append（$（“”，{text:“Message:”+o.Message}））； 返回$div； }); }

---

根据注释，另一种方法是创建一个清理助手函数，该函数创建一个元素，该元素将输入字符串作为文本传递给该元素并返回该文本

function text(str){
   return $('<div>',{text:str}).text();
}

函数文本（str）{
返回$（''，{text:str}）.text（）；
}

使用用户输入设置文本是最安全的方法。与其创建html字符串，不如创建元素

比如：

function getMessagesHtml(messages){

  return messages.map(function(o){
    var $div = $('<div>');
    $div.append($('<p>', {text: "Name: " + o.name}));
    $div.append($('<p>', {text: "Message: " + o.message}));
    return $div;
  });

}

函数getMessagesHtml（消息）{ 返回消息.map（函数（o）{ 变量$div=$（''）； $div.append（$（“”，{text:“Name:”+o.Name}））； $div.append（$（“”，{text:“Message:”+o.Message}））； 返回$div； }); }

---

根据注释，另一种方法是创建一个清理助手函数，该函数创建一个元素，该元素将输入字符串作为文本传递给该元素并返回该文本

function text(str){
   return $('<div>',{text:str}).text();
}

函数文本（str）{
返回$（''，{text:str}）.text（）；
}

谢谢你的建议。然而，我更希望有另一种解决办法。在我看来，您的建议将使代码更难阅读和编写。这需要对我的代码进行巨大的修改，因为我在整个网站的任何地方都使用了我的示例中的技术，并且使用了更复杂的html元素树结构等。类似这样的东西会很棒：“Message:”+text（messages[I].Message）+“

”，但在jQuery/Javascript中可能没有这样的东西{return$（'{text:str}）.text（）；}“如果是安全的，那就太棒了，谢谢！如果我想用span来代替，我想我可以用替换。我应该使用的具体原因是什么？另一个问题，您知道如果在一个页面加载中使用这个元素大约200次，是否会有任何大的性能问题吗？使用的元素是不相关的，200次并不是一个很大的开销。将一些html作为

消息的一部分传递给
，并将看到它将显示为文本，而不是建议的HTMLTanks。然而，我更希望有另一种解决办法。在我看来，您的建议将使代码更难阅读和编写。这需要对我的代码进行巨大的修改，因为我在整个网站的任何地方都使用了我的示例中的技术，并且使用了更复杂的html元素树结构等。类似这样的东西会很棒：“Message:”+text（messages[I].Message）+“
”，但在jQuery/Javascript中可能没有这样的东西{return$（'{text:str}）.text（）；}“如果是安全的，那就太棒了，谢谢！如果我想用span来代替，我想我可以用替换。我应该使用的具体原因是什么？另一个问题，您知道如果在一个页面加载中使用这个元素大约200次，是否会有任何大的性能问题吗？使用的元素是不相关的，200次并不是一个很大的开销。将一些html作为
消息的一部分传递
，并将看到它将显示为文本，而不是呈现的html