JSONP क्या है, और इसे क्यों बनाया गया था?

Question

मैं JSON समझ रहा हूं, लेकिन JSONP नहीं। JSON पर विकिपीडिया का दस्तावेज़ JSONP का शीर्ष खोज परिणाम है (था)। यह कहता है:

JSONP या "पेडिंग के साथ JSON" एक JSON एक्सटेंशन है, जिसमें कॉल के इनपुट तर्क के रूप में एक उपसर्ग निर्दिष्ट किया जाता है।

है ना? क्या कहते हैं? इससे मुझे कोई मतलब नहीं है। JSON एक डेटा प्रारूप है। कोई कॉल नहीं है।

2 खोज परिणाम कुछ पुरुष नामित से है रेमी जो JSONP के बारे में इस लिखते हैं,:

JSONP स्क्रिप्ट टैग इंजेक्शन है, जो सर्वर से उपयोगकर्ता द्वारा निर्दिष्ट फ़ंक्शन को प्रतिक्रिया देता है।

मैं इसे समझ सकता हूं, लेकिन इसका अभी भी कोई मतलब नहीं है।

---

तो JSONP क्या है? इसे क्यों बनाया गया (यह किस समस्या का हल है)? और मैं इसका उपयोग क्यों करूंगा?

---

परिशिष्ट : मैंने विकिपीडिया पर JSONP के लिए एक नया पृष्ठ बनाया है ; यह अब के आधार पर, JSONP का एक स्पष्ट और पूरी तरह से विवरण नहीं है jvenema के जवाब।

Comments

रिकॉर्ड के लिए, JSONP का उपयोग न करें यदि आप उस सर्वर पर भरोसा नहीं करते हैं जिसे आप 100% बात कर रहे हैं। यदि यह समझौता किया जाता है, तो आपके वेबपेज पर तुच्छ रूप से समझौता किया जाएगा।

— नवजागेको २

यह भी ध्यान दें कि यदि सही ढंग से लागू नहीं किया गया है तो JSONP को अपहृत किया जा सकता है।

— पचेरियर

मैं JSONP के लेखक को श्रेय देना चाहूंगा जिन्होंने इसके पीछे दर्शन दिया: JSONP पर बॉब Ippolito का संग्रह । उन्होंने JSONP को "क्रॉस-डोमेन डेटा लाने के लिए स्क्रिप्ट टैग विधि के लिए एक नई तकनीक अज्ञेय मानक पद्धति" के रूप में पेश किया।

— harshvchawla

Answer 1

यह वास्तव में बहुत जटिल नहीं है ...

कहें कि आप डोमेन पर हैं example.com, और आप डोमेन के लिए एक अनुरोध करना चाहते हैं example.net। ऐसा करने के लिए, आपको डोमेन सीमाओं को पार करने की आवश्यकता है , अधिकांश ब्राउज़रलैंड में एक नहीं-नहीं ।

इस सीमा को दरकिनार करने वाला एक आइटम <script>टैग है। आप एक स्क्रिप्ट टैग का उपयोग करते हैं, तो डोमेन सीमा को नजरअंदाज कर दिया जाता है, लेकिन सामान्य परिस्थितियों में, तुम सच में नहीं कर सकते करने के परिणामों के साथ कुछ भी, स्क्रिप्ट सिर्फ का मूल्यांकन किया जाता है।

दर्ज करें JSONP। जब आप JSONP सक्षम सर्वर के लिए अपना अनुरोध करते हैं, तो आप एक विशेष पैरामीटर पास करते हैं जो सर्वर को आपके पेज के बारे में थोड़ा सा बताता है। इस तरह, सर्वर अच्छी तरह से अपनी प्रतिक्रिया को इस तरह से लपेटने में सक्षम है कि आपका पृष्ठ संभाल सकता है।

