¿La mejor práctica para incorporar JSON arbitrario en el DOM?

Question

estoy pensando en la incorporación de JSON arbitraria en el DOM como esto:

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

Esto es similar a la forma en que se podría almacenar una plantilla HTML arbitrario en el DOM para su uso posterior con un motor de plantillas JavaScript. En este caso, podríamos recuperar posteriormente el JSON y analizarlo con:

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

This works, pero ¿es la mejor manera? ¿Viola esto alguna mejor práctica o estándar?

Nota: No estoy buscando alternativas para almacenar JSON en DOM, ya he decidido que es la mejor solución para el problema en particular que estoy teniendo. Solo estoy buscando la mejor manera de hacerlo.

Answer 1

Creo que su método original es el mejor. La especificación HTML5 incluso direcciones de este uso:

línea

"Cuando se usa para incluir bloques de datos (a diferencia de los scripts), los datos deben estar incrustadas, el formato de los datos se deben especificar con el atributo de tipo, el atributo src no debe especificarse, y el contenido del elemento script debe cumplir los requisitos definidos para el formato utilizado. "

leer aquí: http://dev.w3.org/html5/spec/Overview.html#the-script-element

Usted ha hecho exactamente eso. que es no amar? Sin codificación de caracteres según sea necesario con datos de atributos. Puede formatearlo si lo desea. Es expresivo y el uso previsto es claro. No se siente como un hack (por ejemplo, si usa CSS para ocultar su elemento "carrier"). Es perfectamente válido.

Answer 2

Como dirección general, trataría de usar HTML5 data attributes en su lugar. No hay nada que te impida poner JSON válido. por ejemplo:

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

Si estás usando jQuery, y luego recuperando es tan fácil como:

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

Answer 3

me gustaría sugerir que poner JSON en una secuencia de comandos en línea con una función de devolución de llamada (tipo de JSONP):

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

Si el script de ejecución se carga después de que el documento se puede almacenar esto en alguna parte, posiblemente con un argumento identificador adicional: someCallback("stuff", { ... });

Answer 4

Mi recomendación sería mantener los datos JSON en archivos externos .json, y luego recuperarlos a través de Ajax. Usted no pone código CSS y JavaScript en la página web (en línea), entonces ¿por qué lo haría con JSON?

Answer 5

Este método de incrustación de json en una etiqueta de secuencia de comandos tiene un posible problema de seguridad. Suponiendo que los datos json se originaron a partir de la entrada del usuario, es posible crear un miembro de datos que en efecto saldrá de la etiqueta del script y permitirá la inyección directa en el dom.Ver aquí:

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

Aquí es la inyección

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

Simplemente no hay manera alrededor de escape/codificación.

Answer 6

Consulte Rule #3.1 en la hoja de información sobre prevención XSS de OWASP.

Digamos que quiere incluir este JSON en HTML:

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

Crear una oculta <div> en HTML. A continuación, escapar de su JSON mediante la codificación de entidades inseguras (por ejemplo, &, <,>,",', y, /) y ponerlo dentro del elemento.

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

Ahora se puede acceder a él mediante la lectura de la textContent de el elemento utilizando JavaScript y analizarlo:

var text = document.querySelector('#init_data').textContent; 
var json = JSON.parse(text); 
console.log(json); // {html: "<script>alert("XSS!");</script>"}