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

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

Eiji Kitamura

আপডেট

• জুন 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 থেকে উপলব্ধ হবে৷

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

ক্রস-অরিজিন আইসোলেটেড স্টেট 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) ।

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

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

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

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

রিপোর্টিং 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-এ আরও উন্নতি করা হয়েছে৷

সম্পদ

• শক্তিশালী বৈশিষ্ট্যের জন্য কেন আপনার "ক্রস-অরিজিন আইসোলেটেড" প্রয়োজন
• ক্রস-অরিজিন আইসোলেশন সক্ষম করার জন্য একটি গাইড
• Android Chrome 88 এবং Desktop Chrome 92-এ SharedArrayBuffer আপডেট
• measureUserAgentSpecificMemory() দিয়ে আপনার ওয়েব পৃষ্ঠার মোট মেমরি ব্যবহার নিরীক্ষণ করুন

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

Eiji Kitamura

আপডেট

• জুন 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 থেকে উপলব্ধ হবে৷

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

ক্রস-অরিজিন আইসোলেটেড স্টেট 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) ।

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

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

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

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

রিপোর্টিং 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-এ আরও উন্নতি করা হয়েছে৷

সম্পদ

• শক্তিশালী বৈশিষ্ট্যের জন্য কেন আপনার "ক্রস-অরিজিন আইসোলেটেড" প্রয়োজন
• ক্রস-অরিজিন আইসোলেশন সক্ষম করার জন্য একটি গাইড
• Android Chrome 88 এবং Desktop Chrome 92-এ SharedArrayBuffer আপডেট
• measureUserAgentSpecificMemory() দিয়ে আপনার ওয়েব পৃষ্ঠার মোট মেমরি ব্যবহার নিরীক্ষণ করুন

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

Eiji Kitamura

আপডেট

• জুন 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 থেকে উপলব্ধ হবে৷

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

ক্রস-অরিজিন আইসোলেটেড স্টেট 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 , একই উত্সযুক্ত উইন্ডোজ এবং ডকুমেন্ট থেকে খোলা উইন্ডোজ, একই কোপ সেটিং সহ একই উত্স না থাকলে পৃথক ব্রাউজিং প্রসঙ্গ গ্রুপ থাকবে। সুতরাং, খোলা উইন্ডোগুলির জন্য বিচ্ছিন্নতা প্রয়োগ করা হয় এবং উভয় উইন্ডোগুলির মধ্যে পারস্পরিক যোগাযোগ অক্ষম করা হয়।

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

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

২. নিশ্চিত করুন যে সংস্থানগুলি কর্পস বা কর্স সক্ষম করেছে

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

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

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

৩. এম্বেড থাকা সংস্থানগুলি মূল্যায়ন করতে কেবল কোপ রিপোর্ট-কেবলমাত্র এইচটিটিপি শিরোনামটি ব্যবহার করুন

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

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

4. কোপ সক্ষম করুন

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

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

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

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

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

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

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

আপনি আইফ্রেমের স্থিতি যেমন SharedArrayBuffer ইত্যাদি প্রাপ্যতা পরীক্ষা করতে পারেন etc.

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

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

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

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

উদাহরণ কোপ রিপোর্ট

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

[{
  "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"
}]

উদাহরণ কোপ রিপোর্ট

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

[{
  "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"
}]

যখন বিভিন্ন ব্রাউজিং প্রসঙ্গের গোষ্ঠীগুলি একে অপরকে অ্যাক্সেস করার চেষ্টা করে (কেবলমাত্র "কেবল প্রতিবেদন-কেবল" মোডে), কুপ একটি প্রতিবেদনও প্রেরণ করে। উদাহরণস্বরূপ, যখন 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"
}]

উপসংহার

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

আমরা এই পোস্টটি আপডেট রাখব কারণ এই ক্রস-উত্স বিচ্ছিন্ন অবস্থায় নতুন বৈশিষ্ট্যগুলি উপলব্ধ করা হয়েছে এবং সিওপি এবং কোইপের চারপাশে ডিভটুলগুলিতে আরও উন্নতি করা হয়েছে।

সম্পদ

• শক্তিশালী বৈশিষ্ট্যগুলির জন্য আপনার কেন "ক্রস-অরিজিন বিচ্ছিন্ন" দরকার
• ক্রস-অরিজিন বিচ্ছিন্নতা সক্ষম করার জন্য একটি গাইড
• অ্যান্ড্রয়েড ক্রোম 88 এবং ডেস্কটপ ক্রোম 92 এ শারডারাইবফার আপডেটগুলি
• আপনার ওয়েব পৃষ্ঠার মোট মেমরির ব্যবহারটি measureUserAgentSpecificMemory() সহ পর্যবেক্ষণ করুন

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

Eiji Kitamura

আপডেট

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

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

ক্রস-অরিজিন বিচ্ছিন্ন রাষ্ট্রটি document.domain এর পরিবর্তনগুলিও বাধা দেয়। ( document.domain পরিবর্তন করতে সক্ষম হওয়া।

ক্রস-উত্স বিচ্ছিন্ন অবস্থায় বেছে নিতে, আপনাকে মূল নথিতে নিম্নলিখিত এইচটিটিপি শিরোনামগুলি প্রেরণ করতে হবে:

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

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

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

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

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

কুপ এবং কোপকে সংহত করুন

1. Cross-Origin-Opener-Policy: same-origin শিরোনাম

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

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

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

২. নিশ্চিত করুন যে সংস্থানগুলি কর্পস বা কর্স সক্ষম করেছে

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

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

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

৩. এম্বেড থাকা সংস্থানগুলি মূল্যায়ন করতে কেবল কোপ রিপোর্ট-কেবলমাত্র এইচটিটিপি শিরোনামটি ব্যবহার করুন

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

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

4. কোপ সক্ষম করুন

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

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

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

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

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

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

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

আপনি আইফ্রেমের স্থিতি যেমন SharedArrayBuffer ইত্যাদি প্রাপ্যতা পরীক্ষা করতে পারেন etc.

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

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

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

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

উদাহরণ কোপ রিপোর্ট

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

[{
  "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"
}]

উদাহরণ কোপ রিপোর্ট

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

[{
  "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"
}]

যখন বিভিন্ন ব্রাউজিং প্রসঙ্গের গোষ্ঠীগুলি একে অপরকে অ্যাক্সেস করার চেষ্টা করে (কেবলমাত্র "কেবল প্রতিবেদন-কেবল" মোডে), কুপ একটি প্রতিবেদনও প্রেরণ করে। উদাহরণস্বরূপ, যখন 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"
}]

উপসংহার

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

আমরা এই পোস্টটি আপডেট রাখব কারণ এই ক্রস-উত্স বিচ্ছিন্ন অবস্থায় নতুন বৈশিষ্ট্যগুলি উপলব্ধ করা হয়েছে এবং সিওপি এবং কোইপের চারপাশে ডিভটুলগুলিতে আরও উন্নতি করা হয়েছে।

সম্পদ

• শক্তিশালী বৈশিষ্ট্যগুলির জন্য আপনার কেন "ক্রস-অরিজিন বিচ্ছিন্ন" দরকার
• ক্রস-অরিজিন বিচ্ছিন্নতা সক্ষম করার জন্য একটি গাইড
• অ্যান্ড্রয়েড ক্রোম 88 এবং ডেস্কটপ ক্রোম 92 এ শারডারাইবফার আপডেটগুলি
• আপনার ওয়েব পৃষ্ঠার মোট মেমরির ব্যবহারটি measureUserAgentSpecificMemory() সহ পর্যবেক্ষণ করুন