Praktik terbaik untuk menyematkan JSON sewenang-wenang di DOM?

Saya berpikir untuk menyematkan JSON sewenang-wenang di DOM seperti ini:

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

Ini mirip dengan cara menyimpan template HTML arbitrer di DOM untuk digunakan nanti dengan mesin template JavaScript. Dalam kasus ini, kami nanti dapat mengambil JSON dan menguraikannya dengan:

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

Ini berhasil , tetapi apakah ini cara terbaik? Apakah ini melanggar praktik atau standar terbaik?

Catatan: Saya tidak mencari alternatif untuk menyimpan JSON di DOM, saya sudah memutuskan bahwa itu solusi terbaik untuk masalah khusus yang saya alami. Saya hanya mencari cara terbaik untuk melakukannya.

Saya pikir metode asli Anda adalah yang terbaik. Spesifikasi HTML5 bahkan membahas penggunaan ini:

"Saat digunakan untuk menyertakan blok data (sebagai lawan dari skrip), data harus disematkan sebaris, format data harus diberikan menggunakan atribut type, atribut src tidak boleh ditentukan, dan konten elemen skrip harus sesuai dengan persyaratan yang ditentukan untuk format yang digunakan. "

Baca di sini: http://dev.w3.org/html5/spec/Overview.html#the-script-element

Anda telah melakukan itu. Apa yang tidak untuk dicintai? Tidak ada pengkodean karakter yang diperlukan dengan data atribut. Anda dapat memformatnya jika Anda mau. Ini ekspresif dan tujuan penggunaannya jelas. Ini tidak terasa seperti hack (misalnya seperti menggunakan CSS untuk menyembunyikan elemen "carrier" Anda). Ini sangat valid.

Sebagai arahan umum, saya akan mencoba menggunakan atribut data HTML5 . Tidak ada yang menghentikan Anda memasukkan JSON yang valid. misalnya:

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

Jika Anda menggunakan jQuery, mengambilnya semudah:

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

Metode penyematan json dalam tag skrip ini memiliki potensi masalah keamanan. Dengan asumsi data json berasal dari input pengguna, dimungkinkan untuk membuat anggota data yang akan keluar dari tag skrip dan memungkinkan injeksi langsung ke dom. Lihat disini:

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

Ini suntikannya

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

Tidak ada cara untuk keluar / encoding.

Lihat Aturan # 3.1 di lembar contekan pencegahan XSS OWASP.

Katakanlah Anda ingin memasukkan JSON ini dalam HTML:

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

Buat yang tersembunyi <div>di HTML. Selanjutnya, keluar dari JSON Anda dengan mengenkode entitas yang tidak aman (misalnya, &, <,>, ", ', dan, /) dan letakkan di dalam elemen.

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

Sekarang Anda dapat mengaksesnya dengan membaca textContentelemen menggunakan JavaScript dan menguraikannya:

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

Saya menyarankan untuk memasukkan JSON ke dalam skrip inline dengan fungsi callback (jenis JSONP ):

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

Jika skrip pelaksana dimuat setelah dokumen, Anda dapat menyimpannya di suatu tempat, mungkin dengan argumen pengenal tambahan: someCallback("stuff", { ... });

Rekomendasi saya adalah menyimpan data JSON di .jsonfile eksternal , dan kemudian mengambil file tersebut melalui Ajax. Anda tidak memasukkan kode CSS dan JavaScript ke halaman web (sebaris), jadi mengapa Anda melakukannya dengan JSON?

HTML5 menyertakan <data>elemen untuk menjaga data yang dapat dibaca mesin. Sebagai alternatif — mungkin lebih aman — <script type="application/json">Anda dapat menyertakan data JSON Anda di dalam valueatribut elemen tersebut.

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>

Dalam hal ini, Anda perlu mengganti semua tanda kutip tunggal dengan 'atau dengan "jika Anda memilih untuk menyertakan nilai dengan tanda kutip ganda. Jika tidak, risiko Anda terkena serangan XSS seperti jawaban lain yang disarankan.