这个问题在这里已有答案:
我在设置一个正确的方法来转义字符串和清理从服务器发送到客户端的数据时遇到了问题。
我已经尝试过在Javascript中构建的encodeURI函数,但是聊天中的名字看起来很粗糙,里面有%的等等。
function sendChat(data){
var message = `<div class="message flex">
<div class="image flex flex-v flex-h">
<img src="${ data.avatar }">
</div>
<div class="content">
<div class="name flex">
<div>
${ data.username }
</div>
<div class="level">
${ data.level }
</div>
</div>
<div class="text">
${ data.message }
</div>
</div>
</div>`;
$('.chat .box').append(message);
}
每当用户将警报('hi')作为文本消息输入时,它显然被发送到客户端并转换为正确的js,但为了防止这种情况,我想要清理数据而不看起来很时髦,是否有任何适当的使用的功能,所以我仍然可以安全地清理数据,而不会看起来磨损..?
用这个
var StrippedString = OriginalString.replace(/(<([^>] +)>)/ ig,“”);
我最终用完了;
String.prototype.escape = function() {
var tagsToReplace = {
'&': '&',
'<': '<',
'>': '>'
};
return this.replace(/[&<>]/g, function(tag) {
return tagsToReplace[tag] || tag;
});
};
清理前端的数据。
一个非常安全的方法是在jquery中构建消息,因为你已经在使用它,就像这样(只是一个快速草图 - 我事先为可读性而道歉):
function sendChat(data) {
var image = $('<img></img>').attr('src', data.avatar);
var imageContainer = $('<div></div>').addClass('iange flex flex-v flex-h').append(image)
var username = $('<div></div>').text(data.username);
var level = $('<div></div>').text(data.level);
var name = $('<div></div>').addClass('name flex').append(username).append(level);
var text = $('<div></div>').text(data.message);
var content = $('<div></div>').addClass('content').append(name).append(text)
var message = $('<div></div>').addClass('message flex')
.append(imageContainer).append(content);
$('.chat .box').append(message);
}
虽然这不太可读,但它稍微更安全,因为您不必重新发明清理并使用经过时间考验的jquery实现。例如,在您的代码中,攻击者可能仍然通过说服系统他们的头像是:劫持了头像的src属性:
;\" onerror=\"\alert('hi')"
然而,最好的解决方案是使用模板引擎,因为它们会为您清理它并且可以同时读取。使用mustache.js的示例:
function sendChatMustache(data) {
var message =
`<div class="message flex">
<div class="image flex flex-v flex-h">
<img src="{{avatar}}">
</div>
<div class="content">
<div class="name flex">
<div>
{{username}}
</div>
<div class="level">
{{level}}
</div>
</div>
<div class="text">
{{message}}
</div>
</div>
</div>`;
var html = Mustache.to_html(message, data);
$('.chat .box').append(html);
}