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

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

Eiji Kitamura

প্রকাশিত: ১৩ এপ্রিল, ২০২০, শেষবার আপডেট করা হয়েছে: ২১ জুন, ২০২২

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

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

API বিবরণ
SharedArrayBuffer WebAssembly থ্রেডের জন্য প্রয়োজন। এটি Android Chrome 88 থেকে উপলভ্য। সাইট আইসোলেশন-এর সাহায্যে ডেস্কটপ ভার্সন ডিফল্ট হিসেবে চালু করা থাকে, তবে ক্রস-অরিজিন আইসোলেটেড স্টেট প্রয়োজন হবে এবং Chrome 92-এ ডিফল্ট হিসেবে বন্ধ করা থাকবে।
performance.measureUserAgentSpecificMemory() Chrome 89 থেকে উপলভ্য।
performance.now(), performance.timeOrigin অনেক ব্রাউজারে উপলভ্য, যার রেজোলিউশন ১০০ মাইক্রোসেকেন্ড বা তার বেশি পর্যন্ত সীমিত। ক্রস-অরিজিন আইসোলেশনের মাধ্যমে, রেজোলিউশন ৫ মাইক্রোসেকেন্ড বা তার বেশি হতে পারে।
ক্রস-অরিজিন আইসোলেটেড স্টেটের পিছনে যেসব ফিচার উপলভ্য হবে।

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

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

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

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

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

iframe-এ আইসোলেশন

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

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

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

টপ-লেভেল ডকুমেন্ট, iframe ও ওয়ার্কার স্ক্রিপ্ট সহ সব ডকুমেন্টে এটি রিকার্সিভভাবে প্রয়োগ করুন। শুধুমাত্র রিপোর্ট করা HTTP হেডার সম্পর্কে তথ্যের জন্য, Reporting API ব্যবহার করে সমস্যাগুলি পর্যবেক্ষণ করুন দেখুন।

৪. COEP চালু করুন

আপনি রিসোর্সে CORP বা CORS চালু আছে কিনা তা নিশ্চিত করার পরেই এই ধাপটি সম্পূর্ণ করতে পারবেন।

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

আইসোলেশন সফল হয়েছে কিনা তা নির্ধারণ করুন

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

সমস্যা সমাধান করা

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

Chrome DevTools-এর মাধ্যমে ডিবাগ করুন

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

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

নেটওয়ার্ক প্যানেলের স্ট্যাটাস কলামে COEP সংক্রান্ত সমস্যা।

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

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

এছাড়াও, আপনি অ্যাপ্লিকেশন প্যানেলের মাধ্যমে iframe ও ডায়ালগ উইন্ডোর স্ট্যাটাস নির্ধারণ করতে পারবেন। বাঁদিকে "ফ্রেম" বিভাগে যান এবং রিসোর্স স্ট্রাকচারের ব্রেকডাউন দেখতে "শীর্ষ" বিকল্পটি বড় করুন।

আপনি iframe-এর স্ট্যাটাস চেক করতে পারবেন, যেমন SharedArrayBuffer-এর উপলভ্যতা, ইত্যাদি।

Chrome DevTools iframe ইন্সপেক্টর।

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

Chrome DevTools ডায়ালগ উইন্ডো ইন্সপেক্টর

Reporting API ব্যবহার করে সমস্যা লক্ষ্য করা

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

কীভাবে Reporting API কনফিগার করবেন এবং রিপোর্ট পাওয়ার জন্য সার্ভার সেট-আপ করবেন তা জানুন।

COEP রিপোর্টের উদাহরণ

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

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.example.org/check.svg?",
    "blockedURL": "https://third-party-test.example.org/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.example.com/?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.example.org/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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.example.com/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.example.com/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.example.com/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-এর ক্ষেত্রে DevTools-এ আরও উন্নতি করা হবে।

রিসোর্স

ডকুমেন্ট আপডেট

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