임의의 JSON을 DOM에 삽입하기 위한 베스트 프랙티스

임의의 JSON을 DOM에 삽입하기 위한 베스트 프랙티스

다음과 같이 임의의 JSON을 DOM에 삽입하려고 합니다.

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

이는 나중에 JavaScript 템플릿엔진과 함께 사용하기 위해 임의의 HTML 템플릿을 DOM에 저장하는 방법과 유사합니다.이 경우 나중에 JSON을 취득하여 다음과 같이 해석할 수 있습니다.

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

이게 효과가 있는데 이게 최선일까요?이것이 베스트 프랙티스 또는 표준을 위반하고 있습니까?

주의: JSON을 DOM에 저장하는 대신 JSON을 저장하는 방법을 찾고 있는 것이 아닙니다.그것이 현재 발생하고 있는 특정 문제에 대한 최선의 해결책이라고 이미 결정했습니다.난 그저 가장 좋은 방법을 찾고 있을 뿐이야.

저는 당신의 독창적인 방법이 최고라고 생각합니다.HTML5 사양에서는, 다음의 사용에도 대응하고 있습니다.

(스크립트가 아닌) 데이터 블록을 포함하기 위해 사용되는 경우 데이터는 인라인에 내장되어야 하며, 데이터의 형식은 형식 속성을 사용하여 지정해야 하며, src 속성을 지정하지 않아야 하며, 스크립트 요소의 내용은 사용되는 형식에 정의된 요건에 부합해야 합니다.

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

정확히 그렇게 하셨군요.사랑하지 않는 게 뭐야?속성 데이터에 필요한 문자 인코딩이 없습니다.원하는 경우 포맷할 수 있습니다.표현력이 풍부하고 용도가 명확합니다.해킹이라고는 생각되지 않습니다(예를 들어 CSS를 사용하여 "carrier" 요소를 숨깁니다.그것은 완벽하게 유효하다.

일반적인 방향으로는 HTML5 데이터 속성을 사용해 보겠습니다.유효한 JSON을 삽입하는 것을 막을 수 없습니다. 예:

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

jQuery를 사용하는 경우 다음과 같이 쉽게 검색할 수 있습니다.

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

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

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>

탈출/암호화를 피할 방법은 없습니다.

OWASP의 XSS 예방 치트 시트의 규칙 3.1을 참조하십시오.

이 JSON을 HTML에 포함시키고 싶다고 합니다.

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

" " " 를 .<div>다음으로 안전하지 않은 엔티티(예를 들어 &, <, >, ", ', /,)를 인코딩하여 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 text = document.querySelector('#init_data').textContent;
var json = JSON.parse(text);
console.log(json); // {html: "<script>alert("XSS!");</script>"}

HTML5는 기계 판독 가능한 데이터를 유지하는 요소를 포함한다.아마도 더 안전한 대안으로서<script type="application/json">JSON 데이터를 내부로 포함할 수 있습니다.value해당 요소의 속성.

const jsonData = document.querySelector('.json-data');
const data = JSON.parse(jsonData.value);

console.log(data)

<data class="json-data" value='
  {
    "unicorns": "awesome",
    "abc": [1, 2, 3],
    "careful": "to escape &#39; quotes"
  }
'></data>

이 경우 모든 작은 따옴표를 다음과 같이 치환해야 합니다.'또는 을 사용하여"값을 큰따옴표로 묶는 경우.그렇지 않으면 다른 답변과 마찬가지로 XSS 공격의 위험이 있습니다.

JSON을 함수 콜백(JSONP의 일종)과 함께 인라인 스크립트에 넣을 것을 권장합니다.

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

문서 뒤에 실행 중인 스크립트가 로드된 경우 ID 인수를 추가하여 저장할 수 있습니다.someCallback("stuff", { ... });

JSON 데이터를 외부에 보관하는 것이 좋습니다..jsonAjax를 통해 파일을 가져옵니다.웹 페이지(인라인)에 CSS와 JavaScript 코드를 입력하지 않는데 왜 JSON을 사용합니까?

언급URL : https://stackoverflow.com/questions/9320427/best-practice-for-embedding-arbitrary-json-in-the-dom