डोम में मनमानी JSON एम्बेड करने के लिए सबसे अच्छा अभ्यास?

Question

मैं इस तरह डोम में मनमाने ढंग से JSON एम्बेड करने के बारे में सोच रहा हूँ:

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

इस तरह एक एक JavaScript टेम्प्लेट इंजन के साथ बाद में उपयोग के लिए डोम में एक मनमाना HTML टेम्पलेट संग्रहीत कर सकता है के समान है। इस मामले में, हम बाद में JSON पुनः प्राप्त कर सकते हैं और साथ उसे पार्स:

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

This works, लेकिन यह सबसे अच्छा तरीका है? क्या यह किसी भी सर्वोत्तम अभ्यास या मानक का उल्लंघन करता है?

नोट: मैं डीओएम में जेएसओएन को संग्रहीत करने के विकल्पों की तलाश नहीं कर रहा हूं, मैंने पहले ही तय कर लिया है कि मेरे पास होने वाली विशेष समस्या का सबसे अच्छा समाधान है। मैं बस इसे करने का सबसे अच्छा तरीका ढूंढ रहा हूं।

Answer 1

मुझे लगता है कि आपकी मूल विधि सर्वोत्तम है। एचटीएमएल 5 कल्पना भी पते इस प्रयोग:

"जब (लिपियों के विपरीत) डेटा ब्लॉक शामिल करने के लिए प्रयोग किया जाता है, डेटा सन्निहित होना चाहिए इनलाइन, डाटा का स्वरूप प्रकार विशेषता का उपयोग कर दिया जाना चाहिए, src विशेषता निर्दिष्ट नहीं की जानी चाहिए, और स्क्रिप्ट तत्व की सामग्री को प्रारूपित प्रारूप के लिए परिभाषित आवश्यकताओं के अनुरूप होना चाहिए। "

यहां पढ़ें: http://dev.w3.org/html5/spec/Overview.html#the-script-element

आप वास्तव में किया है। कौन सी चीज़ क्या प्यार करने के लिए नहीं है? गुण डेटा के साथ आवश्यक कोई वर्ण एन्कोडिंग नहीं। यदि आप चाहें तो इसे प्रारूपित कर सकते हैं। यह अभिव्यक्तिपूर्ण है और इच्छित उपयोग स्पष्ट है। यह एक हैक की तरह महसूस नहीं करता है (उदाहरण के लिए अपने "वाहक" तत्व को छिपाने के लिए सीएसएस का उपयोग करना)। यह पूरी तरह से मान्य है।

Answer 2

एक सामान्य दिशा के रूप में, मैं इसके बजाय HTML5 data attributes का उपयोग करने का प्रयास करूंगा। आपको वैध JSON डालने से रोकने के लिए कुछ भी नहीं है। उदाहरण के लिए:

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

आप jQuery का उपयोग कर रहे हैं, तो पुन: प्राप्त करने के रूप में आसान है:

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

Answer 3

मैं एक समारोह कॉलबैक (JSONP के प्रकार के साथ एक इनलाइन स्क्रिप्ट में JSON डाल करने के लिए सुझाव देंगे):

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

क्रियान्वित स्क्रिप्ट दस्तावेज़ के बाद लोड किया जाता है, तो आप एक अतिरिक्त पहचानकर्ता तर्क के साथ संभवतः इस कहीं स्टोर कर सकते हैं,: someCallback("stuff", { ... });

Answer 4

मेरी सिफारिश जेएसओएन डेटा को बाहरी .json फ़ाइलों में रखना होगा, और फिर उन फ़ाइलों को अजाक्स के माध्यम से पुनर्प्राप्त करना होगा। आप वेब पेज (इनलाइन) पर सीएसएस और जावास्क्रिप्ट कोड नहीं डालते हैं, तो आप JSON के साथ ऐसा क्यों करेंगे?

Answer 5

एक स्क्रिप्ट टैग में जेसन एम्बेड करने की यह विधि एक संभावित सुरक्षा समस्या है। उपयोगकर्ता इनपुट से उत्पन्न जेसन डेटा मानते हुए, डेटा सदस्य को तैयार करना संभव है जो प्रभावी रूप से स्क्रिप्ट टैग से बाहर हो जाएगा और डोम में प्रत्यक्ष इंजेक्शन की अनुमति देगा।यहाँ देखें:

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

यहाँ इंजेक्शन

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

बस कोई चारों ओर जिस तरह से बचने/एन्कोडिंग नहीं है है।

Answer 6

ओडब्ल्यूएएसपी की एक्सएसएस रोकथाम धोखा शीट में Rule #3.1 देखें।

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

एक छिपा <div> HTML में बनाएँ:

आप HTML में इस JSON शामिल करने के लिए चाहते हैं। इसके बाद, असुरक्षित संस्थाओं एन्कोडिंग करके अपने JSON से बचने के (जैसे, &, <,>, ", ', और, /) और तत्व के अंदर डाल दिया।

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

अब आप textContent के पढ़ने तक पहुँच सकते हैं तत्व जावास्क्रिप्ट का उपयोग और यह पार्स करने:

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