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; 
} 

그리고 사업부에 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() 방법을 사용하여 요소, 이런 일의 내용을 추가 할 경우 그 적절한이다하지만 < >을 탈출하는 것은 일을 확실하지, althought

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