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

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

حالة التنفيذ

• تم تحديد موعد إيقافها تدريجيًا.
• نية إطلاق الميزة: إزالة عنصر FencedFrame وواجهات برمجة التطبيقات window.fence
• حالة منصة Chrome

لماذا نحتاج إلى الأُطر المضمّنة المستقلة؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

كيف تعمل الأُطر المضمّنة المستقلة؟

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

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

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

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

يتم توضيح خصائص الأُطر المضمّنة المستقلة بالتفصيل في الـ مستند التوضيحي.

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

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

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

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

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

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

استخدام الأُطر المضمّنة المستقلة

ستعمل الأُطر المضمّنة المستقلة مع واجهات برمجة التطبيقات الأخرى في "مبادرة حماية الخصوصية" لعرض المستندات من أقسام مساحة تخزين مختلفة ضمن صفحة واحدة. تتم مناقشة واجهات برمجة التطبيقات المحتملة.

تشمل المرشّحات الحالية لهذا المزيج ما يلي:

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

لمزيد من التفاصيل، يُرجى الاطّلاع على المستند التوضيحي لحالات استخدام الأُطر المضمّنة المستقلة.

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

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

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

لمزيد من المعلومات، يُرجى الاطّلاع على المستندَين التوضيحيَين لـ الإطار المضمّن المستقل وإعدادات الإطار المضمّن المستقل.

العناوين

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

Sec-Fetch-Dest: fencedframe

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

Supports-Loading-Mode: fenced-frame

سياق Shared Storage

قد تحتاج إلى استخدام Private Aggregation للإبلاغ عن البيانات على مستوى الحدث في الأُطر المضمّنة المستقلة المرتبطة بالبيانات السياقية من أداة التضمين. باستخدام طريقة fencedFrameConfig.setSharedStorageContext()، يمكنك تمرير بعض البيانات السياقية، مثل رقم تعريف الحدث، من أداة التضمين إلى وحدات معالجة Shared Storage التي تبدأها Protected Audience API.

في المثال التالي، نخزّن بعض البيانات المتاحة على صفحة أداة التضمين وبعض البيانات المتاحة في الإطار المضمّن المستقل في Shared Storage. من صفحة أداة التضمين، يتم ضبط رقم تعريف حدث وهمي كسياق Shared Storage. من الإطار المضمّن المستقل، يتم تمرير بيانات الأحداث الخاصة بالإطار.

من صفحة أداة التضمين، يمكنك ضبط البيانات السياقية كسياق Shared Storage:

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;

من الإطار المضمّن المستقل، يمكنك تمرير البيانات على مستوى الحدث من الإطار إلى وحدة معالجة Shared Storage (غير ذات صلة بالبيانات السياقية من أداة التضمين أعلاه):

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 لتفعيل Fenced Frame API على chrome://flags/#enable-fenced-frames.

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

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

رصد الميزات

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

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

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

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

دعم المتصفح

• MDN
• حالة منصة Chrome

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

تتم مناقشة الأُطر المضمّنة المستقلة بشكل نشط وهي خاضعة للتغيير في المستقبل. إذا جرّبت واجهة برمجة التطبيقات هذه وكان لديك ملاحظات، يُسعدنا تلقّيها.

• GitHub: يمكنك قراءة المستند التوضيحي، طرح الأسئلة ومتابعة المناقشة.

مزيد من المعلومات

• حالة منصة Chrome
• نية Blink لإنشاء نموذج أولي