उदाहरण के लिए, callbackमान लें कि सर्वर को JSONP क्षमताओं को सक्षम करने के लिए एक पैरामीटर की उम्मीद है। तब आपका अनुरोध ऐसा लगेगा:

http://www.example.net/sample.aspx?callback=mycallback

JSONP के बिना, यह कुछ मूल जावास्क्रिप्ट ऑब्जेक्ट लौटा सकता है, जैसे:

{ foo: 'bar' }

हालांकि, JSONP के साथ, जब सर्वर को "कॉलबैक" पैरामीटर प्राप्त होता है, तो यह परिणाम को थोड़ा अलग तरीके से लपेटता है, इस पर कुछ लौटाता है:

mycallback({ foo: 'bar' });

जैसा कि आप देख सकते हैं, यह अब आपके द्वारा निर्दिष्ट विधि को लागू करेगा। इसलिए, अपने पृष्ठ में, आप कॉलबैक फ़ंक्शन को परिभाषित करते हैं:

mycallback = function(data){
  alert(data.foo);
};

और अब, जब स्क्रिप्ट भरी हुई है, तो इसका मूल्यांकन किया जाएगा, और आपके कार्य को निष्पादित किया जाएगा। Voila, क्रॉस-डोमेन अनुरोध!

यह JSONP के साथ एक प्रमुख मुद्दे पर ध्यान देने योग्य है: आप अनुरोध का बहुत नियंत्रण खो देते हैं। उदाहरण के लिए, उचित विफलता कोड वापस पाने का कोई "अच्छा" तरीका नहीं है। नतीजतन, आप अनुरोध आदि की निगरानी के लिए टाइमर का उपयोग करते हैं, जो हमेशा थोड़ा संदिग्ध होता है। JSONRequest के लिए प्रस्ताव क्रॉस डोमेन स्क्रिप्टिंग की अनुमति देने, सुरक्षा बनाए रखने और अनुरोध के उचित नियंत्रण की अनुमति देने का एक शानदार समाधान है।

इन दिनों (2015), CORS अनुशंसित दृष्टिकोण बनाम JSONRequest है। JSONP अभी भी पुराने ब्राउज़र समर्थन के लिए उपयोगी है, लेकिन सुरक्षा के निहितार्थ को देखते हुए, जब तक कि आपके पास कोई विकल्प नहीं है CORS बेहतर विकल्प है।

Comments

कृपया ध्यान दें कि JSONP का उपयोग करने के कुछ सुरक्षा निहितार्थ हैं। जैसा कि JSONP वास्तव में जावास्क्रिप्ट है, यह सब कुछ कर सकता है जो जावास्क्रिप्ट कर सकता है, इसलिए आपको JSONP डेटा के प्रदाता पर भरोसा करने की आवश्यकता है। मैंने इसके बारे में सोम ब्लॉग पोस्ट लिखी है: erlend.oftedal.no/blog/?blogid=97

— Erlend

क्या JSONP में वास्तव में कोई नया सुरक्षा निहितार्थ है जो <script> टैग में मौजूद नहीं है? एक स्क्रिप्ट टैग के साथ ब्राउज़र गैर-हानिकारक जावास्क्रिप्ट को वितरित करने के लिए सर्वर पर भरोसा कर रहा है, जिसे ब्राउज़र नेत्रहीन मूल्यांकन करता है। क्या JSONP उस तथ्य को बदलता है? ऐसा लगता है कि यह नहीं है।

— चेसो

नहीं, यह नहीं है। आप इसे जावास्क्रिप्ट वितरित करने के लिए भरोसा करते हैं, यही बात JSONP के लिए भी लागू होती है।

— जेवेनिमा

