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

我的读取与阿贾克斯（JSON）分析数据然后进入这样的一个模板：如何在将数据加载到div时防止XSS？

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的想法！

来源

2016-06-09 J. Doe

我找到了解决办法，althought不知道这是正确的，但逃脱< >做工作：obj.content.replace（//g，“>”） –

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

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

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

来源

2016-06-09 07:50:44

嘿谢谢！但问题是我正在追加，因此预先添加文本在这里不是很有效，因为有多个元素，并且会覆盖根目录。 –

在这种情况下，您需要创建一个容器，然后使用'noteTemplate（）'函数生成的HTML来设置该容器的'text（）'。 –

这将工作得很好，谢谢你的帮助！ :) –

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

回答

相关问题