¿Las mejores prácticas para incrustar JSON arbitrario en el DOM?

Estoy pensando en incrustar 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 se puede almacenar una plantilla HTML arbitraria en el DOM para su uso posterior con un motor de plantillas JavaScript. En este caso, más tarde podríamos recuperar el JSON y analizarlo con:

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

Esto funciona , pero ¿es la mejor manera? ¿Esto viola alguna de las mejores prácticas 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 tengo. Solo estoy buscando la mejor manera de hacerlo.

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

"Cuando se utiliza para incluir bloques de datos (a diferencia de scripts), los datos deben estar incrustados en línea, el formato de los datos debe proporcionarse mediante el atributo type, 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 truco (por ejemplo, como usar CSS para ocultar su elemento "portador"). Es perfectamente válido.

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

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

Si está utilizando jQuery, recuperarlo es tan fácil como:

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

Este método de incrustar json en una etiqueta de script tiene un problema de seguridad potencial. Suponiendo que los datos json se originaron a partir de la entrada del usuario, es posible crear un miembro de datos que, de hecho, salga de la etiqueta del script y permita 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.

Consulte la Regla n. ° 3.1 en la hoja de trucos de prevención XSS de OWASP.

Supongamos que desea incluir este JSON en HTML:

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

Crea un oculto <div>en HTML. A continuación, escapa de tu JSON codificando entidades no seguras (por ejemplo, &, <,>, ", 'y, /) y colócalo 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 a él leyendo el textContentdel 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>"}

Sugeriría poner JSON en un script 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 algún lugar, posiblemente con un argumento identificador adicional: someCallback("stuff", { ... });

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

HTML5 incluye un <data>elemento para mantener los datos legibles por máquina. Como alternativa, quizás más segura, <script type="application/json">podría incluir sus datos JSON dentro del valueatributo de ese elemento.

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>

En este caso, debe reemplazar todas las comillas simples con 'o con "si opta por incluir el valor entre comillas dobles. De lo contrario, corre el riesgo de ataques XSS como han sugerido otras respuestas.