यह ध्यान देने योग्य है कि आप डेटा को कैसे लौटाते हैं, इसे बदलकर सुरक्षा को थोड़ा बढ़ा सकते हैं। यदि आप स्क्रिप्ट को सच्चे JSON फॉर्मेट में लौटाते हैं जैसे कि mycallback ('{{foo ":" bar "}") (ध्यान दें कि पैरामीटर अब एक स्ट्रिंग है), तो आप मैन्युअल रूप से डेटा को स्वयं को "क्लीन" करने से पहले पार्स कर सकते हैं। मूल्यांकन।

— jvenema

CURL एक सर्वर-साइड समाधान है, न कि क्लाइंट-साइड। वे दो अलग-अलग उद्देश्यों की पूर्ति करते हैं।

— jvenema

Answer 2

JSONP XMLHttpRequest समान डोमेन नीति को पार करने के लिए वास्तव में एक सरल चाल है । (जैसा कि आप जानते हैं कि कोई एक अलग डोमेन के लिए AJAX (XMLHttpRequest) अनुरोध नहीं भेज सकता है ।)

इसलिए - XMLHttpRequest का उपयोग करने के बजाय हमें स्क्रिप्ट HTML टैग्स का उपयोग करना होगा , जिन्हें आप आमतौर पर js फ़ाइलों को लोड करने के लिए उपयोग करते हैं, ताकि js किसी अन्य डोमेन से डेटा प्राप्त कर सकें। अजीब लगता है?

बात यह है - बारी बारी से स्क्रिप्ट टैग XMLHttpRequest के समान फैशन में इस्तेमाल किया जा सकता है ! इसकी जांच करें:

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';

आप एक स्क्रिप्ट खंड के साथ समाप्त होंगे जो डेटा लोड होने के बाद इस तरह दिखता है:

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

हालाँकि यह थोड़ा असुविधाजनक है, क्योंकि हमें इस सरणी को स्क्रिप्ट टैग से प्राप्त करना है । तो JSONP रचनाकारों ने फैसला किया कि यह बेहतर काम करेगा (और यह है):

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data?callback=my_callback';

वहाँ पर my_callback फ़ंक्शन को नोटिस करें ? इसलिए - जब JSONP सर्वर आपका अनुरोध प्राप्त करता है और कॉलबैक पैरामीटर पाता है - सादे js सरणी को वापस करने के बजाय यह इसे वापस कर देगा:

my_callback({['some string 1', 'some data', 'whatever data']});

देखें कि लाभ कहां है: अब हम स्वचालित कॉलबैक (my_callback) प्राप्त करते हैं जो डेटा प्राप्त करने के बाद चालू हो जाएगा। JSONP के
बारे में जानने के लिए बस इतना ही है : यह एक कॉलबैक और स्क्रिप्ट टैग है।

नोट: ये JSONP उपयोग के सरल उदाहरण हैं, ये प्रोडक्शन रेडी स्क्रिप्ट नहीं हैं।

बेसिक जावास्क्रिप्ट उदाहरण (JSONP का उपयोग करके सरल ट्विटर फ़ीड)

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>

बेसिक jQuery का उदाहरण (JSONP का उपयोग करके सरल ट्विटर फ़ीड)

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>

JSONP पैडिंग के साथ JSON के लिए खड़ा है । (बहुत खराब तरीके से नामित तकनीक के रूप में इसका वास्तव में कोई लेना-देना नहीं है कि ज्यादातर लोग "पैडिंग" के बारे में क्या सोचते हैं।)

Comments

स्क्रिप्ट टैग स्पष्टीकरण के लिए धन्यवाद। मैं यह पता लगाने में सक्षम नहीं था कि JSONP द्वारा क्रॉस डोमेन सुरक्षा नीति को कैसे बाईपास किया गया। स्पष्टीकरण के बाद मुझे इस बात को याद करने में एक मूर्खतापूर्ण मूर्खता महसूस होती है ...

— एडुआर्ड

यह jvenema के जवाब के लिए एक बहुत अच्छा पूरक उत्तर है - मुझे समझ नहीं आया कि कॉलबैक तब तक क्यों आवश्यक था जब तक कि आप यह नहीं बता देते कि json डेटा को अन्यथा स्क्रिप्ट तत्व के माध्यम से एक्सेस करना होगा।

— मैट

ऐसी स्पष्ट व्याख्या के लिए धन्यवाद। काश मेरी कॉलेज की पाठ्यपुस्तकें आप जैसे लोगों द्वारा लिखी

— जातीं

पिछले एक के बजाय अच्छा अन्वेषण। Ofcourse- आपका अंश "जिन्हें आप आमतौर पर js फ़ाइलों को लोड करने के लिए उपयोग करते हैं, ताकि js किसी अन्य डोमेन से प्राप्त कर सकें। अजीब लगता है?" मेरे लिए आंखें खोलने वाला भी है। बहुत ही शानदार में उदाहरण कोड।

— सिसलाम

गद्दी का शाब्दिक होना जरूरी नहीं है। यह एक रूपक की तरह है। तो इसका मतलब "JSON कुछ 'रिक्त स्थान' हो सकता है"। lol

— marvinIsSacul

Answer 3

JSONP एक "स्क्रिप्ट" तत्व का निर्माण करके काम करता है (या तो HTML मार्कअप में या जावास्क्रिप्ट के माध्यम से DOM में डाला जाता है), जो एक दूरस्थ डेटा सेवा स्थान के लिए अनुरोध करता है। प्रतिक्रिया एक जावास्क्रिप्ट है जो आपके ब्राउज़र पर पूर्व-निर्धारित फ़ंक्शन के नाम के साथ लोड की जाती है और साथ ही पैरामीटर को पारित किया जा रहा है जो कि tht JSON डेटा का अनुरोध किया जा रहा है। जब स्क्रिप्ट निष्पादित होती है, तो फ़ंक्शन को JSON डेटा के साथ कहा जाता है, जिससे अनुरोध पृष्ठ को डेटा प्राप्त करने और संसाधित करने की अनुमति मिलती है।

आगे पढ़ने के लिए: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

कोड के ग्राहक पक्ष स्निपेट

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

PHP कोड का सर्वर साइड टुकड़ा

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>

Comments

लिंक अभी शीर्ष पर 404s

— केविन बील

उस लिंक की सामग्री अब http://scn.sap.com/community/developer-center/front-end/blog/2013/07/15/secret-behind-jsonp पर उपलब्ध है ।

— 19

Answer 4

क्योंकि आप सर्वर को किसी दिए गए JSON ऑब्जेक्ट के लिए एक उपसर्ग प्रस्तुत करने के लिए कह सकते हैं। उदाहरण के लिए

function_prefix(json_object);

evalएक अभिव्यक्ति के रूप में JSON स्ट्रिंग को "इनलाइन" करने के लिए ब्राउज़र के लिए । यह ट्रिक सर्वर के लिए क्लाइंट ब्राउज़र में सीधे जावास्क्रिप्ट कोड को "इंजेक्ट" करना संभव बनाता है और यह "उसी मूल" प्रतिबंधों को दरकिनार करता है।

दूसरे शब्दों में, आप क्रॉस-डोमेन डेटा एक्सचेंज प्राप्त कर सकते हैं ।

---

आम तौर पर, XMLHttpRequestसीधे क्रॉस-डोमेन डेटा-एक्सचेंज की अनुमति नहीं देता है (एक ही डोमेन में एक सर्वर के माध्यम से जाने की आवश्यकता होती है):

<script src="some_other_domain/some_data.js&prefix=function_prefix> `एक मूल से अलग डोमेन से डेटा का उपयोग कर सकते हैं।

---

इसके अलावा ध्यान देने योग्य: भले ही "ट्रिक" के उस प्रकार का प्रयास करने से पहले सर्वर को "विश्वसनीय" माना जाना चाहिए, वस्तु प्रारूप आदि में संभावित परिवर्तन के दुष्प्रभाव शामिल हो सकते हैं। यदि function_prefixJSON ऑब्जेक्ट को प्राप्त करने के लिए एक (यानी एक उचित js फ़ंक्शन) का उपयोग किया जाता है, तो उक्त फ़ंक्शन रिटर्न किए गए डेटा को स्वीकार / आगे संसाधित करने से पहले चेक कर सकता है।

Comments

"उपसर्ग जोड़ें" भ्रामक है :)

