SharedArrayBuffer অবশেষে ব্রাউজারে আবার কাজ করছে, তবে এটি কেবল তখনই কাজ করে যখন একটি পেজ cross-origin isolated অবস্থায় থাকে – এমন একটি অবস্থা যার জন্য দুটি response header প্রয়োজন। এই হেডারগুলো যোগ করার ফলে আমাকে আমার সাইটের প্রতিটি থার্ড-পার্টি স্ক্রিপ্ট বাদ দিতে হয়েছে, যা পুরো ফ্রন্ট-এন্ড তৈরির পদ্ধতি এবং ডেটা লিক হওয়ার বিষয়টিকে আমূল বদলে দিয়েছে।

কেন এই হেডারগুলো গুরুত্বপূর্ণ

SharedArrayBuffer জাভাস্ক্রিপ্টে প্রকৃত multithreading সক্ষম করে, যা একটি ট্যাবের ভেতরে ffmpeg চালানোর জন্য একটি পূর্বশর্ত। Spectre-style mitigations-এর পর আধুনিক ব্রাউজারগুলো এই ফিচারটি পুনরায় চালু করেছে, কিন্তু তারা এটিকে cross-origin isolation-এর সাথে যুক্ত করে দিয়েছে। সেই isolation অর্জনের জন্য একটি সার্ভারকে অবশ্যই পাঠাতে হবে:

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

দ্বিতীয় হেডারটি, require-corp, ব্রাউজারকে জানায় যে যেকোনো বাহ্যিক রিসোর্সকে অবশ্যই একটি Cross-Origin-Resource-Policy হেডার বহন করতে হবে অথবা CORS (Cross-Origin Resource Sharing) দিয়ে ফেচ (fetch) করতে হবে। বেশিরভাগ থার্ড-পার্টি সার্ভিস এই হেডারগুলো সেট করে না, তাই তাদের স্ক্রিপ্ট, ফন্ট এবং iframe-গুলো সরাসরি ব্লক হয়ে যায়।

আইসোলেশন চালু করার পর কী কী হারিয়ে গেল

হেডারগুলো লাইভ হওয়ার সাথে সাথেই একের পর এক সমস্যা দেখা দিতে শুরু করল:

  • Analytics – বেশিরভাগ প্রোভাইডার তাদের ট্র্যাকিং কোড একটি সাধারণ <script> দিয়ে লোড করে যা একটি no-CORS রিকোয়েস্ট পাঠায়। CORP হেডার ছাড়া রিকোয়েস্টটি রিজেক্ট হয়ে যায়, ফলে ট্র্যাকারটি কখনোই চলে না।
  • Google Fonts – স্টাইলশিটটি fonts.googleapis.com থেকে CORS ছাড়াই ফেচ করা হয়। ব্রাউজার এটি বাতিল করে দেয়, ফলে পেজটি তার কাস্টম টাইপোগ্রাফি হারিয়ে ফেলে।
  • Embedded media – YouTube iframe এবং উইজেট স্ক্রিপ্টগুলোতে CORP নেই, তাই সেগুলো রেন্ডার হওয়া বন্ধ হয়ে যায়।
  • OAuth pop-ups – কঠোর same-origin পলিসির কারণে window.opener সম্পর্কটি ভেঙে যায়, যা সাধারণ পপআপ-ভিত্তিক লগইন ফ্লো-কে ব্যাহত করে।

সংক্ষেপে, যেকোনো অ্যাসেট যা থার্ড-পার্টি ডোমেইনের ওপর নির্ভরশীল ছিল, তা অদৃশ্য হয়ে গেল যদি না সেই ডোমেইনটি নতুন হেডার নিয়মে যোগ দেয়।

মধ্যস্থতাকারী ছাড়াই পুনর্গঠন

