ক্রস-অরিজিন আইসোলেশন সক্ষম করার জন্য একটি গাইড

ক্রস-অরিজিন আইসোলেশন একটি ওয়েব পেজকে SharedArrayBuffer-এর মতো শক্তিশালী ফিচার ব্যবহার করতে সক্ষম করে। এই আর্টিকেলে ব্যাখ্যা করা হয়েছে, কীভাবে আপনার ওয়েবসাইটে ক্রস-অরিজিন আইসোলেশন চালু করবেন।

Eiji Kitamura

এই নির্দেশিকাটি আপনাকে দেখাবে কিভাবে ক্রস-অরিজিন আইসোলেশন সক্রিয় করতে হয়। যদি আপনি SharedArrayBuffer , performance.measureUserAgentSpecificMemory() , অথবা আরও ভালো প্রিসিশন সহ হাই রেজোলিউশন টাইমার ব্যবহার করতে চান, তাহলে ক্রস-অরিজিন আইসোলেশন প্রয়োজন।

আপনি যদি ক্রস-অরিজিন আইসোলেশন চালু করতে চান, তাহলে আপনার ওয়েবসাইটের অন্যান্য ক্রস-অরিজিন রিসোর্স, যেমন বিজ্ঞাপনের স্থানগুলোর উপর এর কী প্রভাব পড়বে তা মূল্যায়ন করুন।

আপনার ওয়েবসাইটে SharedArrayBuffer কোথায় ব্যবহৃত হয় তা নির্ধারণ করুন।

ক্রোম ৯২ থেকে, SharedArrayBuffer ব্যবহারকারী কার্যকারিতাগুলো ক্রস-অরিজিন আইসোলেশন ছাড়া আর কাজ করবে না। যদি আপনি SharedArrayBuffer ডেপ্রিকেশন বার্তার কারণে এই পৃষ্ঠায় এসে থাকেন, তাহলে সম্ভবত আপনার ওয়েবসাইট অথবা এতে এমবেড করা কোনো রিসোর্স SharedArrayBuffer ব্যবহার করছে। ডেপ্রিকেশনের কারণে আপনার ওয়েবসাইটে যেন কোনো সমস্যা না হয়, তা নিশ্চিত করতে প্রথমে এটি কোথায় ব্যবহৃত হয়েছে তা শনাক্ত করুন।

আপনার সাইটে কোথায় একটি SharedArrayBuffer ব্যবহৃত হয়েছে সে বিষয়ে আপনি যদি নিশ্চিত না হন, তবে তা খুঁজে বের করার দুটি উপায় আছে:

• ক্রোম ডেভটুলস ব্যবহার করে
• (উন্নত) অবচয় প্রতিবেদন ব্যবহার

আপনি যদি আগে থেকেই জানেন যে কোথায় SharedArrayBuffer ব্যবহার করছেন, তাহলে সরাসরি 'ক্রস-অরিজিন আইসোলেশনের প্রভাব বিশ্লেষণ করুন ' অংশে চলে যান।

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

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

1. যে পেজটিতে SharedArrayBuffer ব্যবহৃত হচ্ছে বলে আপনার সন্দেহ হচ্ছে, সেটিতে Chrome DevTools খুলুন ।
2. কনসোল প্যানেলটি নির্বাচন করুন।
3. যদি পৃষ্ঠাটি SharedArrayBuffer ব্যবহার করে, তাহলে নিম্নলিখিত বার্তাটি প্রদর্শিত হবে:

   [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See  for more details. common-bundle.js:535

4. মেসেজের শেষে থাকা ফাইলের নাম এবং লাইন নম্বর (যেমন, common-bundle.js:535 ) নির্দেশ করে যে SharedArrayBuffer টি কোথা থেকে আসছে। যদি এটি কোনো থার্ড-পার্টি লাইব্রেরি হয়, তবে সমস্যাটি সমাধানের জন্য ডেভেলপারের সাথে যোগাযোগ করুন। আর যদি এটি আপনার ওয়েবসাইটের অংশ হিসেবে ইমপ্লিমেন্ট করা হয়ে থাকে, তবে ক্রস-অরিজিন আইসোলেশন চালু করতে নিচের নির্দেশিকাটি অনুসরণ করুন।

(উন্নত) অবচয় প্রতিবেদন ব্যবহার

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

1. একটি ডেপ্রিকেশন রিপোর্ট সার্ভার সেট আপ করুন এবং রিপোর্টিং ইউআরএলটি সংগ্রহ করুন । আপনি একটি পাবলিক সার্ভিস ব্যবহার করে অথবা নিজে একটি তৈরি করে এটি করতে পারেন।
2. URL ব্যবহার করে, যে পেজগুলো সম্ভাব্যভাবে SharedArrayBuffer পরিবেশন করছে, সেগুলোতে নিম্নলিখিত HTTP হেডারটি সেট করুন।

   Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}