— jub0bs

Answer 5

JSONP क्रॉस-डोमेन स्क्रिप्टिंग त्रुटियों के आसपास प्राप्त करने के लिए एक महान दूर है। आप सर्वर पर AJAX प्रॉक्सी को लागू किए बिना जेएसपी के साथ शुद्ध रूप से JSONP सेवा का उपभोग कर सकते हैं।

यह कैसे काम करता है यह देखने के लिए आप b1t.co सेवा का उपयोग कर सकते हैं । यह एक मुफ्त JSONP सेवा है जो आपको अपने URL को छोटा करने के लिए आवंटित करती है। यहाँ सेवा के लिए उपयोग करने के लिए यूआरएल है:

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

उदाहरण के लिए, कॉल करें, http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

लौटूंगा

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

और इस प्रकार जब यह आपके ss में src के रूप में लोड हो जाता है, तो यह स्वचालित रूप से जो भी जावास्क्रिप्ट नाम से चलेगा, जिसे आपको अपने कॉलबैक फ़ंक्शन के रूप में लागू करना चाहिए:

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

वास्तव में JSONP कॉल करने के लिए, आप इसे कई तरीकों से कर सकते हैं (जिसमें jQuery का उपयोग भी शामिल है) लेकिन यहाँ एक शुद्ध JS उदाहरण है:

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

