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

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

حالة التنفيذ

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

• متاحة للجميع في Chrome
• حالة منصة Chrome

لماذا نحتاج إلى إطارات محصّنة؟

العنصر Fenced Frame (<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 وملفات تعريف الارتباط. في عالم مقسّم، سيتم الحدّ بشكل كبير من تسرُّب المعلومات بين مساحات التخزين التابعة للطرف الأول.

العمل مع بيانات المواقع الإلكترونية المختلفة

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

• تتيح 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 المتوافقة) محتوًى موثوقًا به.

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

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

تشمل المرشّحات الحالية لهذه التركيبة ما يلي:

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

لمزيد من التفاصيل، يُرجى الاطّلاع على شرح حالات استخدام Fenced Frames.

أمثلة

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

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

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.

العناوين

ستضبط المتصفّحات قيمة 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.

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

من صفحة أداة التضمين، يمكنك ضبط البيانات السياقية كسياق مساحة التخزين المشتركة:

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، ثم إعداد تقارير عنها من خلال "التجميع الخاص":

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"

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

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

• GitHub: يمكنك الاطّلاع على الشرح وطرح الأسئلة ومتابعة المناقشة.

تعرَّف على مزيد من المعلومات

• حالة "منصة Chrome"
• Blink Intent to Prototype