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.
javascript
json
dom
embedding
decoupling
Ben Lee
sumber
sumber
var
dalam javascript?</script><script>alert()</script><script>
di dalam objek JSON Anda, Anda akan mendapatkan kejutan. Ini tidak aman kecuali Anda membersihkan data terlebih dahulu.Jawaban:
Saya pikir metode asli Anda adalah yang terbaik. Spesifikasi HTML5 bahkan membahas penggunaan ini:
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.
sumber
script
tag.Sebagai arahan umum, saya akan mencoba menggunakan atribut data HTML5 . Tidak ada yang menghentikan Anda memasukkan JSON yang valid. misalnya:
Jika Anda menggunakan jQuery, mengambilnya semudah:
sumber
JSON.parse
tidak akan berfungsi (setidaknya Google Chrome JSON.parse asli tidak akan berfungsi). Spesifikasi JSON membutuhkan tanda kutip ganda. Tapi itu cukup mudah untuk diperbaiki menggunakan entitas seperti...<unicorns>:...
."I am valid JSON"
dan menggunakan tanda kutip ganda untuk tag, atau tanda kutip tunggal dengan tanda kutip tunggal dalam string, misalnyadata-unicorns='"My JSON's string"'
karena tanda kutip tunggal tidak di-escape dengan pengkodean sebagai JSON.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
Tidak ada cara untuk keluar / encoding.
sumber
Lihat Aturan # 3.1 di lembar contekan pencegahan XSS OWASP.
Katakanlah Anda ingin memasukkan JSON ini dalam HTML:
Buat yang tersembunyi
<div>
di HTML. Selanjutnya, keluar dari JSON Anda dengan mengenkode entitas yang tidak aman (misalnya, &, <,>, ", ', dan, /) dan letakkan di dalam elemen.Sekarang Anda dapat mengaksesnya dengan membaca
textContent
elemen menggunakan JavaScript dan menguraikannya:sumber
{name: 'Dwayne "The Rock" Johnson'}
. Tapi mungkin masih lebih baik menggunakan pendekatan ini karena framework / template library Anda kemungkinan sudah menyertakan cara yang aman untuk melakukan encoding HTML. Alternatifnya adalah menggunakan base64 yang merupakan HTML aman dan aman untuk dimasukkan ke dalam string JS. Sangat mudah untuk menyandikan / mendekode di JS menggunakan btoa () / atob () dan mungkin mudah bagi Anda untuk melakukan sisi server.<data>
elemen yang benar secara semantik dan menyertakan data JSON dalamvalue
atribut. Kemudian Anda hanya perlu mengosongkan tanda kutip"
jika Anda menggunakan tanda kutip ganda untuk menyertakan data, atau'
jika Anda menggunakan tanda kutip tunggal (mungkin lebih baik).Saya menyarankan untuk memasukkan JSON ke dalam skrip inline dengan fungsi callback (jenis JSONP ):
Jika skrip pelaksana dimuat setelah dokumen, Anda dapat menyimpannya di suatu tempat, mungkin dengan argumen pengenal tambahan:
someCallback("stuff", { ... });
sumber
Rekomendasi saya adalah menyimpan data JSON di
.json
file 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?sumber
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 dalamvalue
atribut elemen tersebut.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.sumber