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

Question

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

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

C'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èles 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 ? Est-ce que cela viole une norme ou une meilleure pratique ?

Note : 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 simplement la meilleure façon de le faire.

Answer 1

Je pense que votre méthode est la meilleure. La spec HTML5, même les adresses de cette utilisation:

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

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

Vous avez fait exactement cela. Ce n'est pas de l'amour? Pas de codage de caractères en tant que de besoin avec les données d'attribut. Vous pouvez mettre en forme si vous le souhaitez. C'est de l'expressivité et de l'utilisation prévue est clair. Il ne se sent pas comme un hack (par exemple à l'aide de CSS pour cacher votre "transporteur" élément n'). Il est parfaitement valide.

Answer 2

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

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

Si vous utilisez jQuery, il suffit de le récupérer :

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

Answer 3

Cette méthode d'intégration de données json dans une balise script présente un problème de sécurité potentiel. En supposant que les données json proviennent de l'entrée de l'utilisateur, il est possible de créer un membre de données qui s'échappera de la balise script et permettra une injection directe dans le dom. Voir 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 aucun moyen de contourner l'échappement/le codage.

Answer 4

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

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

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

Answer 5

Je recommande de conserver les données JSON dans des fichiers externes. .json et ensuite récupérer ces fichiers via Ajax. Vous ne mettez pas le code CSS et JavaScript sur la page web (en ligne), alors pourquoi le feriez-vous avec JSON ?