聊天应用程序字符串转义

时间:2016-04-25 14:12:42

标签: javascript php socket.io

我注意到可以对我的聊天应用程序进行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);

这非常混乱,如果您需要更多信息,请询问,我会提供尽我所能。感谢。

1 个答案:

答案 0 :(得分:2)

如果您希望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-esque版本将更多:

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

另一种方式是简单的文字处理:将&转换为&amp;,将<转换为&lt;

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

但在可能的情况下,我倾向于使用文本节点(直接如上所述,或通过jQuery&#39; text方法),而不是replace