نظرة عامة على الإطارات المضمّنة

يمكنك تضمين المحتوى بشكل آمن في صفحة بدون مشاركة البيانات بين المواقع الإلكترونية.

حالة التنفيذ

يوضّح هذا المستند عنصر HTML جديدًا: <fencedframe>.

• أصبح اقتراح الإطارات المعتمِدة متاحًا للجمهور الآن.
• حالة النظام الأساسي Chrome

الاقتراح	الحالة
تغييرات Web API من أجل urn إلى config شرح	ستتوفّر هذه الميزة في Chrome في الربع الأول من عام 2023.
وحدات ماكرو للمواد الإبداعية في الإطارات المضمّنة لإعداد تقارير الإعلانات (FFAR) مشكلة GitHub	ستتوفّر هذه الميزة في Chrome في الربع الثالث من عام 2023.
إرسال الإشارات التلقائية مرة واحدة مشكلة GitHub	ستتوفّر هذه الميزة في Chrome في الربع الثالث من عام 2023.
إعدادات Fenced Frames القابلة للتسلسل مشكلة في GitHub	ستتوفّر هذه الميزة في Chrome في الربع الثالث من عام 2023.
خيار تنسيق إضافي لوحدات ماكرو حجم الإعلان المحمي للجمهور المحمي مشكلة GitHub	ستتوفّر هذه الميزة في Chrome في الربع الرابع من عام 2023.
إرسال الإشارات التلقائية إلى جميع عناوين URL المسجَّلة مشكلة GitHub | مشكلة GitHub	ستتوفّر هذه الميزة في Chrome في الربع الرابع من عام 2023.
تفعيل خيار مغادرة مجموعات الاهتمامات الإعلانية من إطارات iframe في Urn وإطارات مكونات الإعلانات مشكلة GitHub	متوفّرة في Chrome في الربع الأول من عام 2024
قدِّم طلبًا لـ accounts.top_navigation_start/commit في GitHub، ومشكلة في GitHub.	متوفّرة في Chrome في الربع الأول من عام 2024
عدم إيقاف إعداد ملفات تعريف الارتباط في ReportEvent حتى ملف 3PCD مشكلة في GitHub	متوفّرة في Chrome في الربع الأول من عام 2024
إتاحة استخدام الإشارات التلقائية في إطارات فرعية متعددة المصادر مشكلة GitHub	متوفّرة في Chrome في الربع الأول من عام 2024

لماذا نحتاج إلى إطارات شبكية؟

الإطار المسوّى (<fencedframe>) هو عنصر HTML للمحتوى المضمّن، يشبه إطار iframe. على عكس إطارات iframe، يقيّد الإطار السيّاج التواصل مع سياق التضمين للسماح للإطار بالوصول إلى البيانات على عدّة مواقع إلكترونية بدون مشاركتها مع سياق التضمين. قد تتطلّب بعض واجهات برمجة تطبيقات "مبادرة حماية الخصوصية" مستندات محدّدة لعرضها ضمن إطار مضمّن فيها.

وبالمثل، لا يمكن مشاركة أي بيانات الطرف الأول في سياق التضمين مع الإطار المحيط.

على سبيل المثال، لنفترض أنّ news.example (سياق التضمين) يضمّ إعلانًا من shoes.example ضمن إطار مضمّن مستقل. لا يمكن لـ news.example استخراج البيانات من إعلان shoes.example، ولا يمكن لـ shoes.example معرفة بيانات الطرف الأول من news.example.

تعزيز الخصوصية في جميع المواقع الإلكترونية باستخدام ميزة تقسيم مساحة التخزين

أثناء تصفحك للويب، ربما تكون قد اطّلعت على منتجات على أحد المواقع الإلكترونية، ثم رأيتها تظهر مرة أخرى في إعلان على موقع إلكتروني مختلف تمامًا.

أما اليوم، فيحصل أسلوب الإعلان هذا بصفة أساسية من خلال تقنية التتبع التي تستخدم ملفات تعريف الارتباط التابعة لجهة خارجية في مشاركة المعلومات عبر المواقع الإلكترونية. وهذه هي التقنية التي التزام Chrome بإيقافها تدريجيًا واستبدالها بالمزيد من المتغيرات التي تحافظ على الخصوصية.

