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

html dom javascript tutorial

Question

Estoy pensando en incorporar JSON arbitrario en el DOM de esta manera:

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

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

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

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

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

Answer 1

Como dirección general, trataría de usar atributos de datos HTML5 en su lugar. No hay nada que te impida poner JSON válido. p.ej:

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

Si usa jQuery, recuperarlo es tan fácil como:

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

Answer 2

Creo que tu método original es el mejor. La especificación HTML5 incluso aborda este uso:

"Cuando se utilizan para incluir bloques de datos (a diferencia de los scripts), los datos deben estar incorporados en línea, el formato de los datos debe darse usando el atributo tipo, el atributo src no debe especificarse, y el contenido del elemento script debe cumplir con los requisitos definidos para el formato utilizado ".

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

Has 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, usar CSS para ocultar su elemento "carrier"). Es perfectamente válido.

Answer 3

Este método de incrustar json en una etiqueta de script 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. Mira aquí:

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

Aquí está 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 forma de escapar / codificar.

Answer 4

Mi recomendación sería mantener los datos JSON en archivos .json externos, y luego recuperar esos archivos 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

Sugeriría 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 del documento, puede almacenarlo en alguna parte, posiblemente con un argumento identificador adicional: someCallback("stuff", { ... });

Answer 6

Ver la Regla # 3.1 en la hoja de trucos de prevención de XSS de OWASP.

Supongamos que desea incluir este JSON en HTML:

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

Cree un <div> oculto en HTML. Luego, escape su JSON codificando entidades inseguras (por ejemplo, &, <,>, ", '', y, /) y póngalo 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 puede acceder leyendo el textContent de texto del elemento usando JavaScript y analizándolo:

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