如何在將數據加載到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？

回答

相關問題