एक कदम से कदम उदाहरण और पर काम करने के लिए एक jsonp वेब सेवा इस पोस्ट पर उपलब्ध है:

Comments

अपना उत्तर पोस्ट करने के लिए धन्यवाद! कृपया ध्यान दें कि आपको इस साइट पर उत्तर के आवश्यक भागों को पोस्ट करना चाहिए, या आपके पोस्ट को हटाए जाने के जोखिमों को अक्सर पूछे जाने वाले प्रश्न देखें जहां यह उन उत्तरों का उल्लेख करता है जो 'लिंक से मुश्किल से अधिक हैं'। यदि आप चाहें, तो भी आप लिंक को शामिल कर सकते हैं, लेकिन केवल 'संदर्भ' के रूप में। लिंक की आवश्यकता के बिना जवाब अपने दम पर खड़ा होना चाहिए।

— टैरिन

Answer 6

JSONP के उपयोग के लिए एक सरल उदाहरण।

client.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

server.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>    

Answer 7

JSONP को समझने से पहले, आपको JSON फॉर्मेट और XML को जानना होगा। वर्तमान में वेब पर सबसे अधिक उपयोग किया जाने वाला डेटा प्रारूप XML है, लेकिन XML बहुत जटिल है। यह उपयोगकर्ताओं को वेब पृष्ठों में एम्बेडेड प्रक्रिया करने में असुविधाजनक बनाता है।

जावास्क्रिप्ट को आसानी से डेटा का आदान-प्रदान करने के लिए, यहां तक ​​कि डेटा प्रोसेसिंग प्रोग्राम के रूप में, हम जावास्क्रिप्ट ऑब्जेक्ट्स के अनुसार शब्दांकन का उपयोग करते हैं और एक साधारण डेटा विनिमय प्रारूप विकसित करते हैं, जो कि JSON है। JSON का उपयोग डेटा के रूप में, या जावास्क्रिप्ट प्रोग्राम के रूप में किया जा सकता है।

