jQuery를 사용하는 AJAX를 통한 JS 코드 -이 메서드는 안전한가요?

Question

'script'요소 아래에 일부 JS 코드뿐만 아니라 페이지에 삽입해야하는 HTML 스 니펫을 반환하는 AJAX 호출이 있습니다.

응답에 html/body/head 요소가 없으며 주입해야하는 HTML 만 있습니다. 그래서 응답이있을 수 :

AJAX를 통해 인출 된 나의 이해, JS 코드에서

<div>lorem ipsum</div> 
<script>alert(1);</script> 

는 평가를()를 사용하여 중 하나에 의해 또는 요소, 예를 작성하여 페이지에 추가 할 필요가 :

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.text = response; 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(script); 

하지만 jQuery에서 .html()을 사용하여 응답을 포함 시키려고 시도했습니다. 놀랍게도 JS 코드와 HTML 부분이 모두 예상대로 처리되었고 HTML 부분이 다음과 같이 추가되었습니다. 페이지 및 JS 코드가 정상적으로 실행되었습니다.

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('#foo').html(data); 
     // #foo now contains '<div>lorem ipsum</div>' and the JS alert was fired 
    } 
}); 

이 안전한 방법입니다 :

이 내가 해봤 무엇인가? 모든 브라우저에서 작동합니까?

만약 제가 시도하고있는 것을 성취하는 가장 좋은 방법이 있다면 (아마도 응답을 구문 분석하여 나머지로부터 <script> 요소를 분리해야 할 것입니다)?

미리 감사드립니다.

Answer 1

글쎄요, 가장 좋은 해결책이 아니며 (브라우저에서 깨질 수있는) 두 가지 문제가 있습니다. 두 번째 문제는 그 코드가 하드 코딩 된 것 (심지어 그 다음)이라면 두 번째 문제는 xss를 쉽게 만들 수있는 방법입니다. 위반. ajax'd html 또는 url이 변경 가능한 경우 일부 두통이 있습니다.

기본적으로 넣어 두지 않는 것이 좋습니다. 다른 해결책을 찾겠습니다.

Answer 2

jQuery의 .html() 함수는 innerHTML을 사용하며 IE는 DEFER 속성이 이러한 방식으로로드 된 스크립트에 설정되어 있어야합니다. 그렇지 않으면 실행되지 않습니다. 나는 createElement 메소드가 더 나은 접근법이라고 생각한다.

제 의견으로는 JSON 만 전송하고 동적 자바 스크립트는 평가하지 않는 것이 좋습니다. 그런 다음 JSON.parse를 사용하여 응답을 구문 분석 할 수 있으며 클라이언트 측 코드는이 데이터에 필요한 모든 작업을 수행 할 수 있습니다.

Answer 3

원하는 사운드는 JSON-P로 수행 할 수 있습니다.

기본적으로 XHR 호출 대신 동적으로로드 할 URL을 가리키는 스크립트 요소를 SRC 속성으로 만듭니다. 그러면 서버는 다음을 반환합니다.

$('<div>foo</div>').appendTo('#bar'); 
alert(1); 

위쪽은 JSON-P가 교차 도메인을 호출 할 수 있다는 것입니다. 단점은 여전히 ​​XSS 공격까지 스스로 열어 볼 수 있다는 것입니다. 그러나 솔직히, 그것은 당신이 무엇을하던간에 항상 문제입니다. 당신이 당신의 점을 찍고 당신의 Ts를 건너는 한, 나는 두 가지 옵션 중 하나를 선택하는 것이 좋습니다.

non-eval/SCRIPT 옵션을 제공하려면 실행하려는 후속 JS 코드의 성격을 설명 할 수 있습니까?