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

ক্রস-অরিজিন আইসোলেশন একটি ওয়েব পৃষ্ঠাকে শক্তিশালী বৈশিষ্ট্য যেমন SharedArrayBuffer ব্যবহার করতে সক্ষম করে। এই নিবন্ধটি ব্যাখ্যা করে যে কীভাবে আপনার ওয়েবসাইটে ক্রস-অরিজিন আইসোলেশন সক্ষম করবেন।

ইজি কিতামুরা

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

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

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

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

  • Chrome DevTools ব্যবহার করে
  • (উন্নত) অবচয় রিপোর্টিং ব্যবহার করে

আপনি যদি ইতিমধ্যেই জানেন যে আপনি কোথায় SharedArrayBuffer ব্যবহার করছেন, ক্রস-অরিজিন আইসোলেশনের প্রভাব বিশ্লেষণ করতে এড়িয়ে যান।

Chrome DevTools ব্যবহার করে

Chrome DevTools ডেভেলপারদের ওয়েবসাইট পরিদর্শন করার অনুমতি দেয়।

  1. আপনি যে পৃষ্ঠায় SharedArrayBuffer ব্যবহার করছেন সন্দেহ করছেন তাতে Chrome DevTools খুলুন ।
  2. কনসোল প্যানেল নির্বাচন করুন।
  3. পৃষ্ঠাটি SharedArrayBuffer ব্যবহার করলে, নিম্নলিখিত বার্তাটি দেখাবে: 
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
  4. বার্তার শেষে ফাইলের নাম এবং লাইন নম্বর (উদাহরণস্বরূপ, common-bundle.js:535 ) নির্দেশ করে যে SharedArrayBuffer কোথা থেকে আসছে। এটি একটি তৃতীয় পক্ষের লাইব্রেরি হলে, সমস্যাটি সমাধান করতে বিকাশকারীর সাথে যোগাযোগ করুন৷ এটি আপনার ওয়েবসাইটের অংশ হিসাবে প্রয়োগ করা হলে, ক্রস-অরিজিন আইসোলেশন সক্ষম করতে নীচের নির্দেশিকা অনুসরণ করুন।
DevToools কনসোল সতর্কতা যখন SharedArrayBuffer ক্রস-অরিজিন আইসোলেশন ছাড়া ব্যবহার করা হয়
DevToools কনসোল সতর্কতা যখন SharedArrayBuffer ক্রস-অরিজিন আইসোলেশন ছাড়া ব্যবহার করা হয়।

(উন্নত) অবচয় রিপোর্টিং ব্যবহার করে

কিছু ব্রাউজারে একটি নির্দিষ্ট এন্ডপয়েন্টে API-কে অবমূল্যায়ন করার রিপোর্টিং কার্যকারিতা রয়েছে।

  1. একটি অবচয় রিপোর্ট সার্ভার সেট আপ করুন এবং রিপোর্টিং URL পান । আপনি একটি পাবলিক সার্ভিস ব্যবহার করে বা নিজে একটি তৈরি করে এটি অর্জন করতে পারেন।
  2. URL ব্যবহার করে, নিম্নলিখিত HTTP শিরোনামটি এমন পৃষ্ঠাগুলিতে সেট করুন যা সম্ভাব্যভাবে SharedArrayBuffer পরিবেশন করছে। 
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. একবার শিরোনামটি প্রচার করা শুরু করলে, আপনি যে এন্ডপয়েন্টটিতে নিবন্ধন করেছেন সেটি অবচয় প্রতিবেদন সংগ্রহ করা শুরু করবে।

এখানে একটি উদাহরণ বাস্তবায়ন দেখুন: https://cross-origin-isolation.glitch.me ।

ক্রস-অরিজিন আইসোলেশনের প্রভাব বিশ্লেষণ কর

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

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

সম্পদ