javascript - 加载数据到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

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

如果您使用 jQuery 的 text() 方法附加元素的内容，它将为您清理，如下所示:

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