不使用.html

Question

我想在每次向服务器发送消息时插入聊天消息。每条聊天消息都包含一个用户名，一个头像和一条消息。如何使用jQuery附加多个HTML元素？使用此代码，它可以工作，但是我担心使用.html，因为现在用户可以发送"<i>Italic</i>"之类的消息，其他用户也可以将其显示为HTML。我只使用了一个.text元素来解决此安全问题，但是我只能包含一个非常简单的结构，而无需使用头像或任何样式

$("#submit").click(function() {
    var username = '<%= user.name %>'; // Username is stored in Session, using EJS to set this
    var avatar = '<%= user.avatar_small %>'; // Avatar is stored in Session, using EJS to set this
    var message = $("#message").val(); // getting message from input field

    $("#chatList").append(
    $("<li class='list-group-item list-group-item-dark'></li>").html("<img src='"+avatar+"' alt='Avatar' /><label>"+username+":</label> "+message));

    // Socket.io used here to send information to the server
    socket.emit("message", {
        username: username
        message: message,
        avatar: avatar
    });
});

Answer 1

您必须对要设置其文本的元素的文本每个进行转义：

const $li = $("<li class='list-group-item list-group-item-dark'><img alt='Avatar'><label></label></li>")
$li.find('img').prop('src', avatar);
$li.find('label').text(username + ':')
$li.append(document.createTextNode(message));
$("#chatList").append($li);