বিভিন্ন উৎস থেকে প্রাপ্ত সম্পদ নিরাপদে শেয়ার করুন
ব্রাউজারের সেম-অরিজিন পলিসি ভিন্ন অরিজিন থেকে কোনো রিসোর্স পড়া ব্লক করে। এই ব্যবস্থাটি ক্ষতিকারক সাইটগুলোকে অন্য সাইটের ডেটা পড়া থেকে বিরত রাখে, কিন্তু এটি বৈধ ব্যবহারকেও বাধা দেয়।
আধুনিক ওয়েব অ্যাপগুলো প্রায়শই ভিন্ন কোনো অরিজিন থেকে রিসোর্স নিতে চায়, যেমন—অন্য কোনো ডোমেইন থেকে JSON ডেটা সংগ্রহ করা বা অন্য কোনো সাইট থেকে <canvas> এলিমেন্টে ছবি লোড করা। এগুলো পাবলিক রিসোর্স হতে পারে যা সকলের পড়ার জন্য উন্মুক্ত থাকা উচিত, কিন্তু সেম-অরিজিন পলিসি এগুলোর ব্যবহারে বাধা দেয়। ডেভেলপাররা ঐতিহাসিকভাবে JSONP-এর মতো বিকল্প পদ্ধতি ব্যবহার করে এসেছেন।
ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) এই সমস্যাটি একটি প্রমিত উপায়ে সমাধান করে। CORS সক্রিয় করলে সার্ভার ব্রাউজারকে একটি অতিরিক্ত অরিজিন ব্যবহারের অনুমতি দিতে পারে।
ওয়েবে রিসোর্স রিকোয়েস্ট কীভাবে কাজ করে?
একটি ব্রাউজার এবং একটি সার্ভার হাইপারটেক্সট ট্রান্সফার প্রোটোকল (HTTP) ব্যবহার করে নেটওয়ার্কের মাধ্যমে ডেটা আদান-প্রদান করতে পারে। HTTP অনুরোধকারী এবং উত্তরদাতার মধ্যে যোগাযোগের নিয়মাবলী নির্ধারণ করে, যার মধ্যে কোনো রিসোর্স পেতে কী কী তথ্যের প্রয়োজন হবে, সেটাও অন্তর্ভুক্ত থাকে।
HTTP হেডার ক্লায়েন্ট এবং সার্ভারের মধ্যে বার্তা আদান-প্রদান নিয়ন্ত্রণ করে এবং অ্যাক্সেস নির্ধারণ করতে ব্যবহৃত হয়। ব্রাউজারের অনুরোধ এবং সার্ভারের প্রতিক্রিয়া বার্তা উভয়ই একটি হেডার এবং একটি বডিতে বিভক্ত থাকে।
হেডার
বার্তা সম্পর্কিত তথ্য, যেমন বার্তার ধরন বা বার্তার এনকোডিং। একটি হেডারে কী-ভ্যালু পেয়ার হিসেবে প্রকাশিত বিভিন্ন ধরনের তথ্য অন্তর্ভুক্ত থাকতে পারে। রিকোয়েস্ট হেডার এবং রেসপন্স হেডারে ভিন্ন ভিন্ন তথ্য থাকে।
নমুনা অনুরোধ হেডার
Accept: text/html
Cookie: Version=1
এই হেডারটির অর্থ হলো, "আমি উত্তরে HTML পেতে চাই। এই যে আমার কাছে একটি কুকি আছে।"
নমুনা প্রতিক্রিয়া হেডার
Content-Encoding: gzip
Cache-Control: no-store
এই হেডারটির অর্থ হলো: "এই রেসপন্সের ডেটা gzip দিয়ে এনকোড করা হয়েছে। এটি ক্যাশ করবেন না।"
শরীর
বার্তাটি নিজেই। এটি সাধারণ টেক্সট, একটি ইমেজ বাইনারি, JSON, HTML বা অন্য অনেক ফরম্যাট হতে পারে।
CORS কীভাবে কাজ করে?
সেম-অরিজিন পলিসি ব্রাউজারকে ক্রস-অরিজিন রিকোয়েস্ট ব্লক করতে বলে। যখন আপনার ভিন্ন কোনো অরিজিন থেকে একটি পাবলিক রিসোর্সের প্রয়োজন হয়, তখন রিসোর্স প্রদানকারী সার্ভার ব্রাউজারকে জানিয়ে দেয় যে, অনুরোধকারী অরিজিনটি তার রিসোর্সটি অ্যাক্সেস করতে পারবে। ব্রাউজার বিষয়টি মনে রাখে এবং সেই রিসোর্সটির জন্য ক্রস-অরিজিন রিসোর্স শেয়ারিংয়ের অনুমতি দেয়।
ধাপ ১: ক্লায়েন্ট (ব্রাউজার) অনুরোধ
যখন ব্রাউজার একটি ক্রস-অরিজিন অনুরোধ করে, তখন এটি বর্তমান অরিজিন (স্কিম, হোস্ট এবং পোর্ট) সহ একটি Origin হেডার যুক্ত করে।
ধাপ ২: সার্ভারের প্রতিক্রিয়া
যখন কোনো সার্ভার এই হেডারটি দেখে এবং অ্যাক্সেস দিতে চায়, তখন এটি রেসপন্সে একটি Access-Control-Allow-Origin হেডার যোগ করে, যেখানে অনুরোধকারী অরিজিন নির্দিষ্ট করা থাকে (অথবা যেকোনো অরিজিনকে অনুমতি দেওয়ার জন্য * ব্যবহার করা হয়)।
ধাপ ৩: ব্রাউজার প্রতিক্রিয়া গ্রহণ করে
যখন ব্রাউজারটি একটি উপযুক্ত Access-Control-Allow-Origin হেডার সহ এই প্রতিক্রিয়াটি দেখতে পায়, তখন এটি ক্লায়েন্ট সাইটের সাথে প্রতিক্রিয়ার ডেটা শেয়ার করে।
CORS-এর সাথে পরিচয়পত্র শেয়ার করুন
গোপনীয়তার কারণে, CORS সাধারণত বেনামী অনুরোধের জন্য ব্যবহৃত হয়, যেখানে অনুরোধকারীকে শনাক্ত করা যায় না। আপনি যদি CORS ব্যবহার করার সময় কুকি পাঠাতে চান, যা প্রেরককে শনাক্ত করতে পারে, তাহলে আপনাকে অনুরোধ এবং প্রতিক্রিয়ায় অতিরিক্ত হেডার যোগ করতে হবে।
অনুরোধ
নিম্নলিখিত উদাহরণের মতো করে ফেচ অপশনগুলিতে credentials: 'include' যোগ করুন। এটি অনুরোধের সাথে কুকিটিকে নিম্নরূপে অন্তর্ভুক্ত করে:
fetch('https://example.com', {
mode: 'cors',
credentials: 'include'
})
প্রতিক্রিয়া
Access-Control-Allow-Origin অবশ্যই একটি নির্দিষ্ট অরিজিনে সেট করতে হবে (ওয়াইল্ডকার্ড হিসেবে * ব্যবহার করা যাবে না) এবং Access-Control-Allow-Credentials অবশ্যই true তে সেট করতে হবে।
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
জটিল HTTP কলের জন্য প্রিফ্লাইট অনুরোধ
যখন কোনো ওয়েব অ্যাপ একটি জটিল HTTP অনুরোধ করে, তখন ব্রাউজার অনুরোধ শৃঙ্খলের শুরুতে একটি প্রিফ্লাইট অনুরোধ যোগ করে।
CORS স্পেসিফিকেশন একটি জটিল অনুরোধকে নিম্নরূপে সংজ্ঞায়িত করে:
- এমন অনুরোধ যা GET, POST বা HEAD ছাড়া অন্য পদ্ধতি ব্যবহার করে।
- এমন একটি অনুরোধ যাতে
Accept,Accept-LanguageবাContent-Languageছাড়া অন্য কোনো হেডার অন্তর্ভুক্ত থাকে। - এমন একটি অনুরোধ যার
Content-Typeহেডারটিapplication/x-www-form-urlencoded,multipart/form-data, বাtext/plainছাড়া অন্য কিছু।
ব্রাউজারগুলো স্বয়ংক্রিয়ভাবে প্রয়োজনীয় প্রিফ্লাইট রিকোয়েস্ট তৈরি করে এবং মূল রিকোয়েস্ট মেসেজ পাঠানোর আগে সেগুলো পাঠিয়ে দেয়। প্রিফ্লাইট রিকোয়েস্টটি হলো একটি OPTIONS রিকোয়েস্ট, যেমনটি নিচের উদাহরণে দেখানো হয়েছে:
OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: DELETE
সার্ভার প্রান্তে, অনুরোধ গ্রহণকারী অ্যাপটি এই অরিজিন থেকে যে মেথডগুলো গ্রহণ করে, সেই সম্পর্কিত তথ্য দিয়ে প্রিফ্লাইট অনুরোধের জবাব দেয়:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS
সার্ভারের প্রতিক্রিয়ায় একটি Access-Control-Max-Age হেডারও অন্তর্ভুক্ত থাকতে পারে, যা প্রিফ্লাইট ফলাফল ক্যাশ করার সময়কাল সেকেন্ডে নির্দিষ্ট করে। এর ফলে ক্লায়েন্ট প্রিফ্লাইট অনুরোধটি পুনরাবৃত্তি না করেই একাধিক জটিল অনুরোধ পাঠাতে পারে।