আপনার ওয়েবসাইটকে "ক্রস-অরিজিন আইসোলেটেড" COOP এবং COEP ব্যবহার করে

COOP এবং COEP ব্যবহার করে একটি ক্রস-অরিজিন আইসোলেটেড এনভায়রনমেন্ট সেট আপ করুন এবং SharedArrayBuffer , performance.measureUserAgentSpecificMemory() ও হাই রেজোলিউশন টাইমারের মতো শক্তিশালী ফিচারগুলো আরও ভালো নির্ভুলতার সাথে সক্রিয় করুন।

ইজি কিতামুরা

আপডেট

  • ২১শে জুন, ২০২২ : ক্রস-অরিজিন আইসোলেশন সক্রিয় থাকলে ওয়ার্কার স্ক্রিপ্টগুলোর ক্ষেত্রেও সতর্কতা অবলম্বন করা প্রয়োজন। কিছু ব্যাখ্যা যোগ করা হয়েছে।
  • ৫ আগস্ট, ২০২১ : জেএস সেলফ-প্রোফাইলিং এপিআই-কে ক্রস-অরিজিন আইসোলেশন প্রয়োজন এমন এপিআইগুলোর মধ্যে একটি হিসেবে উল্লেখ করা হয়েছিল, কিন্তু সাম্প্রতিক নীতি পরিবর্তনের প্রতিফলন হিসেবে এটি সরিয়ে ফেলা হয়েছে।
  • ৬ মে, ২০২১ : প্রাপ্ত মতামত এবং জানানো সমস্যার উপর ভিত্তি করে আমরা ক্রোম এম৯২-এ নন-ক্রস-অরিজিন আইসোলেটেড সাইটগুলিতে SharedArrayBuffer ব্যবহারের সময়সীমা সীমাবদ্ধ করার সিদ্ধান্ত নিয়েছি।
  • ১৬ এপ্রিল, ২০২১ : ক্রস-অরিজিন আইসোলেশনের জন্য একটি শিথিল শর্ত হিসেবে নতুন COEP ক্রেডেনশিয়ালবিহীন মোড এবং COOP same-origin-allow-popups সম্পর্কে নোট যোগ করা হয়েছে।
  • ৫ মার্চ, ২০২১ : SharedArrayBuffer , performance.measureUserAgentSpecificMemory() , এবং ডিবাগিং কার্যকারিতার উপর থেকে সীমাবদ্ধতা সরানো হয়েছে, যা এখন Chrome 89-এ সম্পূর্ণরূপে সক্রিয়। performance.now() এবং performance.timeOrigin আসন্ন ক্ষমতাগুলো যোগ করা হয়েছে, যেগুলোর নির্ভুলতা আরও বেশি হবে।
  • ১৯ ফেব্রুয়ারি, ২০২১ : DevTools-এ allow="cross-origin-isolated" ফিচার পলিসি এবং ডিবাগিং কার্যকারিতা সম্পর্কে একটি নোট যোগ করা হয়েছে।
  • ১৫ অক্টোবর, ২০২০ : self.crossOriginIsolated ক্রোম ৮৭ থেকে উপলব্ধ। এর প্রতিফলন হিসেবে, যখন self.crossOriginIsolated true রিটার্ন করে, তখন document.domain অপরিবর্তনীয় থাকে। performance.measureUserAgentSpecificMemory() এর প্রাথমিক পরীক্ষা শেষ হচ্ছে এবং এটি ক্রোম ৮৯-এ ডিফল্টরূপে সক্রিয় করা হয়েছে। অ্যান্ড্রয়েড ক্রোমে `Shared Array Buffer` ক্রোম ৮৮ থেকে উপলব্ধ হবে।

কিছু ওয়েব এপিআই (API) স্পেক্টার (Spectre)-এর মতো সাইড-চ্যানেল অ্যাটাকের ঝুঁকি বাড়িয়ে দেয়। সেই ঝুঁকি কমাতে, ব্রাউজারগুলো ক্রস-অরিজিন আইসোলেটেড (cross-origin isolated) নামক একটি অপ্ট-ইন-ভিত্তিক বিচ্ছিন্ন পরিবেশ প্রদান করে। ক্রস-অরিজিন আইসোলেটেড অবস্থায়, ওয়েবপেজটি নিম্নলিখিত বিশেষাধিকারপ্রাপ্ত ফিচারগুলো ব্যবহার করতে সক্ষম হবে:

এপিআই বর্ণনা
SharedArrayBuffer ওয়েবঅ্যাসেম্বলি থ্রেডের জন্য এটি আবশ্যক। এটি অ্যান্ড্রয়েড ক্রোম ৮৮ থেকে পাওয়া যায়। ডেস্কটপ সংস্করণটি বর্তমানে সাইট আইসোলেশনের সাহায্যে ডিফল্টরূপে সক্রিয় থাকে, কিন্তু এর জন্য ক্রস-অরিজিন আইসোলেটেড স্টেট প্রয়োজন হবে এবং ক্রোম ৯২-এ এটি ডিফল্টরূপে নিষ্ক্রিয় হয়ে যাবে ।
performance.measureUserAgentSpecificMemory() ক্রোম ৮৯ থেকে উপলব্ধ।
performance.now() , performance.timeOrigin বর্তমানে অনেক ব্রাউজারে উপলব্ধ, তবে এর রেজোলিউশন ১০০ মাইক্রোসেকেন্ড বা তার বেশিতে সীমাবদ্ধ। ক্রস-অরিজিন আইসোলেশনের মাধ্যমে রেজোলিউশন ৫ মাইক্রোসেকেন্ড বা তার বেশি হতে পারে।
 যেসব ফিচার ক্রস-অরিজিন আইসোলেটেড স্টেটের পেছনে পাওয়া যাবে।

ক্রস-অরিজিন আইসোলেটেড স্টেট document.domain এর পরিবর্তনকেও বাধা দেয়। ( document.domain পরিবর্তন করতে পারার ফলে একই সাইটের ডকুমেন্টগুলোর মধ্যে যোগাযোগ সম্ভব হয় এবং এটিকে সেম-অরিজিন পলিসির একটি ত্রুটি হিসেবে বিবেচনা করা হয়েছে।)

ক্রস-অরিজিন আইসোলেটেড স্টেটে অপ্ট ইন করতে, আপনাকে মূল ডকুমেন্টে নিম্নলিখিত HTTP হেডারগুলি পাঠাতে হবে:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

এই হেডারগুলো ব্রাউজারকে এমন রিসোর্স বা আইফ্রেম লোড করা ব্লক করতে নির্দেশ দেয়, যেগুলো ক্রস-অরিজিন ডকুমেন্ট দ্বারা লোড হওয়ার জন্য সম্মতি দেয়নি, এবং ক্রস-অরিজিন উইন্ডোগুলোকে আপনার ডকুমেন্টের সাথে সরাসরি ইন্টারঅ্যাক্ট করা থেকে বিরত রাখে। এর মানে হলো, ক্রস-অরিজিনে লোড হওয়া রিসোর্সগুলোর জন্যও সম্মতি প্রয়োজন।

self.crossOriginIsolated পরীক্ষা করে আপনি নির্ধারণ করতে পারেন যে একটি ওয়েব পেজ ক্রস-অরিজিন আইসোলেটেড অবস্থায় আছে কিনা।

এই নিবন্ধে দেখানো হয়েছে কীভাবে এই নতুন হেডারগুলো ব্যবহার করতে হয়। আমি পরবর্তী একটি নিবন্ধে, ‘Why COOP/COEP’- এ, আরও বিস্তারিত প্রেক্ষাপট ও প্রসঙ্গ তুলে ধরব।


আপনার ওয়েবসাইটকে ক্রস-অরিজিন আইসোলেটেড করতে COOP এবং COEP প্রয়োগ করুন।

COOP এবং COEP একীভূত করুন

১. শীর্ষ-স্তরের ডকুমেন্টে Cross-Origin-Opener-Policy: same-origin হেডারটি সেট করুন।

একটি টপ-লেভেল ডকুমেন্টে COOP: same-origin সক্রিয় করার মাধ্যমে, একই অরিজিনের উইন্ডোগুলো এবং ডকুমেন্ট থেকে খোলা উইন্ডোগুলোর একটি পৃথক ব্রাউজিং কনটেক্সট গ্রুপ থাকবে, যদি না তারা একই COOP সেটিং সহ একই অরিজিনে থাকে। এর ফলে, খোলা উইন্ডোগুলোর জন্য আইসোলেশন নিশ্চিত করা হয় এবং উভয় উইন্ডোর মধ্যে পারস্পরিক যোগাযোগ নিষ্ক্রিয় হয়ে যায়।

