JSONP: यह क्या है, क्यों बनाया गया और इसे CORS ने क्यों बदल दिया

JSONP: अतीत के फ्रंटएंड डेवलपर का गुप्त हथियार

कल्पना करें कि आप 2010 में एक वेब डेवलपर हैं। आपको किसी दूसरे सर्वर से डेटा प्राप्त करना है, जैसे मौसम का पूर्वानुमान या मुद्रा दर। आप एक सरल fetch अनुरोध लिखते हैं, लेकिन ब्राउज़र कंसोल में एक लाल त्रुटि दिखाई देती है: «No 'Access-Control-Allow-Origin' header is present»। परिचित लगता है?

यह Same-Origin Policy (समान मूल नीति) आपके JavaScript को आपके अपने डोमेन से बाहर जाने से रोक रही है। लेकिन फिर मौसम विजेट, «शेयर» बटन और विज़िट काउंटर कैसे काम करते थे? इसका उत्तर सरल है: वे JSONP का उपयोग करते थे - एक चालाक ट्रिक, जिसके बारे में हम आज बात करेंगे।

इस लेख में, हम Stack Overflow के एक लोकप्रिय प्रश्न का उत्तर देंगे: «What is JSONP, and why was it created?» - सरल भाषा में, कोड उदाहरणों के साथ और अनावश्यक सिद्धांत के बिना।

1. समस्या: ब्राउज़र अनुरोधों को क्यों ब्लॉक करता है?

ब्राउज़र एक पैरानॉयड है। यह उपयोगकर्ता को XSS हमलों और डेटा चोरी से बचाता है। Same-Origin Policy JavaScript को केवल उसी डोमेन, प्रोटोकॉल और पोर्ट से प्रतिक्रियाएँ पढ़ने की अनुमति देता है।

ब्लॉकिंग का उदाहरण:

// यह कोड CORS त्रुटि उत्पन्न करेगा\nfetch('https://api.distant-server.com/data')\n  .then(response => response.json())\n  .then(data => console.log(data));

लेकिन एक अपवाद है: <script> टैग। ब्राउज़र किसी भी डोमेन से स्क्रिप्ट को आसानी से लोड करता है! JSONP इसी खामी का उपयोग करता है।

2. समाधान: JSONP — पैडिंग के साथ JSON

JSONP (JSON with Padding) कोई तकनीक या डेटा प्रारूप नहीं है, बल्कि एक पैटर्न (अस्थायी समाधान) है जो <script> टैग के माध्यम से Same-Origin Policy को बायपास करता है।

विचार सरल है: XMLHttpRequest के माध्यम से अनुरोध करने के बजाय, हम गतिशील रूप से एक <script> एलिमेंट बनाते हैं, सर्वर का URL निर्दिष्ट करते हैं, और सर्वर JSON नहीं, बल्कि JavaScript कोड लौटाता है, जो डेटा के साथ हमारे फ़ंक्शन को कॉल करता है।

सामान्य JSON कैसा दिखता है:

// सर्वर का उत्तर (सामान्य JSON)\n{"name": "PythonLib", "topic": "JSONP"}

JSONP कैसा दिखता है:

// सर्वर का उत्तर (JSONP)\nmyCallback({"name": "PythonLib", "topic": "JSONP"});

अंतर बहुत बड़ा है: दूसरे मामले में, सर्वर डेटा को myCallback फ़ंक्शन कॉल में लपेटता है। यही वह padding (आवरण) है।

3. व्यवहार: स्वयं JSONP अनुरोध लिखना

आइए शुद्ध JavaScript में एक JSONP क्लाइंट लागू करें। इससे जादू को समझने में मदद मिलेगी।

function jsonp(url, callbackName) {\n  // 1. एक ग्लोबल फ़ंक्शन (कॉलबैक) बनाएँ\n  window[callbackName] = function(data) {\n    console.log('डेटा प्राप्त हुआ:', data);\n    delete window[callbackName]; // अपने बाद साफ करें\n    document.body.removeChild(script);\n  };\n\n  // 2. एक script टैग बनाएँ\n  const script = document.createElement('script');\n  script.src = `${url}?callback=${callbackName}`; // कॉलबैक का नाम पास करें\n  script.onerror = function() {\n    console.error('JSONP लोड करने में त्रुटि');\n    delete window[callbackName];\n    document.body.removeChild(script);\n  };\n\n  // 3. DOM में जोड़ें — ब्राउज़र तुरंत स्क्रिप्ट लोड और निष्पादित करता है\n  document.body.appendChild(script);\n}\n\n// उपयोग करें:\njsonp('https://api.example.com/data', 'handleData');

यह चरणों में कैसे काम करता है:

\n
• हम एक ग्लोबल फ़ंक्शन handleData बनाते हैं।
\n
• हम सर्वर URL के साथ एक <script> टैग जोड़ते हैं। URL में हम पैरामीटर ?callback=handleData पास करते हैं।
\n
• JSONP का समर्थन करने वाला सर्वर callback पैरामीटर देखता है और JSON नहीं, बल्कि JavaScript लौटाता है: handleData({...})।
\n
• ब्राउज़र इस स्क्रिप्ट को निष्पादित करता है, हमारा फ़ंक्शन कॉल होता है, और हमें डेटा प्राप्त होता है।
\n

4. JSONP बुरा क्यों है? (कमियाँ)

यदि आपने सोचा: «बढ़िया, मैं हर जगह इसका उपयोग करूँगा»