বেড়া ফ্রেম ওভারভিউ

সাইটের মধ্যে ডেটা শেয়ার না করেই নিরাপদে কোনো পেজে কন্টেন্ট যুক্ত করুন।

বাস্তবায়ন অবস্থা

• পর্যায়ক্রমে বন্ধ করার জন্য নির্ধারিত।
• প্রকাশের অভিপ্রায়: FencedFrame এলিমেন্ট এবং window.fence এপিআই অপসারণ
• ক্রোম প্ল্যাটফর্মের অবস্থা

আমাদের বেড়াযুক্ত কাঠামোর প্রয়োজন কেন?

একটি ফেন্সড ফ্রেম ( <fencedframe> ) হলো এমবেডেড কন্টেন্টের জন্য একটি HTML এলিমেন্ট, যা আইফ্রেমের (iframe) মতো। আইফ্রেমের থেকে ভিন্ন, একটি ফেন্সড ফ্রেম তার এমবেডিং কনটেক্সটের সাথে যোগাযোগ সীমাবদ্ধ রাখে, যার ফলে ফ্রেমটি এমবেডিং কনটেক্সটের সাথে ডেটা শেয়ার না করেই ক্রস-সাইট ডেটা অ্যাক্সেস করতে পারে। কিছু প্রাইভেসি স্যান্ডবক্স এপিআই-এর জন্য নির্দিষ্ট কিছু ডকুমেন্টকে একটি ফেন্সড ফ্রেমের মধ্যে রেন্ডার করার প্রয়োজন হতে পারে।

একইভাবে, এমবেডিং কনটেক্সটে থাকা কোনো ফার্স্ট-পার্টি ডেটা ফেন্সড ফ্রেমের সাথে শেয়ার করা যাবে না।

উদাহরণস্বরূপ, যদি news.example (এম্বেডিং কনটেক্সট) একটি ফেন্সড ফ্রেমে shoes.example থেকে কোনো বিজ্ঞাপন এম্বেড করে, তাহলে news.example সেই shoes.example বিজ্ঞাপনটি থেকে ডেটা পাচার করতে পারবে না, এবং shoes.example news.example থেকে ফার্স্ট-পার্টি ডেটা জানতে পারবে না।

স্টোরেজ পার্টিশনিংয়ের মাধ্যমে ক্রস-সাইট গোপনীয়তা জোরদার করুন

ওয়েব ব্রাউজ করার সময় আপনি হয়তো কোনো একটি সাইটে কোনো পণ্য দেখেছেন এবং তারপরেই সম্পূর্ণ ভিন্ন কোনো সাইটের বিজ্ঞাপনে সেটিকে আবার দেখতে পেয়েছেন।

বর্তমানে, এই বিজ্ঞাপন কৌশলটি প্রধানত ট্র্যাকিং প্রযুক্তির মাধ্যমে সম্পন্ন করা হয়, যা বিভিন্ন সাইটের মধ্যে তথ্য আদান-প্রদান করতে থার্ড-পার্টি কুকি ব্যবহার করে।

ক্রোম স্টোরেজ পার্টিশনিং নিয়ে কাজ করছে, যা প্রতিটি সাইটের জন্য ব্রাউজার স্টোরেজকে আলাদা করে। পার্টিশনিং ছাড়া, যদি shoes.example থেকে একটি iframe news.example এ এমবেড করা হয় এবং সেই iframe স্টোরেজে কোনো ভ্যালু সংরক্ষণ করে, তাহলে সেই ভ্যালুটি shoes.example সাইট থেকে পড়া যাবে। যখন স্টোরেজ পার্টিশন করা হবে, তখন ক্রস-সাইট iframe-গুলো আর স্টোরেজ শেয়ার করবে না, ফলে shoes.example iframe-এ সংরক্ষিত তথ্য অ্যাক্সেস করতে পারবে না। যদি iframe-টি *.shoes.example থেকে সার্ভ করা হয় এবং *.shoes.example এ এমবেড করা হয়, তাহলে ব্রাউজার স্টোরেজ শেয়ার করা হবে, কারণ এগুলোকে একই সাইটের অংশ হিসেবে বিবেচনা করা হয়।

লোকালস্টোরেজ, ইনডেক্সডডিবি এবং কুকিজ সহ স্ট্যান্ডার্ড স্টোরেজ এপিআইগুলোতে স্টোরেজ পার্টিশনিং প্রয়োগ করা হবে। একটি পার্টিশনযুক্ত বিশ্বে, ফার্স্ট-পার্টি স্টোরেজ জুড়ে তথ্য ফাঁসের ঘটনা উল্লেখযোগ্যভাবে হ্রাস পাবে।

