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执行相同的操作，如果它还来自用户输入，并且您尚未对其进行清理。

我不确定为什么你有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);

另一种方式是简单的文字处理：将&转换为&，将<转换为<：

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

但在可能的情况下，我倾向于使用文本节点（直接如上所述，或通过jQuery＆＃39; text方法），而不是replace。

聊天应用程序字符串转义

1 个答案: