如何在将数据加载到div时防止XSS？

Question

我的读取与阿贾克斯（JSON）分析数据然后进入这样的一个模板：

function noteTemplate(obj) { 
    var date = obj.created_at.split(/[- :]/), 
     dateTime = date[2] + '.' + date[1] + '.' + date[0]; 
     dateTime += ' @ ' + date[3] + ':' + date[4] + ':' + date[5]; 

    var note = '<div class="note-container" target="' + obj.id + '">'; 
     note += '<div class="note-options"><div class="note-remove"></div></div>'; 
     note += '<div class="note-name">' + obj.name + '</div>'; 
     note += '<div class="note-date">' + dateTime + '</div>'; 
     note += '<div class="note-content">' + obj.content + '</div>'; 
     note += '</div>'; 
    return note; 
} 

然后附加，为了一个div使用jQuery。现在如果obj.name或obj.content包含任何JS，那些将被执行。

什么是最合适的方法来防止这种情况？由于

更新：

我通过转义<>与实体替换它们这样做的工作找到了解决办法，并在本机的方式。

obj.content.replace(/</g, "&lt;").replace(/>/g, "&gt;") 

的jQuery：

var $note = $(note); 
$note.find('.note-name').text(obj.name); 
$note.find('.note-content').text(obj.content); 

return $note; 

的.text（）sanitazes给你。

感谢@Rory McCrossan的想法！

Answer 1

问题在于你如何追加HTML函数返回到DOM，而不是你如何生成HTML本身。

如果追加使用jQuery的text()方法的元素，它将消毒对你来说，像这样的内容：

$('#myElement').text(noteTemplate(data));