Best Practice zum Einbetten von beliebigem JSON in das DOM?

Ich denke darüber nach, beliebigen JSON wie folgt in das DOM einzubetten:

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

Dies ähnelt der Art und Weise, wie eine beliebige HTML-Vorlage im DOM zur späteren Verwendung mit einer JavaScript-Vorlagen-Engine gespeichert werden kann. In diesem Fall können wir den JSON später abrufen und analysieren mit:

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

Das funktioniert , aber ist es der beste Weg? Verstößt dies gegen bewährte Verfahren oder Standards?

Hinweis: Ich suche nicht nach Alternativen zum Speichern von JSON im DOM. Ich habe bereits entschieden, dass dies die beste Lösung für das jeweilige Problem ist. Ich suche nur nach dem besten Weg, es zu tun.

Ich denke, Ihre ursprüngliche Methode ist die beste. Die HTML5-Spezifikation befasst sich sogar mit dieser Verwendung:

"Bei Verwendung zum Einschließen von Datenblöcken (im Gegensatz zu Skripten) müssen die Daten inline eingebettet werden, das Format der Daten muss mit dem Attribut type angegeben werden, das Attribut src darf nicht angegeben werden und der Inhalt des Skriptelements muss angegeben werden den für das verwendete Format definierten Anforderungen entsprechen. "

Lesen Sie hier: http://dev.w3.org/html5/spec/Overview.html#the-script-element

Du hast genau das getan. Was ist nicht zu lieben? Keine Zeichenkodierung nach Bedarf mit Attributdaten. Sie können es formatieren, wenn Sie möchten. Es ist ausdrucksstark und der Verwendungszweck ist klar. Es fühlt sich nicht wie ein Hack an (z. B. wie bei der Verwendung von CSS, um Ihr "Träger" -Element zu verbergen). Es ist vollkommen gültig.

Generell würde ich versuchen, stattdessen HTML5-Datenattribute zu verwenden. Nichts hindert Sie daran, gültiges JSON einzugeben. z.B:

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

Wenn Sie jQuery verwenden, ist das Abrufen so einfach wie:

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

Diese Methode zum Einbetten von json in ein Skript-Tag weist ein potenzielles Sicherheitsproblem auf. Unter der Annahme, dass die JSON-Daten aus Benutzereingaben stammen, ist es möglich, ein Datenelement zu erstellen, das tatsächlich aus dem Skript-Tag ausbricht und eine direkte Injektion in den Dom ermöglicht. Siehe hier:

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

Hier ist die Injektion

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

An Escape / Codierung führt kein Weg vorbei.

Siehe Regel Nr. 3.1 im XSS-Präventions-Spickzettel von OWASP.

Angenommen, Sie möchten diesen JSON in HTML aufnehmen:

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

Erstellen Sie ein <div>in HTML versteckt . Als nächstes entkommen Sie Ihrem JSON, indem Sie unsichere Entitäten (z. B. &, <,>, ", 'und, /) codieren und in das Element einfügen.

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

Jetzt können Sie darauf zugreifen, indem Sie textContentdas Element mit JavaScript lesen und analysieren:

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

Ich würde vorschlagen, JSON in ein Inline-Skript mit einem Funktionsrückruf (eine Art JSONP ) einzufügen :

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

Wenn das ausführende Skript nach dem Dokument geladen wird, können Sie es irgendwo speichern, möglicherweise mit einem zusätzlichen Bezeichnerargument: someCallback("stuff", { ... });

Meine Empfehlung wäre, JSON-Daten in externen .jsonDateien zu behalten und diese Dateien dann über Ajax abzurufen. Sie fügen keinen CSS- und JavaScript-Code auf die Webseite (Inline) ein. Warum sollten Sie dies mit JSON tun?

HTML5 enthält ein <data>Element zum Speichern maschinenlesbarer Daten. Als - vielleicht sicherere - Alternative zu <script type="application/json">Ihnen könnten Sie Ihre JSON-Daten in das valueAttribut dieses Elements aufnehmen.

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 diesem Fall müssen Sie alle einfachen Anführungszeichen durch 'oder durch ersetzen, "wenn Sie den Wert in doppelte Anführungszeichen setzen möchten. Andernfalls hat Ihr Risiko XSS- Angriffe wie andere Antworten vorgeschlagen.