বিভিন্ন সাইটের ডেটা নিয়ে কাজ করুন

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

• Protected Audience API গোপনীয়তা বজায় রেখে আগ্রহ-ভিত্তিক বিজ্ঞাপন পরিবেশনের সুযোগ দেয়।
• শেয়ার্ড স্টোরেজ একটি সুরক্ষিত পরিবেশে পার্টিশনবিহীন ক্রস-সাইট ডেটা অ্যাক্সেসের সুযোগ দেয়।

ফেন্সড ফ্রেমগুলো প্রোটেক্টেড অডিয়েন্স এপিআই (Protected Audience API)- এর সাথে কাজ করার জন্য ডিজাইন করা হয়েছে। প্রোটেক্টেড অডিয়েন্স এপিআই ব্যবহার করে, একজন ব্যবহারকারীর আগ্রহগুলো বিজ্ঞাপনদাতার সাইটে ইন্টারেস্ট গ্রুপে নিবন্ধিত করা হয়, সাথে সেই ব্যবহারকারীর জন্য আকর্ষণীয় হতে পারে এমন বিজ্ঞাপনগুলোও যুক্ত করা হয়। এরপর, একটি পৃথক সাইটে (যা "পাবলিশার" নামে পরিচিত), প্রাসঙ্গিক ইন্টারেস্ট গ্রুপে নিবন্ধিত বিজ্ঞাপনগুলোর নিলাম করা হয় এবং বিজয়ী বিজ্ঞাপনটি একটি ফেন্সড ফ্রেমে প্রদর্শিত হয়।

যদি প্রকাশক বিজয়ী বিজ্ঞাপনটি একটি আইফ্রেমে প্রদর্শন করে এবং স্ক্রিপ্টটি আইফ্রেমটির src অ্যাট্রিবিউট পড়তে পারে, তবে প্রকাশক সেই বিজ্ঞাপনের URL থেকে পরিদর্শকের আগ্রহ সম্পর্কে তথ্য অনুমান করতে পারে। এটি গোপনীয়তা রক্ষা করে না।

একটি ফেন্সড ফ্রেমের মাধ্যমে, পাবলিশার ভিজিটরের আগ্রহের সাথে মেলে এমন বিজ্ঞাপন প্রদর্শন করতে পারে, কিন্তু এর src এবং ইন্টারেস্ট গ্রুপ সম্পর্কে শুধুমাত্র ফ্রেমের ভেতরের বিজ্ঞাপনদাতাই জানবে। পাবলিশার এই তথ্য অ্যাক্সেস করতে পারবে না।

বেড়াযুক্ত ফ্রেমগুলো কীভাবে কাজ করে?

ফেন্সড ফ্রেম নেভিগেশনের জন্য FencedFrameConfig অবজেক্ট ব্যবহার করে। এই অবজেক্টটি একটি Protected Audience API অকশন অথবা Shared Storage-এর URL সিলেকশন অপারেশন থেকে রিটার্ন করা যেতে পারে। এরপর, কনফিগ অবজেক্টটি ফেন্সড ফ্রেম এলিমেন্টের config অ্যাট্রিবিউট হিসেবে সেট করা হয়। এটি একটি iframe থেকে ভিন্ন, যেখানে src অ্যাট্রিবিউটে একটি URL বা অস্বচ্ছ URN অ্যাসাইন করা হয়। FencedFrameConfig অবজেক্টের একটি রিড-অনলি url প্রপার্টি আছে; কিন্তু, যেহেতু বর্তমান ব্যবহারের ক্ষেত্রে অভ্যন্তরীণ রিসোর্সের আসল URL গোপন রাখার প্রয়োজন হয়, তাই এই প্রপার্টিটি পড়ার সময় opaque স্ট্রিংটি রিটার্ন করে।

একটি ফেন্সড ফ্রেম তার এমবেডারের সাথে যোগাযোগের জন্য postMessage ব্যবহার করতে পারে না। তবে, একটি ফেন্সড ফ্রেম তার ভেতরের iframe-গুলোর সাথে postMessage ব্যবহার করতে পারে।

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

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

বেড়াযুক্ত ফ্রেমের বৈশিষ্ট্যগুলো ব্যাখ্যা অংশে আরও বিশদভাবে বর্ণনা করা হয়েছে।

ফেন্সড ফ্রেম এবং আইফ্রেমের মধ্যে তুলনা করলে কী দাঁড়ায়?

এখন যেহেতু আপনি জানেন যে ফেন্সড ফ্রেম কী করতে পারে এবং কী করতে পারে না, তাই বিদ্যমান আইফ্রেমের বৈশিষ্ট্যগুলোর সাথে এর তুলনা করাটা দরকারি।

