JSONP (JSON with Padding) একটি পুরোনো, কিন্তু জনপ্রিয় কৌশল যা ব্যবহার করা হয় cross-domain (অথবা cross-origin) রিকোয়েস্ট সম্পাদন করতে, বিশেষ করে যখন ওয়েব ব্রাউজারে same-origin policy (সেইম-অরিজিন পলিসি) অ্যাপ্লিকেশন এবং API এ বিভিন্ন ডোমেইন থেকে ডেটা ফেচ করা হয়।
JSONP কী?
JSONP একটি প্রযুক্তি যা মূলত JavaScript এর মাধ্যমে JSON ডেটা লোড করতে ব্যবহৃত হয়, যেখানে JSON ডেটা একটি callback ফাংশন হিসেবে রেন্ডার করা হয়। JSONP ব্রাউজারের সিকিউরিটি সীমাবদ্ধতা (যেমন: CORS) বাইপাস করতে সাহায্য করে, যা মূলত এক ডোমেইন থেকে অন্য ডোমেইনে ডেটা রিকোয়েস্টের ক্ষেত্রে নিষেধাজ্ঞা আরোপ করে।
JSONP এর কাজ করার পদ্ধতি
এটি মূলত একটি script tag ব্যবহার করে কাজ করে। যখন একটি script ট্যাগকে অন্য ডোমেইনে প্রেরণ করা হয়, তখন same-origin policy ব্রাউজার কর্তৃক বাধাগ্রস্ত হয় না, কারণ script ট্যাগটি ক্রস-ডোমেইনে কাজ করতে সক্ষম।
JSONP এর সাধারণ পদ্ধতি
- Client-Side: ক্লায়েন্ট একটি callback function প্রেরণ করে, যা JSON ডেটাকে প্রসেস করবে। এরপর, ব্রাউজার একটি
scriptট্যাগ তৈরি করে এবং অন্য ডোমেইনের API URL এ রিকোয়েস্ট পাঠায়। - Server-Side: সার্ভার JSON ডেটা রেসপন্স দেয়, তবে এটি ডেটাকে callback function-এর ভিতরে ইনক্লুড করে। অর্থাৎ, JSON ডেটা একটি ফাংশন কলের অংশ হিসেবে রিটার্ন করা হয়।
JSONP এর উদাহরণ
1. Client-Side: JSONP রিকোয়েস্ট করা
ধরা যাক, একটি ওয়েব অ্যাপ্লিকেশন অন্য একটি ডোমেইন থেকে ডেটা ফেচ করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<h2>JSONP Example</h2>
<script>
// Callback ফাংশন যা JSON ডেটা প্রক্রিয়া করবে
function handleResponse(data) {
console.log('Received data:', data);
document.body.innerHTML += `<p>Name: ${data.name}, Age: ${data.age}</p>`;
}
// JSONP রিকোয়েস্ট তৈরি করা (একটি সিক্রেট API থেকে ডেটা ফেচ করা)
var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse'; // API URL যেখানে JSONP সমর্থিত
document.head.appendChild(script);
</script>
</body>
</html>
ব্যাখ্যা:
- handleResponse: এটি একটি callback function যা JSON ডেটা গ্রহণ করবে এবং সেটিকে প্রসেস করবে।
- script.src: এখানে
callback=handleResponseযোগ করা হয়েছে, যা সার্ভারকে নির্দেশ দেয় যে, JSON ডেটা handleResponse ফাংশনের ভিতরে প্যাক করা হবে। - ব্রাউজার এই script ট্যাগটি লোড করবে এবং
https://api.example.com/dataথেকে JSONP রিকোয়েস্ট পাঠাবে।
2. Server-Side: JSONP রেসপন্স প্রদান
এটি কিভাবে সার্ভার সাইডে প্রক্রিয়া করা হবে, তার একটি উদাহরণ। নিচের কোডটি একটি সার্ভারের JavaScript API এর অংশ।
// Server-side (Node.js example)
// Express.js ব্যবহার করা হচ্ছে
const express = require('express');
const app = express();
app.get('/data', (req, res) => {
// Callback ফাংশন নামটি URL থেকে পাওয়া হচ্ছে
const callback = req.query.callback;
// JSON ডেটা যা আমরা ক্লায়েন্টে পাঠাতে চাই
const data = {
name: "John Doe",
age: 30
};
// JSONP রেসপন্স পাঠানো
res.type('text/javascript');
res.send(`${callback}(${JSON.stringify(data)})`);
});
app.listen(3000, () => {
console.log("Server is running on port 3000");
});
ব্যাখ্যা:
- সার্ভার থেকে callback নামক প্যারামিটারটি URL থেকে গ্রহণ করা হচ্ছে, যা ক্লায়েন্টের কাছে পাঠানো হবে।
- JSON ডেটা একটি callback ফাংশনের ভিতরে প্যাক করা হচ্ছে, যাতে এটি ক্লায়েন্টে JSONP হিসেবে রিটার্ন করা যায়।
JSONP ব্যবহার করার সুবিধা
- Cross-Domain রিকোয়েস্টে সক্ষমতা: JSONP ব্রাউজারের same-origin policy লঙ্ঘন করে, তাই এটি অন্যান্য ডোমেইন থেকে ডেটা ফেচ করতে সক্ষম।
- সাধারণ এবং সহজ ব্যবহৃত কৌশল: ব্রাউজার সিকিউরিটি সীমাবদ্ধতা ছাড়াই এটি সহজে ডেটা এক্সচেঞ্জের জন্য ব্যবহৃত হতে পারে।
JSONP এর সীমাবদ্ধতা
- Security Risk: JSONP কৌশলটি নিরাপত্তার জন্য হুমকিস্বরূপ হতে পারে, কারণ এটি বাইরের ডোমেইনের স্ক্রিপ্ট চলানোর অনুমতি দেয়। এটি Cross-site Scripting (XSS) আক্রমণের জন্য ঝুঁকিপূর্ণ।
- Limited to GET Requests: JSONP শুধুমাত্র GET রিকোয়েস্ট সমর্থন করে, তাই পছন্দের POST, PUT ইত্যাদি HTTP মেথডগুলো ব্যবহার করা সম্ভব নয়।
- Callback Function: JSONP রেসপন্সে একটি callback function প্রয়োজন, যা কখনও কখনও ডিবাগিং বা মেইনটেনেন্সে জটিলতা সৃষ্টি করতে পারে।
JSONP এর বিকল্প: CORS
বর্তমানে, Cross-Origin Resource Sharing (CORS) একটি নিরাপদ বিকল্প হিসাবে ব্যবহৃত হয়, যা JSONP এর মতো কাজ করে, তবে এটি নিরাপদ এবং আরও বেশি কনফিগারেবল। CORS ব্যবহারের মাধ্যমে সার্ভারগুলি স্পেসিফিক রিকোয়েস্টের জন্য অনুমোদিত ডোমেইন সমর্থন করতে পারে।
সারাংশ
JSONP (JSON with Padding) হলো একটি প্রাচীন কৌশল, যা cross-domain requests সমর্থন করার জন্য ব্যবহৃত হয়। এটি সার্ভারের JSON রেসপন্সকে একটি callback function এর মাধ্যমে প্যাক করে ব্রাউজারের মাধ্যমে অন্য ডোমেইন থেকে ডেটা ফেচ করার সুযোগ দেয়। যদিও এটি কার্যকরী, তবে JSONP নিরাপত্তার জন্য ঝুঁকিপূর্ণ হতে পারে এবং এটি কেবল GET রিকোয়েস্ট সমর্থন করে। আজকাল CORS একটি নিরাপদ বিকল্প হিসেবে ব্যবহৃত হয়।
