임의의 JSON을 DOM에 임베드하는 가장 좋은 방법은 무엇입니까?

Question

나는이 같은 DOM에서 임의 JSON을 내장 생각 해요 :

<script type="application/json" id="stuff"> 
    { 
     "unicorns": "awesome", 
     "abc": [1, 2, 3] 
    } 
</script> 

이 하나가 자바 스크립트 템플릿 엔진 나중에 사용하기 위해 DOM에서 임의의 HTML 템플릿을 저장할 수있는 방법과 유사하다. 이 경우, 우리는 나중에 JSON을 검색 할 수 있고 그것을 구문 분석 :

var stuff = JSON.parse(document.getElementById('stuff').innerHTML); 

This works하지만 가장 좋은 방법은? 이것이 모범 사례 또는 표준을 위반합니까?

참고 : DOM에 JSON을 저장하는 대안을 찾고 있지 않습니다. 이미 가지고있는 특정 문제에 대한 최선의 해결책이라고 판단했습니다. 나는 그것을하기위한 최선의 방법을 찾고 있습니다.

Answer 1

나는 원래의 방법이 최고라고 생각합니다. HTML5의 사양도 주소이 사용 :

(스크립트 반대) 데이터 블록을 포함하는 데 사용하는 경우

"데이터 이 포함되어야한다 인라인, 데이터의 형식이 type 속성을 사용하여 부여해야합니다, src 속성을 지정하지 않아야하며 스크립트 요소의 내용이 사용 된 형식에 대해 정의 된 요구 사항을 준수해야합니다. "

는 여기에 읽기 : http://dev.w3.org/html5/spec/Overview.html#the-script-element

당신은 정확하게 일을했습니다. 사랑하지 않는 것은 무엇입니까? 속성 데이터에는 필요에 따라 문자 인코딩이 없습니다. 원하는 경우 서식을 지정할 수 있습니다. 표현력이 뛰어나고 의도 한 용도가 분명합니다. 해킹처럼 느껴지지 않습니다 (예 : CSS를 사용하여 '이동 통신사'요소가 숨겨 짐). 그것은 완벽하게 유효합니다.

Answer 2

일반적인 지침에 따라 HTML5 data attributes을 대신 사용해 보겠습니다. 유효한 JSON을 넣는 것을 막을 수있는 방법은 없습니다. 예 :

<div id="mydiv" data-unicorns='{"unicorns":"awesome", "abc":[1,2,3]}' class="hidden"></div> 

당신이 그 때처럼 쉽게 검색, jQuery를 사용하는 경우 :

var stuff = JSON.parse($('#mydiv').attr('data-unicorns')); 

Answer 3

내가 함수 콜백 JSONP의 (종류 인라인 스크립트로 JSON을 넣어 좋을 것) :

<script> 
someCallback({ 
    "unicorns": "awesome", 
    "abc": [1, 2, 3] 
}); 
</script> 

실행중인 스크립트가 당신이 추가 식별자 인수 가능성이 어딘가를 저장할 수있는 문서 후에로드 된 경우 : someCallback("stuff", { ... });

Answer 4

JSON 데이터를 외부 .json 파일에 보관 한 다음 Ajax를 통해 해당 파일을 검색하는 것이 좋습니다. CSS와 JavaScript 코드를 웹 페이지 (인라인)에 넣지 않으므로 JSON을 사용하면 어떨까요?

Answer 5

스크립트 태그에 json을 포함시키는이 방법은 잠재적 인 보안 문제가 있습니다. json 데이터가 사용자 입력에서 비롯되었다고 가정하면 실제로 스크립트 태그에서 벗어나 DOM에 직접 주입 할 데이터 멤버를 만들 수 있습니다.여기를 참조하십시오 :

http://jsfiddle.net/YmhZv/1/

여기/인코딩을 탈출 주변 단지 방법이 주입

<script type="application/json" id="stuff"> 
{ 
    "unicorns": "awesome", 
    "abc": [1, 2, 3], 
    "badentry": "blah </script><div id='baddiv'>I should not exist.</div><script type="application/json" id='stuff'> ", 
} 
</script> 

에게 있습니다.

Answer 6

OWASP의 XSS 예방 치트 시트에 Rule #3.1을 참조하십시오.

{ 
    "html": "<script>alert(\"XSS!\");</script>" 
} 

는 HTML의 숨겨진 <div> 만들기 :

는 HTML에서이 JSON을 포함 할 말. 다음으로, 안전하지 않은 개체를 인코딩하여 JSON을 탈출 (예를 들어, &, <,>, ", ', 그리고, /) 및 요소 내부에 넣어.

<div id="init_data" style="display:none"> 
     {&#34;html&#34;:&#34;&lt;script&gt;alert(\&#34;XSS!\&#34;);&lt;/script&gt;&#34;} 
</div> 

을 이제 textContent의를 읽어 액세스 할 수 있습니다 자바 스크립트를 사용하여 분석 요소 :

당신이 자바 스크립트에서`var`로하지 않습니다