يعمل Chrome على تقسيم مساحة التخزين، ما يفصل مساحة التخزين في المتصفّح لكل موقع إلكتروني. في الوقت الحالي، إذا كان أحد إطارات iframe من shoes.example مضمّنًا في news.example، وكان iframe هذا يخزّن قيمة في مساحة التخزين، يمكن قراءة هذه القيمة من موقع shoes.example الإلكتروني. عند تقسيم مساحة التخزين، ستتوقف إطارات iframe من مواقع إلكترونية متعددة عن مشاركة مساحة التخزين، وبالتالي لن يتمكن تطبيق shoes.example من الوصول إلى المعلومات التي خزّنها إطار iframe. إذا تم عرض إطار iframe من خلال *.shoes.example وتضمينه في *.shoes.example، ستتم مشاركة مساحة التخزين في المتصفّح لأنّه يعتبر الموقع الإلكتروني نفسه.

سيتم تطبيق ميزة تقسيم مساحة التخزين على واجهات برمجة التطبيقات العادية للتخزين، بما في ذلك LocalStorage وIndexedDB وملفات تعريف الارتباط. في عالمنا المقسَّم، سيتم تقليل تسرُّب المعلومات في مساحة تخزين الطرف الأول بشكل كبير.

العمل على البيانات من مواقع إلكترونية متعددة

إنّ "الإطارات المقسَّمة" هي ميزة ضمن "مبادرة حماية الخصوصية" تقترح على المواقع الإلكترونية ذات المستوى الأعلى أن تقسّم البيانات. تهدف العديد من اقتراحات "مبادرة حماية الخصوصية" وواجهات برمجة التطبيقات إلى تلبية حالات الاستخدام على مواقع إلكترونية متعددة بدون استخدام ملفات تعريف الارتباط التابعة لجهات خارجية أو غيرها من آليات التتبّع. مثال:

• تتيح Protected Audience API عرض الإعلانات التي تستهدِف الاهتمامات بطريقة تحافظ على الخصوصية.
• مساحة التخزين المشتركة تتيح الوصول إلى بيانات غير مقسّمة على عدة مواقع إلكترونية في بيئة آمنة.

لنتعرّف على طريقة عمل الإطارات المضمّنة مع Protected Audience API. باستخدام Protected Audience API، يتم تسجيل اهتمامات المستخدِم على الموقع الإلكتروني للمعلِن في مجموعات الاهتمامات، إلى جانب الإعلانات التي قد تهمه. وبعد ذلك، على موقع منفصل (يُعرف باسم "الناشر")، يتم إجراء مزاد إعلانات على الإعلانات المسجَّلة في مجموعات الاهتمامات الملائمة، ويتم عرض الإعلان الفائز في إطار مضمّن مستقل.

إذا عرض الناشر الإعلان الفائز في إطار iframe وكان بإمكان النص البرمجي قراءة سمة src لإطار iframe، يمكن للناشر استنتاج معلومات حول اهتمامات الزائر من عنوان URL لذلك الإعلان. لا يعني ذلك الحفاظ على الخصوصية.

باستخدام إطار مضمّن مستقل، يمكن للناشر عرض إعلان يطابق اهتمامات الزوار، ولكن لن تكون مجموعة الاهتمامات src ومجموعة الاهتمامات معروفة إلا للمعلن الوارد في الإطار. لم يتمكن الناشر من الوصول إلى هذه المعلومات.

ما هي آلية عمل الإطارات المضمّنة؟

تستخدِم الإطارات المضمّنة العنصر FencedFrameConfig للتنقّل. يمكن عرض هذا العنصر من مزاد Protected Audience API أو عملية اختيار عنوان URL الخاص بـ "مساحة التخزين المشتركة". بعد ذلك، يتم ضبط عنصر الضبط باعتباره السمة config على عنصر الإطار المضمَّن. ويختلف هذا عن إطار iframe حيث يتم تعيين عنوان URL أو URN غير شفاف للسمة src. يحتوي الكائن FencedFrameConfig على السمة url للقراءة فقط، ومع ذلك، بما أنّ حالات الاستخدام الحالية تتطلّب إخفاء عنوان URL الفعلي للمورد الداخلي، تعرض هذه السمة السلسلة opaque عند قراءتها.

لا يمكن للإطار المحيط استخدام postMessage للتواصل مع أداة التضمين. ومع ذلك، يمكن للإطار المحاط بحدود استخدام postMessage مع إطارات iframe داخل الإطار المحمي.