3. হেডারটি প্রচার হতে শুরু করলে, আপনার রেজিস্টার করা এন্ডপয়েন্টটি ডেপ্রিকেশন রিপোর্ট সংগ্রহ করা শুরু করবে।

একটি বাস্তবায়ন উদাহরণ দেখুন।

বিভিন্ন উৎস থেকে বিচ্ছিন্নকরণের প্রভাব বিশ্লেষণ করুন

যদি আপনি আপনার সাইটের কোনো কিছু নষ্ট না করেই ক্রস-অরিজিন আইসোলেশন চালু করার প্রভাব মূল্যায়ন করতে পারতেন, তাহলে কি দারুণ হতো না? Cross-Origin-Opener-Policy-Report-Only এবং Cross-Origin-Embedder-Policy-Report-Only HTTP হেডারগুলো আপনাকে ঠিক এই কাজটি করার সুযোগ দেয়।

1. আপনার শীর্ষ-স্তরের ডকুমেন্টে Cross-Origin-Opener-Policy-Report-Only: same-origin সেট করুন। নাম থেকেই বোঝা যায়, এই হেডারটি শুধুমাত্র আপনার সাইটে COOP: same-origin এর প্রভাব সম্পর্কে রিপোর্ট পাঠায়—এটি আসলে পপ-আপ উইন্ডোগুলোর সাথে যোগাযোগ বন্ধ করে না।
2. রিপোর্টিং ব্যবস্থা চালু করুন এবং রিপোর্ট গ্রহণ ও সংরক্ষণের জন্য একটি ওয়েব সার্ভার কনফিগার করুন।
3. আপনার টপ-লেভেল ডকুমেন্টে Cross-Origin-Embedder-Policy-Report-Only: require-corp সেট করুন। আবারও বলছি, এই হেডারটি আপনার সাইটের কার্যকারিতাকে প্রভাবিত না করেই COEP: require-corp সক্রিয় করার প্রভাব দেখতে দেয়। আপনি এই হেডারটি কনফিগার করে রিপোর্টগুলো সেই একই রিপোর্টিং সার্ভারে পাঠাতে পারেন, যা আপনি আগের ধাপে সেট আপ করেছিলেন।

বিভিন্ন উৎস থেকে বিচ্ছিন্নতার প্রভাব প্রশমিত করুন

ক্রস-অরিজিন আইসোলেশন দ্বারা কোন রিসোর্সগুলো প্রভাবিত হবে তা নির্ধারণ করার পরে, আপনি কীভাবে সেই ক্রস-অরিজিন রিসোর্সগুলো অপ্ট-ইন করবেন তার জন্য এখানে সাধারণ নির্দেশিকা দেওয়া হলো:

