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

ক্রস-সাইট ডেটা শেয়ার না করেই নিরাপদে কোনও পৃষ্ঠায় কন্টেন্ট এম্বেড করুন।

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

এই ডকুমেন্টটি একটি নতুন HTML উপাদানের রূপরেখা প্রদান করে: <fencedframe> ।

• In general availability in Chrome.
• Chrome Platform Status.

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

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

একইভাবে, এম্বেডিং প্রসঙ্গে কোনও প্রথম পক্ষের ডেটা বেড়াযুক্ত ফ্রেমের সাথে ভাগ করা যাবে না।

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

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

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

আজ, এই বিজ্ঞাপন কৌশলটি মূলত ট্র্যাকিং প্রযুক্তির মাধ্যমে অর্জন করা হয় যা সাইট জুড়ে তথ্য ভাগ করে নেওয়ার জন্য তৃতীয় পক্ষের কুকিজ ব্যবহার করে।

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

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

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

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

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

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

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

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

বেড়াযুক্ত ফ্রেম কিভাবে কাজ করে?

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

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

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

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

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

বেড়াযুক্ত ফ্রেমগুলি আইফ্রেমের সাথে কীভাবে তুলনা করে?

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

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

বেড়াযুক্ত ফ্রেম কি আইফ্রেমগুলিকে প্রতিস্থাপন করবে?

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

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

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

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

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

• TURTLEDOVE API পরিবার থেকে (যা সুরক্ষিত শ্রোতা API এর ভিত্তি), ফেন্সড ফ্রেমগুলি Shared Storage ব্যবহার করে রূপান্তর উত্তোলন পরিমাপের সাথে কাজ করতে পারে।
• আরেকটি বিকল্প হল বেড়াযুক্ত ফ্রেমগুলিকে কেবল পঠনযোগ্য করার অনুমতি দেওয়া অথবা পার্টিশনবিহীন স্টোরেজ অ্যাক্সেস করা ।

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

উদাহরণ

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

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

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

কনফিগারেশনটি পাওয়ার পর, আপনি এটি একটি fenced frame এর config অ্যাট্রিবিউটে অ্যাসাইন করতে পারেন যাতে ফ্রেমটি কনফিগারেশন দ্বারা প্রতিনিধিত্ব করা রিসোর্সে নেভিগেট করা যায়। Chrome এর পূর্ববর্তী সংস্করণগুলি 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() পদ্ধতি ব্যবহার করে, আপনি কিছু প্রাসঙ্গিক ডেটা, যেমন একটি ইভেন্ট আইডি, এম্বেডার থেকে প্রোটেক্টেড অডিয়েন্স API দ্বারা শুরু করা শেয়ার্ড স্টোরেজ ওয়ার্কলেটে প্রেরণ করতে পারেন।

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

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

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 এ Fenced Frame API সক্ষম করতে Chrome ফ্ল্যাগ ব্যবহার করুন ।

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

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

Feature detection

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

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

বেড়াযুক্ত ফ্রেম কনফিগারেশন উপলব্ধ কিনা তা নির্ধারণ করতে:

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

ব্রাউজার সাপোর্ট

• এমডিএন
• Chrome প্ল্যাটফর্মের স্থিতি

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

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

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

আরও জানুন

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