JavaScript
एक ही मूल नीति और क्रॉस-उत्पत्ति संचार

परिचय

समान-मूल नीति को दरकिनार करने के तरीके

जहां तक क्लाइंट-साइड जावास्क्रिप्ट इंजन का संबंध है (जो ब्राउज़र के अंदर चल रहे हैं), वर्तमान डोमेन के अलावा अन्य स्रोतों से सामग्री का अनुरोध करने के लिए कोई सीधा समाधान उपलब्ध नहीं है। (वैसे, यह सीमा जावास्क्रिप्ट-सर्वर टूल्स जैसे कि नोड जेएस में मौजूद नहीं है।)

हालांकि, यह (कुछ स्थितियों में) निम्नलिखित तरीकों का उपयोग करके अन्य स्रोतों से डेटा को पुनः प्राप्त करना संभव है। कृपया ध्यान दें कि उनमें से कुछ समाधान उत्पादन प्रणाली पर भरोसा करने के बजाय हैक या वर्कअराउंड प्रस्तुत कर सकते हैं।

विधि 1: कोर

अधिकांश सार्वजनिक एपीआई आज डेवलपर्स को CORS (क्रॉस-ऑरिजिनल रिसोर्स शेयरिंग) नामक सुविधा को सक्षम करके क्लाइंट और सर्वर के बीच डेटा को अप्रत्यक्ष रूप से भेजने की अनुमति देते हैं। यदि एक निश्चित HTTP हेडर ( Access-Control-Allow-Origin ) सेट किया गया है तो ब्राउज़र यह जाँच करेगा कि हेडिंग के मान में अनुरोधित साइट का डोमेन सूचीबद्ध है या नहीं। यदि यह है, तो ब्राउज़र AJAX कनेक्शन स्थापित करने की अनुमति देगा।

हालाँकि, क्योंकि डेवलपर्स अन्य सर्वरों के रिस्पॉन्स हेडर को नहीं बदल सकते हैं, इस पद्धति को हमेशा पर निर्भर नहीं किया जा सकता है।

विधि 2: JSONP

P जोड़ के साथ JSON को आमतौर पर वर्कअराउंड होने के लिए दोषी ठहराया जाता है। यह सबसे सीधा तरीका नहीं है, लेकिन यह अभी भी काम करता है। यह विधि इस तथ्य का लाभ उठाती है कि स्क्रिप्ट फ़ाइलों को किसी भी डोमेन से लोड किया जा सकता है। फिर भी, यह उल्लेख करना महत्वपूर्ण है कि बाहरी स्रोतों से जावास्क्रिप्ट कोड का अनुरोध करना हमेशा एक संभावित सुरक्षा जोखिम होता है और यदि कोई बेहतर समाधान उपलब्ध है तो इसे आमतौर पर टाला जाना चाहिए।

JSONP का उपयोग करने का अनुरोध किया गया डेटा आमतौर पर JSON है , जो जावास्क्रिप्ट में ऑब्जेक्ट परिभाषा के लिए उपयोग किए गए वाक्यविन्यास को फिट करने के लिए होता है, जिससे परिवहन का यह तरीका बहुत सरल हो जाता है। वेबसाइटों को JSONP के माध्यम से प्राप्त बाहरी डेटा का उपयोग करने का एक सामान्य तरीका यह है कि इसे कॉलबैक फ़ंक्शन के अंदर लपेटा जाए, जो URL में GET पैरामीटर के माध्यम से सेट किया गया है। एक बार बाहरी स्क्रिप्ट फ़ाइल लोड होने के बाद, फ़ंक्शन को इसके पहले पैरामीटर के रूप में डेटा के साथ बुलाया जाएगा।

<script>
function myfunc(obj){
    console.log(obj.example_field);
}
</script>
<script src="http://example.com/api/endpoint.js?callback=myfunc"></script>

http://example.com/api/endpoint.js?callback=myfunc की सामग्री इस तरह दिख सकती है:

myfunc({"example_field":true})

फ़ंक्शन को हमेशा पहले परिभाषित करना पड़ता है, अन्यथा बाहरी स्क्रिप्ट लोड होने पर इसे परिभाषित नहीं किया जाएगा।

संदेशों के साथ सुरक्षित क्रॉस-मूल संचार

window.postMessage() विधि अपने रिश्तेदार घटना हैंडलर window.onmessage साथ मिलकर क्रॉस-मूल संचार को सक्षम करने के लिए सुरक्षित रूप से उपयोग किया जा सकता है।

लक्ष्य window postMessage() विधि को दूसरी window एक संदेश भेजने के लिए कहा जा सकता है, जो इसे अपने onmessage इवेंट हैंडलर के साथ इंटरसेप्ट कर onmessage , इसे विस्तृत कर onmessage , और यदि आवश्यक हो, तो प्रेषक विंडो का उपयोग करके प्रतिक्रिया भेजें। postMessage() फिर से।

बच्चों के फ्रेम के साथ संवाद करने वाली खिड़की का उदाहरण

• http://main-site.com/index.html सामग्री:

   <!-- ... -->
   <iframe id="frame-id" src="http://other-site.com/index.html"></iframe>
   <script src="main_site_script.js"></script>
   <!-- ... -->
  

• http://other-site.com/index.html सामग्री:

   <!-- ... -->
   <script src="other_site_script.js"></src>
   <!-- ... -->
  

• main_site_script.js सामग्री:

   // Get the <iframe>'s window
   var frameWindow = document.getElementById('frame-id').contentWindow;
  
   // Add a listener for a response
   window.addEventListener('message', function(evt) {
       
       // IMPORTANT: Check the origin of the data! 
       if (event.origin.indexOf('http://other-site.com') == 0) {
           
           // Check the response
           console.log(evt.data);
           /* ... */
       }
   });        
  
   // Send a message to the frame's window
   frameWindow.postMessage(/* any obj or var */, '*');
  

• other_site_script.js सामग्री: other_site_script.js :

   window.addEventListener('message', function(evt) { 
  
       // IMPORTANT: Check the origin of the data! 
       if (event.origin.indexOf('http://main-site.com') == 0) {
           
           // Read and elaborate the received data
           console.log(evt.data);
           /* ... */
  
           // Send a response back to the main window
           window.parent.postMessage(/* any obj or var */, '*');
       }
   });