গোপনীয়তা রক্ষার জন্য বেড়াযুক্ত ফ্রেমে বাইরের সাথে যোগাযোগের সুযোগ কম থাকে।

ফেন্সড ফ্রেম কি আইফ্রেমের জায়গা নেবে?

শেষ পর্যন্ত, ফেন্সড ফ্রেম আইফ্রেমের বিকল্প নয় এবং আপনাকে এটি ব্যবহার করতে হবে না। ফেন্সড ফ্রেম হলো এক ধরনের অধিকতর ব্যক্তিগত ফ্রেম, যা তখন ব্যবহার করা হয় যখন বিভিন্ন টপ-লেভেল পার্টিশনের ডেটা একই পেজে প্রদর্শন করার প্রয়োজন হয়।

একই সাইটের আইফ্রেম (যা কখনও কখনও ফ্রেন্ডলি আইফ্রেম নামেও পরিচিত) বিশ্বস্ত কন্টেন্ট হিসেবে বিবেচিত হয়।

বেড়াযুক্ত ফ্রেম ব্যবহার করুন

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

এই সংমিশ্রণের জন্য বর্তমান প্রার্থীদের মধ্যে রয়েছেন:

• TURTLEDOVE API পরিবার থেকে (যা Protected Audience API-এর ভিত্তি), ফেন্সড ফ্রেমগুলো Shared Storage ব্যবহার করে Conversion Lift Measurement-এর সাথে কাজ করতে পারে।
• আরেকটি বিকল্প হলো ফেন্সড ফ্রেমগুলোকে রিড-অনলি করার অথবা আনপার্টিশনড স্টোরেজ অ্যাক্সেস করার অনুমতি দেওয়া।

আরও বিস্তারিত জানতে, ফেন্সড ফ্রেম ব্যবহারের ক্ষেত্রসমূহের ব্যাখ্যাটি দেখুন।

উদাহরণ

একটি ফেন্সড ফ্রেম config অবজেক্ট পেতে হলে, আপনাকে অবশ্যই Protected Audience API-এর runAdAuction() কলে অথবা Shared Storage-এর selectURL() কলে resolveToConfig: true পাস করতে হবে। যদি প্রপার্টিটি যোগ করা না হয় (অথবা false সেট করা থাকে), তাহলে ফলস্বরূপ প্রমিসটি এমন একটি URN-এ রিজলভ হবে যা শুধুমাত্র একটি আইফ্রেমে ব্যবহার করা যাবে।

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

একবার কনফিগটি পেয়ে গেলে, ফ্রেমটিকে সেই কনফিগ দ্বারা নির্দেশিত রিসোর্সে নেভিগেট করার জন্য আপনি এটিকে একটি ফেন্সড ফ্রেমের config অ্যাট্রিবিউটে অ্যাসাইন করতে পারেন। ক্রোমের আগের সংস্করণগুলো resolveToConfig প্রপার্টি সাপোর্ট করে না, তাই নেভিগেট করার আগে আপনাকে অবশ্যই নিশ্চিত করতে হবে যে প্রমিসটি একটি FencedFrameConfig এ রিজলভ হয়েছে।

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

আরও জানতে, বেড়াযুক্ত ফ্রেম এবং বেড়াযুক্ত ফ্রেম কনফিগারেশন ব্যাখ্যাগুলো দেখুন।

হেডার

ফেন্সড ফ্রেম এবং ফেন্সড ফ্রেমের মধ্যে এমবেড করা আইফ্রেম থেকে করা রিকোয়েস্টের জন্য ব্রাউজারগুলো Sec-Fetch-Dest: fencedframe সেট করবে।

Sec-Fetch-Dest: fencedframe

একটি ডকুমেন্টকে ফেন্সড ফ্রেমে লোড করার জন্য সার্ভারকে অবশ্যই Supports-Loading-Mode: fenced-frame রেসপন্স হেডারটি সেট করতে হবে। ফেন্সড ফ্রেমের ভেতরের যেকোনো আইফ্রেমের জন্যও এই হেডারটি অবশ্যই উপস্থিত থাকতে হবে।

Supports-Loading-Mode: fenced-frame

শেয়ার্ড স্টোরেজ প্রসঙ্গ