وسيتم عزل اللقطات المضمّنة عن الناشر بطرق أخرى. على سبيل المثال، لن يتمكّن الناشر من الوصول إلى نموذج العناصر في المستند (DOM) داخل إطار مضمّن مستقل، ولن يتمكن الإطار المحيط من الوصول إلى نموذج العناصر في المستند (DOM) للناشر. بالإضافة إلى ذلك، فإن سمات مثل name التي يمكن ضبطها على أي قيمة ويراقبها الناشر غير متاحة في الإطارات المضمّنة.

تتصرف الإطارات المضمّنة باعتبارها سياق تصفّح عالي المستوى (مثل علامة تبويب في المتصفح). مع أنّ الإطار المسوّر في حالات استخدام معيّنة (مثل opaque-ads) يمكن أن يحتوي على بيانات من عدّة مواقع إلكترونية (مثل مجموعة الاهتمامات Protected Audience API)، لا يمكن للإطار الوصول إلى مساحة التخزين غير المقسَّمة أو ملفات تعريف الارتباط. يمكن لإطار opaque-ads المسوّد الوصول إلى قسم فريد لملفات تعريف الارتباط وسعة التخزين لا يعتمد على القِيَم.

يوضّح هذا الشرح بالتفصيل خصائص الإطارات المضمّنة بين المباني.

ما الفرق بين الإطارات المضمّنة وإطارات iframe؟

الآن بعد أن عرفت ما ستفعله الإطارات المضمّنة وما لن تفعله، من المفيد المقارنة بينها وبين ميزات iframe الحالية.

