Node.js/JavaScript - Избегайте пользователей ввода скриптов и HTML сущности

Question

так немного трудно объяснить, но я попробую: В принципе я чат приложение, запущенное на Node.js стороне Client:

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

так это делает две вещи:
Он отправляет сообщение серверу о том, что есть новое сообщение, и в то же время он добавляет сообщение chatwindow (стороне клиента).

сторона сервера:

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)+'")');  
}); 

Таким образом сервер обнаруживает новое сообщение, и вещает все пользователи говорят есть новое сообщение, здесь вместе с именем людей. Он также вставляет его в базу данных.

Так что моя проблема: если пользователь вводит что-то вроде оповещения («привет»);

WORKS отлично подходит для других пользователей, он не отображается и отображается как простой код, не вызывая беспорядка, но для пользователя, который его ввел - он печатает изображения и поле оповещения.

Кроме того, когда пользователь входит в систему позже, и старые сообщения загружаются с помощью этой функции:

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 Из:

Не следует использовать эти методы, чтобы вставить строки, полученные из ненадежных источников, таких как параметры URL запроса, куки, или формы входов. Выполнение так может включать уязвимости межсайтового скриптинга (XSS). Удалить или избежать ввода пользователя, прежде чем добавлять содержимое в документ

Вместо этого используйте 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() на стороне сервера полностью, но это зависит от того, где еще передаются эти сообщения.