আপনি এমবেডার থেকে প্রাপ্ত প্রাসঙ্গিক ডেটার সাথে যুক্ত ফেন্সড ফ্রেমে ইভেন্ট-স্তরের ডেটা রিপোর্ট করার জন্য প্রাইভেট অ্যাগ্রিগেশন ব্যবহার করতে চাইতে পারেন। fencedFrameConfig.setSharedStorageContext() মেথডটি ব্যবহার করে, আপনি এমবেডার থেকে কিছু প্রাসঙ্গিক ডেটা, যেমন একটি ইভেন্ট আইডি, প্রোটেক্টেড অডিয়েন্স এপিআই দ্বারা ইনিশিয়েটেড শেয়ার্ড স্টোরেজ ওয়ার্কলেটগুলিতে পাস করতে পারেন।

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

এমবেডার পৃষ্ঠা থেকে, আপনি শেয়ার্ড স্টোরেজ কনটেক্সট হিসাবে প্রাসঙ্গিক ডেটা সেট করতে পারেন:

const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });

// Data from the embedder that you want to pass to the shared storage worklet
frameConfig.setSharedStorageContext('some-event-id');

const frame = document.createElement('fencedframe');
frame.config = frameConfig;

ফেন্সড ফ্রেম থেকে, আপনি ফ্রেমের ইভেন্ট-লেভেল ডেটা শেয়ার্ড স্টোরেজ ওয়ার্কলেটে পাঠাতে পারেন (যা উপরের এমবেডার থেকে আসা প্রাসঙ্গিক ডেটার সাথে সম্পর্কহীন):

const frameData = {
  // Data available only inside the fenced frame
}

await window.sharedStorage.worklet.addModule('reporting-worklet.js');

await window.sharedStorage.run('send-report', {
  data: {
    frameData
  },
});

আপনি sharedStorage.context থেকে এমবেডারের প্রাসঙ্গিক তথ্য এবং data অবজেক্ট থেকে ফ্রেমের ইভেন্ট-স্তরের ডেটা পড়তে পারেন, তারপর Private Aggregation-এর মাধ্যমে সেগুলোকে রিপোর্ট করতে পারেন:

class ReportingOperation {
  convertEventIdToBucket(eventId) { ... }
  convertEventPayloadToValue(info) { ... }

  async run(data) {
    // Data from the embedder
    const eventId = sharedStorage.context;

    // Data from the fenced frame
    const eventPayload = data.frameData;

    privateAggregation.contributeToHistogram({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

একটি ফেন্সড ফ্রেম কনফিগ অবজেক্টে এমবেডারের কনটেক্সট সম্পর্কে আরও জানতে, এক্সপ্লেনারটি দেখুন।

বেড়াযুক্ত ফ্রেম ব্যবহার করে দেখুন

chrome://flags/#enable-fenced-frames -এ দেওয়া Chrome ফ্ল্যাগ ব্যবহার করে Fenced Frame API চালু করুন।

ডায়ালগ বক্সে একাধিক বিকল্প রয়েছে। আমরা আপনাকে * সক্ষম করুন * নির্বাচন করার জন্য দৃঢ়ভাবে সুপারিশ করছি, যা ক্রোমকে নতুন আর্কিটেকচার উপলব্ধ হওয়ার সাথে সাথে স্বয়ংক্রিয়ভাবে আপডেট হতে দেবে।

অন্যান্য বিকল্পগুলো, যেমন ‘Enabled with ShadowDOM’ এবং ‘Enabled with multiple page architecture’ , ভিন্ন ভিন্ন বাস্তবায়ন কৌশল প্রদান করে যা শুধুমাত্র ব্রাউজার ইঞ্জিনিয়ারদের জন্য প্রাসঙ্গিক। বর্তমানে, ‘Enable’ ঠিক ‘Enabled with ShadowDOM’-এর মতোই কাজ করে। ভবিষ্যতে, ‘Enable’ বিকল্পটি ‘Enable with multiple page architecture’-এর সাথে সংযুক্ত হবে।

বৈশিষ্ট্য সনাক্তকরণ

বেড়াযুক্ত ফ্রেম সংজ্ঞায়িত করা হয়েছে কিনা তা নির্ধারণ করতে:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

ফেন্সড ফ্রেম কনফিগারেশনটি উপলব্ধ আছে কিনা তা নির্ধারণ করতে:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

ব্রাউজার সমর্থন

• এমডিএন
• ক্রোম প্ল্যাটফর্মের অবস্থা

অংশগ্রহণ করুন এবং মতামত জানান

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

• গিটহাব : ব্যাখ্যাটি পড়ুন, প্রশ্ন করুন এবং আলোচনা অনুসরণ করুন ।

আরও জানুন

• ক্রোম প্ল্যাটফর্মের অবস্থা
• ব্লিঙ্ক ইনটেন্ট টু প্রোটোটাইপ