Best practice per incorporare JSON arbitrario nel DOM?

Sto pensando di incorporare JSON arbitrario nel DOM in questo modo:

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

Questo è simile al modo in cui si potrebbe memorizzare un modello HTML arbitrario nel DOM per un uso successivo con un motore di modelli JavaScript. In questo caso, potremmo successivamente recuperare il JSON e analizzarlo con:

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

Funziona , ma è il modo migliore? Ciò viola qualche best practice o standard?

Nota: non sto cercando alternative all'archiviazione di JSON nel DOM, ho già deciso che è la soluzione migliore per il particolare problema che sto riscontrando. Sto solo cercando il modo migliore per farlo.

Penso che il tuo metodo originale sia il migliore. La specifica HTML5 affronta anche questo uso:

"Quando vengono utilizzati per includere blocchi di dati (al contrario degli script), i dati devono essere incorporati in linea, il formato dei dati deve essere fornito utilizzando l'attributo type, l'attributo src non deve essere specificato e il contenuto dell'elemento script deve conformi ai requisiti definiti per il formato utilizzato. "

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

Hai fatto esattamente questo. Cosa non amare? Nessuna codifica dei caratteri secondo necessità con i dati degli attributi. Puoi formattarlo se vuoi. È espressivo e la destinazione d'uso è chiara. Non sembra un hack (ad es. Come usare i CSS per nascondere il tuo elemento "vettore"). È perfettamente valido.

Come direzione generale, proverei invece a utilizzare gli attributi dei dati HTML5 . Non c'è niente che ti impedisca di inserire un JSON valido. per esempio:

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

Se stai usando jQuery, recuperarlo è facile come:

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

Questo metodo di incorporamento di json in un tag di script presenta un potenziale problema di sicurezza. Supponendo che i dati json abbiano avuto origine dall'input dell'utente, è possibile creare un membro dati che in effetti uscirà dal tag script e consentirà l'iniezione diretta nel dom. Vedere qui:

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

Ecco l'iniezione

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

Non c'è proprio modo di sfuggire / codificare.

Vedi la regola # 3.1 nel cheat sheet di OWASP sulla prevenzione XSS.

Supponi di voler includere questo JSON in HTML:

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

Crea un nascosto <div>in HTML. Successivamente, esegui l'escape del tuo JSON codificando entità non sicure (ad esempio, &, <,>, ", 'e, /) e inseriscilo all'interno dell'elemento.

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

Ora puoi accedervi leggendo textContentl'elemento dell'elemento utilizzando JavaScript e analizzandolo:

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

Suggerirei di inserire JSON in uno script inline con una funzione di callback (tipo JSONP ):

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

Se lo script in esecuzione viene caricato dopo il documento, puoi memorizzarlo da qualche parte, possibilmente con un argomento identificativo aggiuntivo: someCallback("stuff", { ... });

Il mio consiglio sarebbe di mantenere i dati JSON in .jsonfile esterni e quindi recuperare quei file tramite Ajax. Non inserisci codice CSS e JavaScript nella pagina web (inline), quindi perché dovresti farlo con JSON?

HTML5 include un <data>elemento per mantenere i dati leggibili dalla macchina. Come alternativa, forse più sicura, <script type="application/json">potresti includere i tuoi dati JSON all'interno valuedell'attributo di quell'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>

In questo caso è necessario sostituire tutte le virgolette singole con 'o con "se si sceglie di racchiudere il valore tra virgolette doppie. Altrimenti rischi che attacchi XSS come altre risposte hanno suggerito.