Шаблон строки приложения escaping

Question

Я заметил, что это приложение XSS для чата. Любые предложения о том, как предотвратить это?

Я пробовал:

text = escape(text); 

и

text = encodeURIComponent(text); 

Но все выглядит просто странно и неуклюже. Я хотел бы, что если бы я написал

<b>test</b> 

было бы распечатать эту точную строку, а не жирный вариант. Благодарю.

<div class="chat-room"></div> 

---

b.innerHTML = '<a target="_blank" href="http://steamcommunity.com/profiles/'+steamid+'"><img src="'+avatar+'" class="avatarka"></a><div class="msg_block"><span style="cursor:pointer" class="from">'+name+'</span>: <br><span style="font-size:14px;" class="msg">'+text+'</span></div>'; 
      $('.chat-room').append(b); 
      $('.chat-room').scrollTop(100000); 

Это был действительно грязный, если вам нужно больше информации, пожалуйста, спросите, и Ill обеспечить то, что когда-нибудь смогу. Благодарю.

Answer 1

Если вы хотите text следует рассматривать как текст, а не HTML, самая надежная вещь, чтобы поместить его в текстовом узле:

b.innerHTML = '<a target="_blank" href="http://steamcommunity.com/profiles/'+steamid+'"><img src="'+avatar+'" class="avatarka"></a><div class="msg_block"><span style="cursor:pointer" class="from">'+name+'</span>: <br><span style="font-size:14px;" class="msg"></span></div>'; 
b.querySelector(".msg").appendChild(document.createTextNode(text)); 
$('.chat-room').append(b); 
$('.chat-room').scrollTop(100000); 

Заметим, что вы можете сделать то же самое с name, если это также выводится из пользовательского ввода, и вы еще не дезинфицировали его.

Я не уверен, почему у вас есть это сочетание innerHTML и jQuery, но это один из способов сделать это. Чем больше JQuery-эск версия будет:

$(b).empty().append(
    $('<a target="_blank" href="http://steamcommunity.com/profiles/'+steamid+'"><img src="'+avatar+'" class="avatarka"></a><div class="msg_block"><span style="cursor:pointer" class="from">'+name+'</span>: <br><span style="font-size:14px;" class="msg"></span></div>') 
     .find(".msg").text(text) 
     .end() 
); 
$('.chat-room') 
    .append(b) 
    .scrollTop(100000); 

Другой способ прост обработка текста: Преобразование & в & и < к <:

text = text.replace(/&/g, "&amp;").replace(/</g, "&lt;"); 

Но где это возможно, я предпочитаю использовать текстовые узлы (как указано выше, или с помощью метода jQuery text), а не replace.