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

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

ইজি কিতামুরা

আপডেট

  • জুন 21, 2022 : ক্রস-অরিজিন আইসোলেশন সক্ষম হলে কর্মী স্ক্রিপ্টগুলিরও যত্ন নেওয়া প্রয়োজন৷ কিছু ব্যাখ্যা যোগ করা হয়েছে.
  • অগাস্ট 5, 2021 : JS সেলফ-প্রোফাইলিং এপিআইকে এমন একটি API হিসেবে উল্লেখ করা হয়েছে যার জন্য ক্রস-অরিজিন আইসোলেশন প্রয়োজন, কিন্তু দিকনির্দেশের সাম্প্রতিক পরিবর্তন প্রতিফলিত করে, এটি সরানো হয়েছে।
  • মে 6, 2021 : প্রতিক্রিয়া এবং রিপোর্ট করা সমস্যার ভিত্তিতে আমরা Chrome M92-এ সীমাবদ্ধ করার জন্য কোনো ক্রস-অরিজিন আইসোলেটেড সাইটে SharedArrayBuffer ব্যবহারের জন্য টাইমলাইন সামঞ্জস্য করার সিদ্ধান্ত নিয়েছি।
  • এপ্রিল 16, 2021 : একটি নতুন COEP শংসাপত্রবিহীন মোড এবং COOP একই-অরিজিন-অনুমতি-পপ-আপগুলিকে ক্রস-অরিজিন আইসোলেশনের জন্য একটি স্বস্তিদায়ক শর্ত হিসাবে যুক্ত করা হয়েছে।
  • মার্চ 5, 2021 : SharedArrayBuffer , performance.measureUserAgentSpecificMemory() , এবং ডিবাগিং কার্যকারিতাগুলির জন্য সীমাবদ্ধতাগুলি সরানো হয়েছে, যা এখন Chrome 89-এ সম্পূর্ণরূপে সক্ষম। আসন্ন ক্ষমতা, performance.now() এবং performance.timeOrigin যোগ করা হয়েছে, যার উচ্চতর নির্ভুলতা থাকবে।
  • ফেব্রুয়ারী 19, 2021 : DevTools-এ বৈশিষ্ট্য নীতি allow="cross-origin-isolated" এবং ডিবাগিং কার্যকারিতা সম্পর্কে একটি নোট যোগ করা হয়েছে।
  • অক্টোবর 15, 2020 : self.crossOriginIsolated ক্রোম 87 থেকে উপলব্ধ। এটি প্রতিফলিত করে, যখন self.crossOriginIsolated true হয় তখন document.domain অপরিবর্তনীয়। performance.measureUserAgentSpecificMemory() এর অরিজিন ট্রায়াল শেষ করছে এবং Chrome 89-এ ডিফল্টরূপে সক্রিয় করা হয়েছে৷ Android Chrome-এ শেয়ার্ড অ্যারে বাফার Chrome 88 থেকে উপলব্ধ হবে৷

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

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

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

একটি ক্রস-অরিজিন বিচ্ছিন্ন অবস্থায় নির্বাচন করতে, আপনাকে প্রধান নথিতে নিম্নলিখিত HTTP শিরোনামগুলি পাঠাতে হবে:

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

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

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

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

আপনার ওয়েবসাইট ক্রস-অরিজিন বিচ্ছিন্ন করতে COOP এবং COEP স্থাপন করুন

COOP এবং COEP একত্রিত করুন

1. Cross-Origin-Opener-Policy: same-origin হেডার

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

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

ব্রাউজিং কনটেক্সট গ্রুপ

আপনি DevTools থেকে উইন্ডো ওপেনার এবং এর ওপেনার পৃথক ব্রাউজিং প্রসঙ্গ গ্রুপে আছে কিনা তা পরীক্ষা করতে পারেন।

2. সংস্থানগুলি CORP বা CORS সক্রিয় আছে তা নিশ্চিত করুন৷

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

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

  • যদি রিসোর্সটি শুধুমাত্র একই উৎস থেকে লোড হবে বলে আশা করা হয়, তাহলে Cross-Origin-Resource-Policy: same-origin হেডার সেট করুন।
  • যদি রিসোর্সটি শুধুমাত্র একই সাইট থেকে কিন্তু ক্রস অরিজিন থেকে লোড হবে বলে আশা করা হয়, Cross-Origin-Resource-Policy: same-site হেডার সেট করুন।
  • যদি আপনার নিয়ন্ত্রণে ক্রস অরিজিন(গুলি) থেকে রিসোর্স লোড করা হয়, Cross-Origin-Resource-Policy: cross-origin হেডার সেট করুন যদি সম্ভব হয়।
  • ক্রস অরিজিন সংস্থানগুলির জন্য যেগুলির উপর আপনার কোন নিয়ন্ত্রণ নেই:
    • লোডিং এইচটিএমএল ট্যাগে crossorigin অ্যাট্রিবিউট ব্যবহার করুন যদি সংস্থানটি CORS-এর সাথে পরিবেশিত হয়। (উদাহরণস্বরূপ, <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> ইত্যাদির ক্ষেত্রে প্রযোজ্য।

3. এম্বেড করা সংস্থানগুলি মূল্যায়ন করতে COEP রিপোর্ট-শুধু HTTP হেডার ব্যবহার করুন৷

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

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

4. COEP সক্ষম করুন৷

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

বিচ্ছিন্নতা self.crossOriginIsolated দিয়ে সফল হয়েছে কিনা তা নির্ধারণ করুন

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

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

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

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

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

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

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

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

Chrome DevTools iframe পরিদর্শক

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

Chrome DevTools পপআপ উইন্ডো পরিদর্শক

রিপোর্টিং API ব্যবহার করে সমস্যা পর্যবেক্ষণ করুন

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

সম্পদ