নিরাপদে ক্রস-অরিজিন রিসোর্স শেয়ার করুন
ব্রাউজারের একই-অরিজিন নীতি অন্য উৎস থেকে রিসোর্স পড়তে বাধা দেয়। এই প্রক্রিয়াটি দূষিত সাইটগুলিকে অন্যান্য সাইটের ডেটা পড়তে বাধা দেয়, তবে এটি বৈধ ব্যবহারও বাধা দেয়।
আধুনিক ওয়েব অ্যাপ্লিকেশানগুলি প্রায়শই একটি ভিন্ন উত্স থেকে সংস্থান পেতে চায়, উদাহরণস্বরূপ, একটি ভিন্ন ডোমেন থেকে 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 কিভাবে কাজ করে?
একই-অরিজিন নীতি ব্রাউজারকে ক্রস-অরিজিন অনুরোধগুলি ব্লক করতে বলে। যখন আপনি একটি ভিন্ন উত্স থেকে একটি পাবলিক সংস্থান প্রয়োজন, সম্পদ প্রদানকারী সার্ভার ব্রাউজারকে বলে যে অনুরোধ পাঠানোর উত্স তার সংস্থান অ্যাক্সেস করতে পারে৷ ব্রাউজার এটি মনে রাখে এবং সেই সংস্থানটির জন্য ক্রস-অরিজিন রিসোর্স শেয়ারিংয়ের অনুমতি দেয়।
ধাপ 1: ক্লায়েন্ট (ব্রাউজার) অনুরোধ
যখন ব্রাউজার একটি ক্রস-অরিজিন অনুরোধ করে, তখন ব্রাউজার বর্তমান মূল (স্কিম, হোস্ট এবং পোর্ট) সহ একটি Origin হেডার যোগ করে।
ধাপ 2: সার্ভার প্রতিক্রিয়া
যখন একটি সার্ভার এই শিরোনামটি দেখে, এবং অ্যাক্সেসের অনুমতি দিতে চায়, তখন এটি একটি Access-Control-Allow-Origin হেডার যোগ করে যা অনুরোধের উত্স নির্দিষ্ট করে (বা * যেকোন উত্সকে অনুমতি দিতে)।
ধাপ 3: ব্রাউজার প্রতিক্রিয়া পায়
ব্রাউজার যখন একটি উপযুক্ত 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ছাড়া অন্য শিরোনাম অন্তর্ভুক্ত থাকে। -
application/x-www-form-urlencoded,multipart/form-data, বাtext/plainব্যতীত একটিContent-Typeশিরোনাম আছে এমন একটি অনুরোধ৷
ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে প্রয়োজনীয় প্রিফ্লাইট অনুরোধ তৈরি করে এবং প্রকৃত অনুরোধ বার্তার আগে সেগুলি পাঠায়। প্রিফ্লাইট অনুরোধটি নিম্নলিখিত উদাহরণের মতো একটি 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 হেডারও অন্তর্ভুক্ত থাকতে পারে যাতে প্রিফ্লাইট ফলাফল ক্যাশে করার সময়কাল সেকেন্ডে নির্দিষ্ট করা যায়। এটি ক্লায়েন্টকে প্রিফ্লাইট অনুরোধের পুনরাবৃত্তি না করে একাধিক জটিল অনুরোধ পাঠাতে দেয়।