إبراز	iframe	fencedframe
تضمين المحتوى	نعم	نعم
يمكن للمحتوى المضمَّن الوصول إلى نموذج العناصر في المستند (DOM) لسياق التضمين.	نعم	لا
يمكن للسياق المضمّن الوصول إلى نموذج كائن المستند (DOM) للمحتوى المضمّن.	نعم	لا
السمات القابلة للملاحظة، مثل name	نعم	لا
عناوين URL (http://example.com)	نعم	نعم (تعتمد على حالة الاستخدام)
مصدر مبهم يديره المتصفّح (urn:uuid)	لا	نعم
الوصول إلى البيانات على مستوى المواقع الإلكترونية المختلفة	لا	نعم (يعتمد ذلك على حالة الاستخدام)

توفِّر الإطارات المضمّنة حدودًا أقل من خيارات التواصل الخارجية للحفاظ على الخصوصية.

هل ستحل الإطارات المضمّنة محل إطارات iframe؟

في النهاية، لن تحلّ الإطارات المضمّنة محلّ إطارات iframe ولن تحتاج إلى استخدامها. وتُعدّ الإطارات المتحدّة إطارًا أكثر خصوصية للاستخدام عندما يجب عرض البيانات من مختلف الأقسام ذات المستوى الأعلى على الصفحة نفسها.

تُعد إطارات iframe من الموقع نفسه (المعروفة أحيانًا باسم إطارات iframe المتوافقة) محتوى موثوقًا به.

استخدام الإطارات المضمّنة بين الإطارات

ستعمل الإطارات Fenced Frame مع واجهات برمجة التطبيقات الأخرى "Privacy Sandbox API" لعرض المستندات من أقسام مختلفة خاصة بمساحة تخزين ضمن صفحة واحدة. واجهات برمجة التطبيقات المحتملة قيد المناقشة حاليًا.

من بين المرشّحين الحاليين لهذه المجموعة ما يلي:

• من مجموعة TURTLEDOVE API (التي تشكّل أساس واجهة Protected Audience API)، يمكن أن تعمل الإطارات المضمّنة مع ميزة قياس تحسين الإحالات الناجحة باستخدام مساحة التخزين المشتركة.
• ويتوفّر خيار آخر، وهو السماح بأن تكون الإطارات المضمّنة للقراءة فقط أو الوصول إلى مساحة التخزين غير المقسَّمة.

للتعرّف على مزيد من التفاصيل، يُرجى الاطّلاع على الشرح الخاص بحالات استخدام ميزة "الإطارات المعتمِدة" (Fenced Frames).

أمثلة

للحصول على عنصر config ضمن إطار مضمّن مستقل، يجب تمرير resolveToConfig: true إلى طلب runAdAuction() من Protected Audience API أو طلب selectURL() من مساحة التخزين المشتركة. في حال عدم إضافة الموقع الإلكتروني (أو ضبطه على false)، سيتم تحويل الوعد الناتج إلى رقم URN لا يمكن استخدامه إلا في إطار iframe.

الحصول على إعدادات الإطارات المضمّنة في Protected Audience API من خلال مزاد Protected Audience API

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

الحصول على إعدادات الإطار المستقل من اختيار عنوان URL لمساحة التخزين المشتركة

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

بعد الحصول على الإعدادات، يمكنك ضبطها على سمة config الخاصة بإطار مضمّن لنقل الإطار إلى المورد الذي يمثّله الإعداد. لا تتوافق الإصدارات القديمة من Chrome مع السمة resolveToConfig، لذا لا يزال عليك تأكيد أنّه تم حلّ المشكلة في FencedFrameConfig قبل الانتقال إلى الصفحة التالية:

ضبط الإعدادات على سمة الإطار المضمَّن

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

للمزيد من المعلومات، يُرجى الاطّلاع على الشروحَين Fenced Frame وFenced Frame config.

العناوين

ستعمل المتصفّحات على ضبط Sec-Fetch-Dest: fencedframe للطلبات التي تم إجراؤها من الإطارات المضمّنة وإطارات iframe المضمّنة داخل إطار مضمَّن.

Sec-Fetch-Dest: fencedframe

يجب أن يضبط الخادم عنوان الاستجابة Supports-Loading-Mode: fenced-frame ليتم تحميل المستند في إطار مضمّن فيه. يجب أن يكون العنوان متاحًا لأي إطارات iframe داخل إطار مضمّن أيضًا.

Supports-Loading-Mode: fenced-frame

سياق مساحة التخزين المشتركة

يمكنك استخدام "التجميع الخاص" للإبلاغ عن البيانات على مستوى الحدث في الإطارات المضمّنة المرتبطة بالبيانات السياقية من أداة التضمين. باستخدام طريقة fencedFrameConfig.setSharedStorageContext()، يمكنك تمرير بعض البيانات السياقية، مثل معرّف الحدث، من أداة التضمين إلى مهام مساحة التخزين المشتركة التي تبدأها Protected Audience 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، ثم الإبلاغ عنها من خلال التجميع الخاص:

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.sendHistogramReport({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

لمعرفة المزيد من المعلومات عن سياق أداة التضمين في كائن إعدادات إطار مضمّن، يمكنك الاطّلاع على الشرح.

تجربة الإطارات المضمّنة بين الإطارات

استخدِم علامات Chrome لتفعيل واجهة برمجة تطبيقات Fenced Frame API على chrome://flags/#enable-fenced-frames.

هناك خيارات متعددة في مربع الحوار. ننصحك بشدة بتحديد *تفعيل*، الذي يسمح لمتصفِّح Chrome بالتحديث تلقائيًا إلى البنية الجديدة عند توفّرها.

الخياران الآخران، مفعّلان باستخدام ShadowDOM ومفعّل مع بنية صفحات متعددة، يقدّمان استراتيجيات تنفيذ مختلفة ذات صلة بمهندسي المتصفّح فقط. اليوم، يعمل الخيار تفعيل بالطريقة نفسها التي يعمل بها تم التفعيل باستخدام ShadowDOM. في المستقبل، سيتم ضبط الخيار تفعيل على تفعيل باستخدام بنية صفحات متعددة.

رصد الميزات

لتحديد ما إذا تم تحديد اللقطات المضمّنة:

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

لتحديد ما إذا كانت إعدادات الإطار المضمَّن متاحة: js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

المتصفحات المتوافقة

لا يزال العنصر <fencedframe> في الوضع التجريبي، لذا فهو متوافق حاليًا مع الإصدار 97 من Chrome والإصدارات الأحدث. في الوقت الحالي، لا يمكن استخدام هذه العلامة مع المتصفحات الأخرى.

التفاعل ومشاركة الملاحظات

الإطارات Fenced Frame قيد المناقشة النشطة وهي عرضة للتغيير في المستقبل. إذا جرَّبت واجهة برمجة التطبيقات هذه وحصلت على ملاحظات، يسعدنا تلقّيها.

• GitHub: يمكنك قراءة الشرح وطرح الأسئلة ومتابعة المناقشة.
• دعم المطوّرين: يمكنك طرح الأسئلة والانضمام إلى المناقشات في مستودع دعم المطوّرين في "مبادرة حماية الخصوصية".

التعرف على المزيد

• حالة النظام الأساسي Chrome
• وضْع نية الشراء إلى إنشاء نموذج أولي