我注意到可以对我的聊天应用程序进行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);
这非常混乱,如果您需要更多信息,请询问,我会提供尽我所能。感谢。
答案 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);
另一种方式是简单的文字处理:将&
转换为&
,将<
转换为<
:
text = text.replace(/&/g, "&").replace(/</g, "<");
但在可能的情况下,我倾向于使用文本节点(直接如上所述,或通过jQuery&#39; text
方法),而不是replace
。