javascript - Node.js/JavaScript - 避免用户输入脚本和 html 实体

Question

有点难以解释，但我会尝试:基本上我有在 Node.js 上运行的聊天应用程序客户端:

function sentMessage(){
    if($('#messageInput').val() != "")
    {
    socket.emit('message', $('#messageInput').val());
    addMessage($('#messageInput').val(), "Me", new Date().toISOString(),
     true);
    $('#messageInput').val('');
    }
}

所以这有两件事:
它向服务器发送消息，表示有新消息，同时将消息添加到聊天窗口(客户端)。

服务器端:

socket.on('message', function (message) {
    socket.broadcast.emit('message', {
        'message' : entities.encode(message),
        'pseudo' : socket['final_user']
    });
db.query('INSERT INTO messages (user_id, message) VALUES (\
"'+socket['final_user']+'", "'+db.escape(message)+'")');    
});

所以服务器检测到新消息，并向所有用户广播说有新消息，这里它与人名一起。它还将其插入数据库。

所以我的问题是:如果用户输入类似或alert(“hello”);的内容；

对于其他用户来说，它工作很好，它不会显示并且显示为纯代码，不会造成困惑，但对于输入它的用户来说 - 它会打印图像和警报框。

此外，每当用户稍后登录时，都会使用此函数加载旧消息:

function loadMessages(msg, pseudo, time){
    $("#chatEntries").append('<div class="messagesOLD">' +
    "<span class='msg_date'>"+dateFormat(time)+"</span><span class='msg_seperator'> | </span><span class='msg_name'>"+ pseudo + '</span> : ' + msg + '</div>');
}

它还向用户打印警报和图像。我知道很多人可能会说只使用Entity.encode()，就像我在服务器端所做的那样，但由于某种原因它在客户端不起作用。

好吧，我设法修复了加载以前的消息并向用户加载脚本的问题，因为它们是从服务器端加载的，所以我能够使用Entity.encode()，所以现在脚本和所有可能的漏洞都显示为纯代码，并且是没有执行。

但是 - 键入它的用户仍然可以执行脚本。

function addMessage(msg, pseudo){
    var post_date = new Date();
    var timesp = post_date;
    if(pseudo == "Me"){
    $("#chatEntries").append('<div class="message msg_owner">' +
    "<span class='msg_date'>"+dateFormat(timesp)+"</span><span class='msg_seperator'> | </span><span class='msg_name'>"+ pseudo + '</span> : ' + msg + '</div>');

    }
    else{
    $("#chatEntries").append('<div class="message">' +
    "<span class='msg_date'>"+dateFormat(timesp)+"</span><span class='msg_seperator'> | </span><span class='msg_name'>"+ pseudo + '</span> : ' + msg + '</div>');
    }
        $('#chatEntries').scrollTop(1E10);
    }

Answer 1

来自jQuery documentation for append :

Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document

相反，请使用 text method :

var newmsg = $('<div class="message msg_owner">' + 
    "<span class='msg_date'>"+dateFormat(timesp)+
    "</span><span class='msg_seperator'> | </span><span class='msg_name'>" +
    pseudo + '</span> : <span class="msg"></span></div>');

//insert the new message using .text, which will encode the message at this point
newmsg.find(".msg").text(msg)

$("#chatEntries").append(newmsg);

请注意添加 msg 类 - 如果您已在其他地方使用该类，则可能需要更改它。

这应该完全消除服务器端对 entities.encode() 的需求，但这取决于这些消息传递到的其他位置。