Najlepsza praktyka dotycząca osadzania dowolnego formatu JSON w DOM?

Myślę o osadzeniu dowolnego JSON w DOM w ten sposób:

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

Jest to podobne do sposobu, w jaki można przechowywać dowolny szablon HTML w DOM do późniejszego wykorzystania z silnikiem szablonów JavaScript. W takim przypadku moglibyśmy później pobrać JSON i przeanalizować go za pomocą:

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

To działa , ale czy to najlepszy sposób? Czy narusza to jakiekolwiek najlepsze praktyki lub standardy?

Uwaga: nie szukam alternatywy dla przechowywania JSON w DOM, już zdecydowałem, że to najlepsze rozwiązanie dla konkretnego problemu, który mam. Po prostu szukam najlepszego sposobu, aby to zrobić.

Myślę, że twoja oryginalna metoda jest najlepsza. Specyfikacja HTML5 odnosi się nawet do tego użycia:

„W przypadku użycia do dołączania bloków danych (w przeciwieństwie do skryptów) dane muszą być osadzone w tekście, format danych należy podać za pomocą atrybutu type, atrybutu src nie można określać, a zawartość elementu skryptu musi spełniają wymagania określone dla używanego formatu. "

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

Zrobiłeś dokładnie to. Czego nie kochać? Brak wymaganego kodowania znaków z danymi atrybutów. Możesz go sformatować, jeśli chcesz. Jest wyrazisty, a przeznaczenie jest jasne. Nie wygląda to na włamanie (np. Użycie CSS do ukrycia elementu „carrier”). To jest całkowicie poprawne.

Jako ogólny kierunek, spróbuję zamiast tego użyć atrybutów danych HTML5 . Nic nie stoi na przeszkodzie, aby wprowadzić prawidłowy kod JSON. na przykład:

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

Jeśli używasz jQuery, odzyskanie go jest tak proste, jak:

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

Ta metoda osadzania json w tagu skryptu ma potencjalny problem z bezpieczeństwem. Zakładając, że dane json pochodzą z danych wejściowych użytkownika, możliwe jest utworzenie elementu członkowskiego danych, który w efekcie wyłamie się ze znacznika skryptu i umożliwi bezpośrednie wstrzyknięcie do domeny. Spójrz tutaj:

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

Oto zastrzyk

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

Po prostu nie ma sposobu na ucieczkę / kodowanie.

Patrz zasada nr 3.1 w ściągawce OWASP dotyczącej zapobiegania XSS.

Załóżmy, że chcesz dołączyć ten JSON do HTML:

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

Utwórz ukryty <div>w HTML. Następnie wymknij kod JSON, kodując niebezpieczne elementy (np. &, <,>, „, 'I, /) i umieść go wewnątrz elementu.

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

Teraz możesz uzyskać do niego dostęp, czytając textContentelement za pomocą JavaScript i analizując go:

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

Sugerowałbym umieszczenie JSON w skrypcie wbudowanym z wywołaniem zwrotnym funkcji (rodzaj JSONP ):

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

Jeśli skrypt wykonawczy jest ładowany po dokumencie, możesz go gdzieś przechowywać, prawdopodobnie z dodatkowym argumentem identyfikatora: someCallback("stuff", { ... });

Moim zaleceniem byłoby przechowywanie danych JSON w .jsonplikach zewnętrznych , a następnie pobieranie tych plików przez Ajax. Nie umieszczasz kodu CSS i JavaScript na stronie internetowej (w tekście), więc dlaczego miałbyś to robić z JSON?

HTML5 zawiera <data>element do przechowywania danych do odczytu maszynowego. Jako - być może bezpieczniejsza - alternatywa dla <script type="application/json">Ciebie, możesz dołączyć dane JSON do valueatrybutu tego elementu.

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>

W takim przypadku musisz zamienić wszystkie pojedyncze cudzysłowy na 'lub na, "jeśli zdecydujesz się ująć wartość w cudzysłów. W przeciwnym razie ryzyko ataków XSS, jak sugerują inne odpowiedzi.