একটি অচল সাইটের মুখোমুখি হয়ে, আমি সেলফ-হোস্টেড অ্যাসেটগুলোর ওপর ভিত্তি করে ফ্রন্ট-এন্ড স্ট্যাকটি নতুন করে লিখলাম:

  • Fonts and images এখন আমার নিজস্ব অরিজিন থেকে সার্ভ করা হচ্ছে, যা বাহ্যিক স্টাইলশিটের প্রয়োজনীয়তা দূর করেছে।
  • Data APIs একটি প্রাইভেট ব্যাকএন্ডের ওপর তৈরি করা হয়েছে যা আমি নিয়ন্ত্রণ করি, ফলে প্রতিটি রিকোয়েস্ট আমার ডোমেইনের ভেতরেই থাকে।
  • Analytics একটি ছোট Cloudflare Worker-এ রূপান্তরিত হয়েছে যা POST ইভেন্ট গ্রহণ করে এবং একটি প্রাইভেট বাকেটে (bucket) সেগুলো সংরক্ষণ করে। ক্লায়েন্ট সাইডে এটি মাত্র এক ডজন লাইনের fetch কোড।
  • Error reporting and session replay টুলগুলো যেমন Sentry সম্পূর্ণ বাদ দেওয়া হয়েছে; এখন যেকোনো ক্র্যাশ আমার নিজস্ব এন্ডপয়েন্টে লগ করা হয়।

যদি কোনো বাহ্যিক রিসোর্স এখনও প্রয়োজন হয়, তবে একমাত্র কার্যকর উপায় হলো আপনার মালিকানাধীন একটি সার্ভারের মাধ্যমে সেটিকে প্রক্সি করা, যাতে ব্রাউজার দেখার আগেই প্রয়োজনীয় CORP হেডারটি যোগ করা যায়।

গোপনীয়তার সুবিধা বনাম পরিচালন ব্যয়

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

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

পাল্টা যুক্তি: ইকোসিস্টেম কি মানিয়ে নেবে?

কেউ কেউ যুক্তি দেন যে থার্ড-পার্টি ভেন্ডররা শেষ পর্যন্ত প্রয়োজনীয় হেডারগুলো যোগ করবে, যা cross-origin isolation গ্রহণ করা সহজ করে তুলবে। অল্প কিছু কোম্পানি ইতিমধ্যে তা করছে, কিন্তু বহুল ব্যবহৃত বেশিরভাগ সার্ভিস এখনও তা করেনি। ইকোসিস্টেম যতক্ষণ না তাল মেলাচ্ছে, ততক্ষণ ডেভেলপারদের সিদ্ধান্ত নিতে হবে যে গোপনীয়তার সুবিধা কি সেলফ-হোস্ট করার জন্য প্রয়োজনীয় ইঞ্জিনিয়ারিং প্রচেষ্টার চেয়ে বেশি গুরুত্বপূর্ণ কি না।

আপনি সত্যিই আইসোলেটেড কি না তা কীভাবে যাচাই করবেন

পুনর্লিখন শুরু করার আগে নিশ্চিত হয়ে নিন যে ব্রাউজার আপনার পেজটিকে আইসোলেটেড হিসেবে দেখছে:

crossOriginIsolated   // should be true
typeof SharedArrayBuffer   // should be "function"

যদি যেকোনো একটি চেক ব্যর্থ হয়, তবে হেডারগুলো সঠিকভাবে প্রয়োগ করা হচ্ছে না এবং SharedArrayBuffer অনুপলব্ধ থাকবে।

ডেভেলপারদের জন্য পরবর্তী পদক্ষেপ কী?

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

মূল কথা: SharedArrayBuffer আনলক করার জন্য cross-origin isolation সক্রিয় করা একটি কঠিন সিদ্ধান্তের মুখোমুখি দাঁড় করায় – হয় থার্ড-পার্টি স্ক্রিপ্টের সুবিধা বজায় রাখা, অথবা একটি আরও কঠোর ও স্বয়ং-নিয়ন্ত্রিত প্রাইভেসী মডেলের জন্য তা ত্যাগ করা। এই সিদ্ধান্ত আধুনিক ওয়েবসাইটগুলোর প্রযুক্তিগত স্থাপত্য এবং ডেটা-ফ্লো ফুটপ্রিন্ট উভয়কেই পুনর্গঠিত করে।