將數據加載到div時如何防止XSS？

Question

我正在使用Ajax（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;
}

然后使用jQuery將其附加到div。 現在，如果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（）為你清理它。

感謝@Rory McCrossan的想法！

Answer 1

問題是你如何追加函數返回給DOM的HTML，而不是如何生成HTML本身。

如果使用jQuery的text()方法追加元素的內容，它將為您清理，如下所示：

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