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

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

ইজি কিতামুরা

আপডেট

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

কিছু ওয়েব 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

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

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

এই নিবন্ধটি এই নতুন শিরোনামগুলি কীভাবে ব্যবহার করবেন তা দেখায়। পরবর্তী নিবন্ধে আমি আরও পটভূমি এবং প্রসঙ্গ প্রদান করব।

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

২. নিশ্চিত করুন যে সম্পদগুলিতে CORP অথবা CORS সক্রিয় আছে

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

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

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

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

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

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

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

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

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

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

Chrome DevTools ব্যবহার করে সমস্যাগুলি ডিবাগ করুন

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

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

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

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

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

আপনি iframe এর অবস্থা যেমন SharedArrayBuffer এর উপলব্ধতা ইত্যাদি পরীক্ষা করতে পারেন।

Chrome DevTools iframe পরিদর্শক

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

Chrome DevTools পপআপ উইন্ডো ইন্সপেক্টর

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

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

রিপোর্টিং API কীভাবে কনফিগার করতে হয় এবং রিপোর্ট গ্রহণের জন্য একটি সার্ভার সেট আপ করতে হয় তা জানতে, 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-এর আশেপাশে DevTools-এ আরও উন্নতি করা হলে আমরা এই পোস্টটি আপডেট রাখব।

রিসোর্স