聊天应用程序字符串转义

Chat application string escaping

本文关键字：转义 字符串 应用程序 聊天      更新时间：2023-09-26

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

这真的很混乱，如果您需要更多信息，请询问，我提供我所能提供的。谢谢。

如果您希望将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);

另一种方法是简单的文本处理：将&转换为&amp;，将<转换为&lt;：

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

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

相关文章：