1. ইমেজ, স্ক্রিপ্ট, স্টাইলশিট, আইফ্রেম এবং অন্যান্য ক্রস-অরিজিন রিসোর্সের ক্ষেত্রে Cross Cross-Origin-Resource-Policy:cross-origin হেডারটি সেট করুন। সেম-সাইট রিসোর্সের ক্ষেত্রে Cross-Origin-Resource-Policy:same-site হেডারটি সেট করুন।
2. CORS ব্যবহার করে লোডযোগ্য রিসোর্সগুলির জন্য, সেগুলির HTML ট্যাগে crossorigin অ্যাট্রিবিউট সেট করে CORS সক্রিয় করা নিশ্চিত করুন (উদাহরণস্বরূপ, <img src="example.jpg" crossorigin> )। জাভাস্ক্রিপ্ট ফেচ রিকোয়েস্টের জন্য, request.mode cors এ সেট করা নিশ্চিত করুন।
3. যদি আপনি লোড করা আইফ্রেমের ভিতরে SharedArrayBuffer এর মতো শক্তিশালী বৈশিষ্ট্য ব্যবহার করতে চান, তাহলে <iframe> এর শেষে allow="cross-origin-isolated" যুক্ত করুন।
4. যদি আইফ্রেম বা ওয়ার্কার স্ক্রিপ্টে লোড করা ক্রস-অরিজিন রিসোর্সগুলিতে অন্য কোনো স্তরের আইফ্রেম বা ওয়ার্কার স্ক্রিপ্ট জড়িত থাকে, তাহলে সামনে এগোনোর আগে এই বিভাগে বর্ণিত পদক্ষেপগুলি পুনরাবৃত্তিমূলকভাবে প্রয়োগ করুন।
5. একবার আপনি নিশ্চিত হয়ে গেলে যে সমস্ত ক্রস-অরিজিন রিসোর্স অপ্ট-ইন করা হয়েছে, আইফ্রেম এবং ওয়ার্কার স্ক্রিপ্টগুলিতে Cross-Origin-Embedder-Policy: require-corp হেডারটি সেট করুন (এটি সেম-অরিজিন বা ক্রস-অরিজিন নির্বিশেষে আবশ্যক)।
6. নিশ্চিত করুন যে এমন কোনো ক্রস-অরিজিন পপ-আপ উইন্ডো নেই যার জন্য postMessage() এর মাধ্যমে যোগাযোগের প্রয়োজন হয়। ক্রস-অরিজিন আইসোলেশন সক্রিয় থাকলে সেগুলোকে সচল রাখার কোনো উপায় নেই। আপনি যোগাযোগটি এমন একটি ডকুমেন্টে স্থানান্তর করতে পারেন যা ক্রস-অরিজিন আইসোলেটেড নয়, অথবা যোগাযোগের একটি ভিন্ন পদ্ধতি ব্যবহার করতে পারেন (উদাহরণস্বরূপ, HTTP রিকোয়েস্ট)।

ক্রস-অরিজিন আইসোলেশন সক্ষম করুন

ক্রস-অরিজিন আইসোলেশনের মাধ্যমে প্রভাব প্রশমিত করার পর, এটি সক্রিয় করার জন্য এখানে কিছু সাধারণ নির্দেশিকা দেওয়া হলো:

1. আপনার টপ-লেভেল ডকুমেন্টে Cross-Origin-Opener-Policy: same-origin হেডারটি সেট করুন। যদি আপনি Cross-Origin-Opener-Policy-Report-Only: same-origin সেট করে থাকেন, তবে তা প্রতিস্থাপন করুন। এটি আপনার টপ-লেভেল ডকুমেন্ট এবং এর পপ-আপ উইন্ডোগুলোর মধ্যে যোগাযোগ বন্ধ করে দেয়।
2. আপনার টপ-লেভেল ডকুমেন্টে Cross-Origin-Embedder-Policy: require-corp হেডারটি সেট করুন। যদি আপনি Cross-Origin-Embedder-Policy-Report-Only: require-corp সেট করে থাকেন, তবে তা প্রতিস্থাপন করুন। এটি সেইসব ক্রস-অরিজিন রিসোর্স লোড হওয়াকে ব্লক করবে যেগুলো অপ্ট-ইন করা হয়নি।
3. আপনার পেজটি ক্রস-অরিজিন আইসোলেটেড কিনা তা যাচাই করতে, কনসোলে self.crossOriginIsolated true রিটার্ন করছে কিনা তা পরীক্ষা করুন।

সম্পদ

• COOP এবং COEP ব্যবহার করে আপনার ওয়েবসাইটকে 'ক্রস-অরিজিন আইসোলেটেড' করা
• অ্যান্ড্রয়েড ক্রোম ৮৮ এবং ডেস্কটপ ক্রোম ৯২-এ SharedArrayBuffer-এর আপডেট