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

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

ইজি কিতামুরা

প্রকাশিত: ১৩ এপ্রিল, ২০২০, সর্বশেষ হালনাগাদ: ২১ জুন, ২০২২

এই ডকুমেন্টটিতে দেখানো হয়েছে কীভাবে এই COOP এবং COEP ব্যবহার করতে হয়। কেন এটি গুরুত্বপূর্ণ, সে সম্পর্কে আপনি "COOP এবং COEP ব্যবহার করে আপনার ওয়েবসাইটকে 'ক্রস-অরিজিন আইসোলেটেড' করুন" লেখাটিতে আরও পড়তে পারেন।

কিছু ওয়েব এপিআই (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 পরীক্ষা করে আপনি নির্ধারণ করতে পারেন যে একটি ওয়েব পেজ ক্রস-অরিজিন আইসোলেটেড অবস্থায় আছে কিনা।

শব্দকোষ

এই নথিতে একই রকম নামের ও সংক্ষিপ্ত অনেক পরিভাষা ব্যবহার করা হয়েছে। বিষয়টি স্পষ্ট করার জন্য, আমরা একটি সংক্ষিপ্ত শব্দকোষ তৈরি করেছি:

আপনার ওয়েবসাইটকে ক্রস-অরিজিন আইসোলেটেড করুন

১. শীর্ষ-স্তরের ডকুমেন্টে 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> ইত্যাদির ক্ষেত্রে প্রযোজ্য।

আইফ্রেমে বিচ্ছিন্নতা

একটি আইফ্রেমের মধ্যে এমবেড করা ডকুমেন্টে ক্রস-অরিজিন আইসোলেশন সক্রিয় করতে, আপনাকে <iframe> ট্যাগে allow="cross-origin-isolated" পারমিশন পলিসি প্রয়োগ করতে হবে এবং এই শর্তগুলো পূরণ করতে হবে। প্যারেন্ট ফ্রেম এবং চাইল্ড ফ্রেম সহ ডকুমেন্টগুলোর সম্পূর্ণ চেইনকেও অবশ্যই ক্রস-অরিজিন আইসোলেটেড হতে হবে।

৩. এমবেডেড রিসোর্স মূল্যায়ন করতে 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 প্রপার্টিটি true রিটার্ন করে যখন ওয়েব পেজটি একটি ক্রস-অরিজিন আইসোলেটেড অবস্থায় থাকে এবং সমস্ত রিসোর্স ও উইন্ডো একই ব্রাউজিং কনটেক্সট গ্রুপের মধ্যে আইসোলেটেড থাকে। আপনি ব্রাউজিং কনটেক্সট গ্রুপটিকে সফলভাবে আইসোলেট করেছেন কিনা এবং performance.measureUserAgentSpecificMemory() এর মতো ফিচারগুলিতে অ্যাক্সেস পেয়েছেন কিনা, তা নির্ধারণ করতে এই API-টি ব্যবহার করতে পারেন।

ডিবাগ সমস্যা

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

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

যেসব রিসোর্স স্ক্রিনে রেন্ডার করা হয়, যেমন ছবি, সেগুলোর ক্ষেত্রে COEP সমস্যা শনাক্ত করা বেশ সহজ, কারণ অনুরোধটি ব্লক হয়ে যায় এবং পেজটিতে একটি অনুপস্থিত ছবির ইঙ্গিত দেওয়া উচিত। তবে, যেসব রিসোর্সের সরাসরি কোনো দৃশ্যমান প্রভাব নেই, যেমন স্ক্রিপ্ট বা স্টাইল, সেগুলোর ক্ষেত্রে COEP সমস্যা অলক্ষিত থেকে যেতে পারে। সেগুলোর জন্য, DevTools Network প্যানেল ব্যবহার করুন।

COEP-তে কোনো সমস্যা থাকলে, আপনি Status কলামে (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) দেখতে পাবেন।

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

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

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

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

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

Chrome DevTools iframe পরিদর্শক।

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

ক্রোম ডেভটুলস ডায়ালগ উইন্ডো ইন্সপেক্টর

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

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

রিপোর্টিং এপিআই কীভাবে কনফিগার করতে হয় এবং রিপোর্ট গ্রহণের জন্য সার্ভার কীভাবে সেট আপ করতে হয়, তা শিখুন।

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 সম্পর্কিত ডেভটুলগুলিতে আরও উন্নতি সাধিত হলে আমরা এই পোস্টটি আপডেট করতে থাকব ।

সম্পদ

নথি আপডেট

  • ২১শে জুন, ২০২২ : ক্রস-অরিজিন আইসোলেশন সক্রিয় থাকলে ওয়ার্কার স্ক্রিপ্টগুলোর ক্ষেত্রেও সতর্কতা অবলম্বন করা প্রয়োজন। কিছু ব্যাখ্যা যোগ করা হয়েছে।
  • ৫ আগস্ট, ২০২১ : জেএস সেলফ-প্রোফাইলিং এপিআই-কে ক্রস-অরিজিন আইসোলেশন প্রয়োজন এমন এপিআইগুলোর মধ্যে একটি হিসেবে উল্লেখ করা হয়েছিল, কিন্তু সাম্প্রতিক নীতি পরিবর্তনের প্রতিফলন হিসেবে এটি সরিয়ে ফেলা হয়েছে।
  • ৬ মে, ২০২১ : প্রাপ্ত মতামত এবং জানানো সমস্যার উপর ভিত্তি করে আমরা ক্রোম এম৯২-এ নন-ক্রস-অরিজিন আইসোলেটেড সাইটগুলিতে SharedArrayBuffer ব্যবহারের সময়সীমা সীমাবদ্ধ করার সিদ্ধান্ত নিয়েছি।
  • ১৬ এপ্রিল, ২০২১ : ক্রস-অরিজিন আইসোলেশনের জন্য একটি শিথিল শর্ত হিসেবে COEP ক্রেডেনশিয়াললেস মোড এবং COOP সেম-অরিজিন-অ্যালাউ-পপআপস সম্পর্কে নোট যোগ করা হয়েছে।
  • ৫ মার্চ, ২০২১ : 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` ক্রোম ৮৮ থেকে উপলব্ধ হবে।
পূর্ববর্তী
ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS)
পরবর্তী
শক্তিশালী বৈশিষ্ট্যের জন্য কেন আপনার "ক্রস-অরিজিন আইসোলেটেড" প্রয়োজন