JSON को जावास्क्रिप्ट में सीधे एम्बेड किया जा सकता है, उनका उपयोग करके आप कुछ JSON प्रोग्राम को सीधे निष्पादित कर सकते हैं, लेकिन सुरक्षा बाधाओं के कारण, ब्राउज़र सैंडबॉक्स तंत्र क्रॉस-डोमेन JSON कोड निष्पादन को अक्षम करता है।

निष्पादन के बाद JSON को पारित करने के लिए, हमने JSONP विकसित किया। JSONP जावास्क्रिप्ट कॉलबैक कार्यक्षमता और <स्क्रिप्ट> टैग के साथ ब्राउज़र की सुरक्षा सीमाओं को बायपास करता है।

तो संक्षेप में यह बताता है कि JSONP क्या है, यह किस समस्या को हल करता है (इसका उपयोग कब करना है)।

Comments

मैंने इसे अस्वीकार कर दिया क्योंकि मुझे इस कथन पर विश्वास नहीं है कि XML दिसम्बर 15 में वेब पर सबसे अधिक इस्तेमाल किया जाने वाला डेटा प्रारूप था।

— रॉबीड

यह अभी भी यह नहीं बताता है कि json के बजाय jsonp का उपयोग क्यों किया जाता है। वे सभी सुरक्षा प्रतिबंध कहाँ से आ रहे हैं? हम क्रॉस-डोमेन के लिए jsonp का उपयोग नहीं कर सकते, बल्कि json का उपयोग क्यों कर सकते हैं?

— मेरुनास ग्रिंकलाइटिस

Answer 8

टी एल; डॉ

JSONP सुरक्षा प्रतिबंध को बायपास करने के लिए आविष्कार की गई एक पुरानी चाल है जो हमें JSON डेटा को एक अलग सर्वर (एक अलग मूल * ) से प्राप्त करने के लिए मना करती है ।

ट्रिक एक <script>टैग का उपयोग करके काम करता है जो उस स्थान से JSON के लिए पूछता है, जैसे:, { "user":"Smith" }लेकिन एक फ़ंक्शन में लिपटे, वास्तविक JSONP ("पैडिंग के साथ JSON"):

peopleDataJSONP({"user":"Smith"})

इसे इस रूप में प्राप्त करना हमें अपने peopleDataJSONPफ़ंक्शन के भीतर डेटा का उपयोग करने में सक्षम बनाता है । JSONP एक बुरा अभ्यास है , इसका उपयोग न करें (नीचे पढ़ें)

समस्या

मान लें कि हम नेविगेट कर रहे हैं ourweb.com, और हम JSON डेटा (या वास्तव में कोई भी कच्चा डेटा) प्राप्त करना चाहते हैं anotherweb.com। हम GET अनुरोध उपयोग किया है तो (जैसे XMLHttpRequest, एक fetchकॉल, $.ajax, आदि), हमारे ब्राउज़र हमें बताओ होगा यह इस बदसूरत त्रुटि के साथ अनुमति नहीं है:

हम कैसे डेटा प्राप्त करना चाहते हैं? खैर, <script>टैग इस पूरे सर्वर (मूल *) प्रतिबंध के अधीन नहीं हैं! इसीलिए हम बिना किसी त्रुटि के किसी भी सर्वर जैसे jnc या गूगल मैप्स जैसे किसी सीडीएन से लाइब्रेरी लोड कर सकते हैं।

महत्वपूर्ण बिंदु : यदि आप इसके बारे में सोचते हैं, तो वे पुस्तकालय वास्तविक, रन करने योग्य जेएस कोड हैं (आमतौर पर सभी तर्क के साथ एक बड़े पैमाने पर कार्य)। लेकिन कच्चे डेटा? JSON डेटा कोड नहीं है । चलाने के लिए कुछ भी नहीं है; यह सिर्फ सादा डेटा है।

इसलिए, हमारे कीमती डेटा को संभालने या हेरफेर करने का कोई तरीका नहीं है। ब्राउज़र हमारे <script>टैग द्वारा इंगित किए गए डेटा को डाउनलोड करेगा और प्रसंस्करण करते समय यह सही शिकायत करेगा:

wtf क्या यह {"user":"Smith"}बकवास है? यह कोड नहीं है। मैं गणना नहीं कर सकता, वाक्यविन्यास त्रुटि!

JSONP हैक

उस डेटा का उपयोग करने का पुराना / हैकी तरीका? हमें उस सर्वर को कुछ तर्क के साथ भेजने की आवश्यकता है, इसलिए जब यह लोड हो जाता है, तो ब्राउज़र में आपका कोड उक्त डेटा का उपयोग करने में सक्षम होगा। तो विदेशी सर्वर हमें जेएस फ़ंक्शन के अंदर JSON डेटा भेजता है। डेटा स्वयं उस फ़ंक्शन के इनपुट के रूप में सेट किया गया है। यह इस तरह दिख रहा है:

peopleDataJSONP({"user":"Smith"})

जो इसे JS कोड बनाता है हमारा ब्राउज़र बिना शिकायत के पार्स करेगा! बिल्कुल वैसे ही जैसे यह jQuery लाइब्रेरी के साथ होता है। अब, इसे इस तरह से प्राप्त करने के लिए, क्लाइंट "इसके लिए JSONP- अनुकूल सर्वर" पूछता है, आमतौर पर इस तरह से किया जाता है:

<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>

हमारा ब्राउज़र उस फ़ंक्शन नाम के साथ JSONP प्राप्त करेगा, इसलिए हमें अपने कोड में समान नाम के साथ एक फ़ंक्शन की आवश्यकता है:

const peopleDataJSONP = function(data){
  alert(data.user); // "Smith"
}

या इस तरह, एक ही परिणाम:

function peopleDataJSONP(data){
  alert(data.user); // "Smith"
}

ब्राउज़र JSONP डाउनलोड करेगा और इसे चलाएगा, जो हमारे फ़ंक्शन को कॉल करता है , जहां तर्क dataहमारा JSON होगा। हम अब अपने डेटा के साथ जो चाहें कर सकते हैं।

JSONP का उपयोग न करें, CORS का उपयोग करें

JSONP कुछ डाउनसाइड के साथ एक क्रॉस-साइट हैक है:

• हम केवल GET अनुरोध कर सकते हैं
• चूंकि यह एक सरल स्क्रिप्ट टैग द्वारा ट्रिगर किया गया GET अनुरोध है, इसलिए हमें सहायक त्रुटियां या प्रगति की जानकारी नहीं मिलती है
• कुछ सुरक्षा चिंताएँ भी हैं, जैसे आपके ग्राहक जेएस कोड में चल रहे हैं जिसे दुर्भावनापूर्ण पेलोड में बदला जा सकता है
• यह केवल JSON डेटा के साथ समस्या को हल करता है, लेकिन समान-मूल सुरक्षा नीति अन्य डेटा (WebFonts, चित्र / वीडियो के साथ drawImage () ...) पर लागू होती है
• यह बहुत सुरुचिपूर्ण और न ही पठनीय है।

Takeaway यह है कि आजकल इसका उपयोग करने की कोई आवश्यकता नहीं है ।

JSONP एक अन्य सर्वर से JSON डेटा प्राप्त करने की चाल है, लेकिन यदि हम अन्य प्रकार के क्रॉस-साइट सामान की आवश्यकता है, तो हम उसी सुरक्षा सिद्धांत (समान-मूल) का उल्लंघन करेंगे।

आपको यहां कोर के बारे में पढ़ना चाहिए , लेकिन इसका सार यह है:

क्रॉस-ऑरिजनल रिसोर्स शेयरिंग (CORS) एक ऐसा तंत्र है जो अतिरिक्त HTTP हेडर का उपयोग करके ब्राउज़र को एक मूल पर चलने वाले वेब एप्लिकेशन को देने के लिए कहता है, एक अलग मूल से चयनित संसाधनों तक पहुंच। एक वेब एप्लिकेशन एक क्रॉस-ऑरिजनल HTTP रिक्वेस्ट पर अमल करता है, जब वह एक ऐसे संसाधन का अनुरोध करता है, जिसका अपना एक अलग मूल (डोमेन, प्रोटोकॉल या पोर्ट) है।

---

* उत्पत्ति को 3 चीजों से परिभाषित किया गया है: प्रोटोकॉल , पोर्ट और होस्ट । इसलिए, उदाहरण के लिए, (भिन्न प्रोटोकॉल) और (अलग पोर्ट) की https://web.comतुलना में एक अलग मूल है और जाहिर है (अलग मेजबान)http://web.comhttps://web.com:8081https://thatotherweb.net

Comments

अरे यार, यह स्वीकृत जवाब के लिए एक फुटनोट के रूप में 100% स्पष्टता प्रदान करता है! इसके लिए धन्यवाद ....

— M'Baku

Answer 9

शानदार जवाब पहले ही दिए जा चुके हैं, मुझे बस अपना टुकड़ा जावास्क्रिप्ट में कोड ब्लॉक के रूप में देना होगा (मैं क्रॉस-ऑरिजनल रिक्वेस्ट के लिए अधिक आधुनिक और बेहतर समाधान भी शामिल करूंगा: HTTP हेडर्स के साथ कॉर्स):

JSONP:

1.client_jsonp.js

$.ajax({
    url: "http://api_test_server.proudlygeek.c9.io/?callback=?",
    dataType: "jsonp",
    success: function(data) {
        console.log(data);    
    }
});​​​​​​​​​​​​​​​​​​

2.server_jsonp.js

var http = require("http"),
    url  = require("url");

var server = http.createServer(function(req, res) {

    var callback = url.parse(req.url, true).query.callback || "myCallback";
    console.log(url.parse(req.url, true).query.callback);

    var data = {
        'name': "Gianpiero",
        'last': "Fiorelli",
        'age': 37
    };

    data = callback + '(' + JSON.stringify(data) + ');';

    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(data);
});

server.listen(process.env.PORT, process.env.IP);

console.log('Server running at '  + process.env.PORT + ':' + process.env.IP);

कोर :

3.client_cors.js

$.ajax({
    url: "http://api_test_server.proudlygeek.c9.io/",
    success: function(data) {
        console.log(data);    
    }
});​

4.server_cors.js

var http = require("http"),
    url  = require("url");

var server = http.createServer(function(req, res) {
    console.log(req.headers);

    var data = {
        'name': "Gianpiero",
        'last': "Fiorelli",
        'age': 37
    };

    res.writeHead(200, {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
    });

    res.end(JSON.stringify(data));
});

server.listen(process.env.PORT, process.env.IP);

console.log('Server running at '  + process.env.PORT + ':' + process.env.IP);

Answer 10

JSONP पैडिंग के साथ JSON के लिए खड़ा है ।

इस साइट को महान उदाहरणों के साथ, इस तकनीक के सबसे सरल उपयोग से स्पष्टीकरण के साथ विमान जावास्क्रिप्ट में सबसे अधिक उन्नत किया गया है:

w3schools.com / JSONP

ऊपर वर्णित मेरी एक और पसंदीदा तकनीक डायनेमिक JSON रिजल्ट है , जो URL पैरामीटर में JSON को PHP फ़ाइल में भेजने की अनुमति देता है , और PHP फ़ाइल को JSON ऑब्जेक्ट को उसके द्वारा प्राप्त जानकारी के आधार पर वापस करने की अनुमति देता है ।

JQuery जैसे उपकरणों में JSONP का उपयोग करने की सुविधा भी है :

jQuery.ajax({
  url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
  jsonp: "callbackName",
  dataType: "jsonp"
}).done(
  response => console.log(response)
);