একটি ব্রাউজিং কনটেক্সট গ্রুপ হলো এমন একগুচ্ছ উইন্ডো যা একে অপরকে রেফারেন্স করতে পারে। উদাহরণস্বরূপ, একটি টপ-লেভেল ডকুমেন্ট এবং <iframe> এর মাধ্যমে এমবেড করা তার চাইল্ড ডকুমেন্টগুলো। যদি একটি ওয়েবসাইট ( https://a.example ) একটি পপআপ উইন্ডো ( https://b.example ) খোলে, তাহলে ওপেনার উইন্ডো এবং পপআপ উইন্ডো একই ব্রাউজিং কনটেক্সট শেয়ার করে, ফলে তারা window.opener এর মতো DOM API-এর মাধ্যমে একে অপরকে অ্যাক্সেস করতে পারে।

একটি চিত্র যেখানে ব্যবহারকারী পেজের উপাদানগুলোর সাথে মিথস্ক্রিয়া করছেন এবং কন্টেন্ট গ্রুপ ব্রাউজ করা হচ্ছে।

আপনি DevTools থেকে যাচাই করে দেখতে পারেন যে উইন্ডো ওপেনার এবং ওপেনি আলাদা ব্রাউজিং কনটেক্সট গ্রুপে আছে কি না।

২. নিশ্চিত করুন যে রিসোর্সগুলিতে CORP বা CORS সক্রিয় করা আছে।

নিশ্চিত করুন যে পৃষ্ঠার সমস্ত রিসোর্স CORP বা CORS HTTP হেডার সহ লোড করা হয়েছে। চতুর্থ ধাপ, অর্থাৎ COEP সক্রিয় করার জন্য এই পদক্ষেপটি আবশ্যক।

সম্পদের প্রকৃতির উপর নির্ভর করে আপনাকে যা করতে হবে তা নিচে দেওয়া হলো:

  • যদি রিসোর্সটি শুধুমাত্র একই অরিজিন থেকে লোড হওয়ার কথা থাকে, Cross-Origin-Resource-Policy: same-origin হেডারটি সেট করুন।
  • যদি রিসোর্সটি শুধুমাত্র একই সাইট থেকে কিন্তু ক্রস অরিজিন থেকে লোড হওয়ার কথা থাকে, Cross-Origin-Resource-Policy: same-site হেডারটি সেট করুন।
  • যদি রিসোর্সটি আপনার নিয়ন্ত্রণাধীন একাধিক অরিজিন থেকে লোড করা হয়, তাহলে সম্ভব হলে Cross-Origin-Resource-Policy: cross-origin হেডারটি সেট করুন।
  • ক্রস-অরিজিন রিসোর্সগুলির জন্য যেগুলির উপর আপনার কোনো নিয়ন্ত্রণ নেই:
    • যদি রিসোর্সটি CORS সহ পরিবেশিত হয়, তাহলে লোডিং HTML ট্যাগে crossorigin অ্যাট্রিবিউটটি ব্যবহার করুন। (উদাহরণস্বরূপ, <img src="***" crossorigin> ।)
    • রিসোর্সটির মালিককে CORS অথবা CORP-এর যেকোনো একটিকে সমর্থন করতে বলুন।
  • আইফ্রেমের জন্য, উপরের নীতিগুলিই অনুসরণ করুন এবং Cross-Origin-Resource-Policy: cross-origin (অথবা প্রেক্ষাপট অনুযায়ী same-site , same-origin ) সেট করুন।
  • WebWorker দিয়ে লোড করা স্ক্রিপ্ট অবশ্যই same-origin থেকে পরিবেশন করতে হবে, তাই আপনার CORP বা CORS হেডারের প্রয়োজন নেই।
  • COEP: require-corp দিয়ে পরিবেশিত কোনো ডকুমেন্ট বা ওয়ার্কারের ক্ষেত্রে, CORS ছাড়া লোড হওয়া ক্রস-অরিজিন সাবরিসোর্সগুলোকে এমবেড হওয়ার জন্য অবশ্যই Cross-Origin-Resource-Policy: cross-origin হেডারটি সেট করতে হবে। উদাহরণস্বরূপ, এটি <script> , importScripts , <link> , <video> , <iframe> ইত্যাদির ক্ষেত্রে প্রযোজ্য।


৩. এমবেডেড রিসোর্স মূল্যায়ন করতে COEP রিপোর্ট-অনলি HTTP হেডার ব্যবহার করুন।

COEP সম্পূর্ণরূপে সক্রিয় করার আগে, পলিসিটি আসলেই কাজ করছে কিনা তা পরীক্ষা করার জন্য আপনি Cross-Origin-Embedder-Policy-Report-Only হেডারটি ব্যবহার করে একটি ড্রাই রান করতে পারেন। এর ফলে এমবেডেড কন্টেন্ট ব্লক না করেই আপনি রিপোর্ট পাবেন।

শীর্ষ-স্তরের ডকুমেন্ট, আইফ্রেম এবং ওয়ার্কার স্ক্রিপ্ট সহ সমস্ত ডকুমেন্টে এটি পুনরাবৃত্তিমূলকভাবে প্রয়োগ করুন। রিপোর্ট-অনলি HTTP হেডার সম্পর্কে তথ্যের জন্য, রিপোর্টিং এপিআই ব্যবহারে সমস্যাগুলি পর্যবেক্ষণ করুন দেখুন।

৪. COEP সক্ষম করুন

এই ধাপটির জন্য ধাপ ২, অর্থাৎ রিসোর্সগুলিতে CORP বা CORS সক্রিয় করা নিশ্চিত করা প্রয়োজন।

একবার আপনি নিশ্চিত হয়ে গেলে যে সবকিছু ঠিকঠাক কাজ করছে এবং সমস্ত রিসোর্স সফলভাবে লোড করা যাচ্ছে, তখন iframe এবং ওয়ার্কার স্ক্রিপ্টের মাধ্যমে এমবেড করা ডকুমেন্টগুলো সহ সমস্ত ডকুমেন্টের ক্ষেত্রে Cross-Origin-Embedder-Policy-Report-Only হেডারটিকে একই ভ্যালু সহ Cross-Origin-Embedder-Policy হেডারে পরিবর্তন করুন।



self.crossOriginIsolated ব্যবহার করে পৃথকীকরণ সফল হয়েছে কিনা তা নির্ধারণ করুন।

self.crossOriginIsolated প্রপার্টিটি true রিটার্ন করে যখন ওয়েব পেজটি একটি ক্রস-অরিজিন আইসোলেটেড অবস্থায় থাকে এবং সমস্ত রিসোর্স ও উইন্ডো একই ব্রাউজিং কনটেক্সট গ্রুপের মধ্যে আইসোলেটেড থাকে। আপনি ব্রাউজিং কনটেক্সট গ্রুপটিকে সফলভাবে আইসোলেট করেছেন কিনা এবং performance.measureUserAgentSpecificMemory() এর মতো শক্তিশালী ফিচারগুলিতে অ্যাক্সেস পেয়েছেন কিনা, তা নির্ধারণ করতে এই API-টি ব্যবহার করতে পারেন।

ক্রোম ডেভটুলস ব্যবহার করে ডিবাগ সমস্যা

যেসব রিসোর্স স্ক্রিনে রেন্ডার করা হয়, যেমন ছবি, সেগুলোর ক্ষেত্রে COEP সমস্যা শনাক্ত করা বেশ সহজ, কারণ অনুরোধটি ব্লক হয়ে যাবে এবং পেজটিতে একটি অনুপস্থিত ছবি দেখানো হবে। তবে, যেসব রিসোর্সের দৃশ্যমান কোনো প্রভাব নেই, যেমন স্ক্রিপ্ট বা স্টাইল, সেগুলোর ক্ষেত্রে COEP সমস্যা অলক্ষিত থেকে যেতে পারে। এগুলোর জন্য, DevTools Network প্যানেল ব্যবহার করুন। যদি COEP নিয়ে কোনো সমস্যা থাকে, তাহলে আপনি Status কলামে (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) দেখতে পাবেন।

নেটওয়ার্ক প্যানেলের স্ট্যাটাস কলামে COEP ইস্যুগুলো দেখা যায়।

এরপর আপনি আরও বিস্তারিত দেখতে এন্ট্রিটিতে ক্লিক করতে পারেন।

নেটওয়ার্ক প্যানেলে কোনো নেটওয়ার্ক রিসোর্সে ক্লিক করার পর হেডারস ট্যাবে COEP সমস্যার বিস্তারিত বিবরণ দেখা যায়।

আপনি অ্যাপ্লিকেশন প্যানেলের মাধ্যমে আইফ্রেম এবং পপআপ উইন্ডোগুলোর অবস্থাও জানতে পারবেন। বাম দিকের "ফ্রেম" বিভাগে যান এবং রিসোর্স কাঠামোর বিস্তারিত দেখতে "টপ" অংশটি প্রসারিত করুন।

আপনি আইফ্রেমের অবস্থা, যেমন SharedArrayBuffer এর প্রাপ্যতা ইত্যাদি পরীক্ষা করতে পারেন।

Chrome DevTools iframe পরিদর্শক

আপনি পপ-আপ উইন্ডোটির স্ট্যাটাসও পরীক্ষা করতে পারেন, যেমন এটি ক্রস-অরিজিন আইসোলেটেড কিনা।

ক্রোম ডেভটুলস পপআপ উইন্ডো ইন্সপেক্টর

রিপোর্টিং এপিআই ব্যবহার করে সমস্যাগুলো পর্যবেক্ষণ করুন।

রিপোর্টিং এপিআই হলো আরেকটি পদ্ধতি যার মাধ্যমে আপনি বিভিন্ন সমস্যা শনাক্ত করতে পারেন। যখনই COEP কোনো রিসোর্স লোড হতে বাধা দেয় অথবা COOP কোনো পপ-আপ উইন্ডোকে বিচ্ছিন্ন করে, তখন আপনার ব্যবহারকারীদের ব্রাউজারকে একটি রিপোর্ট পাঠানোর নির্দেশ দিতে আপনি রিপোর্টিং এপিআই কনফিগার করতে পারেন। ক্রোম তার ৬৯তম সংস্করণ থেকে COEP এবং COOP সহ বিভিন্ন ব্যবহারের জন্য রিপোর্টিং এপিআই সমর্থন করে আসছে।

রিপোর্টিং এপিআই কীভাবে কনফিগার করতে হয় এবং রিপোর্ট গ্রহণের জন্য সার্ভার কীভাবে সেট আপ করতে হয়, তা জানতে “রিপোর্টিং এপিআই ব্যবহার” (Using the Reporting API) অংশে যান।

COEP প্রতিবেদনের উদাহরণ

যখন ক্রস-অরিজিন রিসোর্স ব্লক করা হয়, তখন একটি উদাহরণ COEP রিপোর্ট পেলোড দেখতে এইরকম হয়:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

COOP প্রতিবেদনের উদাহরণ

যখন একটি পপ-আপ উইন্ডো বিচ্ছিন্নভাবে খোলা হয়, তখন একটি COOP রিপোর্টের পেলোডের উদাহরণ দেখতে এইরকম হয়:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

যখন বিভিন্ন ব্রাউজিং কনটেক্সট গ্রুপ একে অপরকে অ্যাক্সেস করার চেষ্টা করে (শুধুমাত্র 'রিপোর্ট-অনলি' মোডে), তখন COOP একটি রিপোর্টও পাঠায়। উদাহরণস্বরূপ, যখন postMessage() পাঠানোর চেষ্টা করা হয়, তখন একটি রিপোর্ট দেখতে এইরকম হবে:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

উপসংহার

একটি ওয়েব পেজকে একটি বিশেষ ক্রস-অরিজিন আইসোলেটেড অবস্থায় নিয়ে যাওয়ার জন্য COOP এবং COEP HTTP হেডারের একটি সংমিশ্রণ ব্যবহার করুন। কোনো ওয়েব পেজ ক্রস-অরিজিন আইসোলেটেড অবস্থায় আছে কিনা তা নির্ধারণ করতে আপনি self.crossOriginIsolated পরীক্ষা করতে পারবেন।

এই ক্রস-অরিজিন আইসোলেটেড স্টেটে নতুন ফিচার যুক্ত হলে এবং COOP ও COEP সম্পর্কিত ডেভটুলগুলিতে আরও উন্নতি সাধিত হলে আমরা এই পোস্টটি আপডেট করতে থাকব।

সম্পদ

পূর্ববর্তী
ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS)
পরবর্তী
শক্তিশালী বৈশিষ্ট্যের জন্য কেন আপনার "ক্রস-অরিজিন আইসোলেটেড" প্রয়োজন