DOM'a rastgele JSON yerleştirmek için en iyi uygulama?

DOM'a rastgele JSON yerleştirmeyi şu şekilde düşünüyorum:

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

Bu, rastgele bir HTML şablonunun daha sonra bir JavaScript şablon motoruyla kullanılmak üzere DOM'da saklanmasına benzer. Bu durumda, daha sonra JSON'yi alıp şu şekilde ayrıştırabiliriz:

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

Bu işe yarıyor , ama en iyi yol bu mu? Bu, herhangi bir en iyi uygulamayı veya standardı ihlal ediyor mu?

Not: JSON'u DOM'da depolamak için alternatifler aramıyorum, yaşadığım belirli sorun için en iyi çözümün bu olduğuna zaten karar verdim. Ben sadece bunu yapmanın en iyi yolunu arıyorum.

Orijinal yönteminizin en iyisi olduğunu düşünüyorum. HTML5 spesifikasyonu bu kullanımı bile ele alır:

"Veri bloklarını dahil etmek için kullanıldığında (komut dosyalarının aksine), veriler satır içinde gömülmeli, verilerin formatı type özelliği kullanılarak verilmeli, src niteliği belirtilmemeli ve komut dosyası öğesinin içeriği kullanılan format için tanımlanan gereksinimlere uygundur. "

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

Tam olarak bunu yaptın. Sevmemek nedir? Öznitelik verileriyle gerektiği gibi karakter kodlaması yok. İsterseniz biçimlendirebilirsiniz. Anlamlı ve kullanım amacı açıktır. Bir hack gibi gelmiyor (örneğin "taşıyıcı" öğenizi gizlemek için CSS kullanmak gibi). Tamamen geçerli.

Genel bir yön olarak, bunun yerine HTML5 veri özniteliklerini kullanmayı deneyeceğim . Geçerli JSON eklemenizi engelleyecek hiçbir şey yok. Örneğin:

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

JQuery kullanıyorsanız, geri almak şu kadar kolaydır:

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

Bir komut dosyası etiketine json yerleştirme yönteminin olası bir güvenlik sorunu vardır. Json verilerinin kullanıcı girdisinden kaynaklandığını varsayarsak, gerçekte kod etiketinden çıkacak ve doma doğrudan enjeksiyona izin verecek bir veri üyesi oluşturmak mümkündür. Buraya bakın:

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

İşte enjeksiyon

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

Kaçış / kodlama yapmanın hiçbir yolu yoktur.

OWASP'nin XSS önleme hile sayfasındaki Kural 3.1'e bakın .

Bu JSON'yi HTML'ye dahil etmek istediğinizi varsayalım:

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

<div>HTML'de bir gizli oluşturun . Ardından, güvenli olmayan varlıkları (örneğin, &, <,>, ", 've, /) kodlayarak JSON'nuzdan çıkış yapın ve onu öğenin içine yerleştirin.

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

Artık textContent, JavaScript kullanarak öğenin içeriğini okuyup ayrıştırarak ona erişebilirsiniz :

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

JSON'u bir işlev geri çağırma ( JSONP türü ) ile bir satır içi komut dosyasına koymanızı öneririm :

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

Yürütme betiği belgeden sonra yüklenirse, bunu bir yerde, muhtemelen ek bir tanımlayıcı bağımsız değişkeniyle saklayabilirsiniz: someCallback("stuff", { ... });

Benim tavsiyem, JSON verilerini harici .jsondosyalarda tutmak ve sonra bu dosyaları Ajax aracılığıyla almak olacaktır. CSS ve JavaScript kodunu web sayfasına (satır içi) koymuyorsunuz, öyleyse neden JSON ile yapasınız?

HTML5, makinede okunabilir verileri tutmak için bir <data>öğe içerir . Belki de daha güvenli bir alternatif olarak <script type="application/json">JSON verilerinizi valueo öğenin özelliğine dahil edebilirsiniz .

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>

Bu durumda , değeri çift tırnak içine almayı seçerseniz , tüm tek tırnak işaretlerini ile 'veya ile değiştirmeniz gerekir ". Aksi takdirde, diğer yanıtların önerdiği gibi riskli XSS saldırılarınız.