聊天应用程序字符串转义

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);

这实在太麻烦了，如果您需要更多信息，请询问，我将尽一切可能提供。 谢谢。

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也是从用户输入派生的，并且尚未进行过消毒，则可能要对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 。