Meilleure pratique pour intégrer du JSON arbitraire dans le DOM?

Je pense à intégrer JSON arbitraire dans le DOM comme ceci:

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

Ceci est similaire à la façon dont on peut stocker un modèle HTML arbitraire dans le DOM pour une utilisation ultérieure avec un moteur de modèle JavaScript. Dans ce cas, nous pourrions plus tard récupérer le JSON et l'analyser avec:

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

Cela fonctionne , mais est-ce le meilleur moyen? Cela enfreint-il une des meilleures pratiques ou des normes?

Remarque: je ne cherche pas d'alternatives au stockage de JSON dans le DOM, j'ai déjà décidé que c'était la meilleure solution pour le problème particulier que je rencontre. Je cherche juste la meilleure façon de le faire.

Je pense que votre méthode originale est la meilleure. La spécification HTML5 aborde même cette utilisation:

"Lorsqu'elles sont utilisées pour inclure des blocs de données (par opposition aux scripts), les données doivent être intégrées en ligne, le format des données doit être donné à l'aide de l'attribut type, l'attribut src ne doit pas être spécifié et le contenu de l'élément de script doit conforme aux exigences définies pour le format utilisé. "

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

Vous avez fait exactement cela. Ce qui est de ne pas aimer? Aucun codage de caractères nécessaire avec les données d'attribut. Vous pouvez le formater si vous le souhaitez. C'est expressif et l'utilisation prévue est claire. Cela ne ressemble pas à un hack (par exemple, comme le fait d'utiliser CSS pour masquer votre élément "porteur"). C'est parfaitement valable.

En règle générale, j'essaierais d'utiliser les attributs de données HTML5 à la place. Rien ne vous empêche de mettre en JSON valide. par exemple:

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

Si vous utilisez jQuery, le récupérer est aussi simple que:

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

Cette méthode d'incorporation de json dans une balise de script présente un problème de sécurité potentiel. En supposant que les données json proviennent de l'entrée utilisateur, il est possible de créer un membre de données qui sortira en fait de la balise de script et permettra l'injection directe dans le dom. Vois ici:

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

Voici l'injection

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

Il n'y a tout simplement aucun moyen d'éviter l'échappement / l'encodage.

Voir la règle n ° 3.1 dans la feuille de triche de prévention XSS de l'OWASP.

Supposons que vous souhaitiez inclure ce JSON dans HTML:

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

Créez un caché <div>en HTML. Ensuite, échappez à votre JSON en encodant des entités non sécurisées (par exemple, &, <,>, ", ', et, /) et placez-le dans l'élément.

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

Vous pouvez maintenant y accéder en lisant le textContentde l'élément en utilisant JavaScript et en l'analysant:

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

Je suggérerais de mettre JSON dans un script en ligne avec un rappel de fonction (sorte de JSONP ):

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

Si le script en cours d'exécution est chargé après le document, vous pouvez le stocker quelque part, éventuellement avec un argument d'identifiant supplémentaire: someCallback("stuff", { ... });

Ma recommandation serait de conserver les données JSON dans des .jsonfichiers externes , puis de récupérer ces fichiers via Ajax. Vous ne mettez pas de code CSS et JavaScript sur la page Web (en ligne), alors pourquoi le feriez-vous avec JSON?

HTML5 comprend un <data>élément permettant de conserver les données lisibles par machine. Comme alternative, peut-être plus sûre, <script type="application/json">vous pouvez inclure vos données JSON dans l' valueattribut de cet élément.

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>

Dans ce cas, vous devez remplacer tous les guillemets simples par 'ou par "si vous choisissez de mettre la valeur entre guillemets doubles. Sinon, votre risque d' attaques XSS comme d'autres réponses l'ont suggéré.