סקירה כללית של Fenced Frame

הטמעה מאובטחת של תוכן בדף בלי לשתף נתונים מאתרים שונים.

סטטוס ההטמעה

במסמך הזה מפורט רכיב HTML חדש: <fencedframe>.

• זמינה לכלל המשתמשים ב-Chrome.
• סטטוס הפלטפורמה של Chrome.

למה צריך fenced frames?

‫Fenced Frame (<fencedframe>) הוא רכיב HTML להטמעת תוכן, בדומה ל-iframe. בשונה מ-iframes, מסגרת מגודרת מגבילה את התקשורת עם הקשר ההטמעה שלה כדי לאפשר למסגרת גישה לנתונים מאתרים שונים בלי לשתף אותם עם הקשר ההטמעה. יכול להיות שחלק מממשקי ה-API של ארגז החול לפרטיות ידרשו עיבוד של מסמכים מסוימים בתוך fenced frame.

באופן דומה, אי אפשר לשתף עם המסגרת המוגבלת נתונים מאינטראקציה ישירה בהקשר של ההטמעה.

לדוגמה, אם news.example (ההקשר של ההטמעה) מטמיע מודעה מ-shoes.example ב-fenced frame, ‏ news.example לא יכול להעביר נתונים מ-shoes.example, ו-shoes.example לא יכול ללמוד נתונים מאינטראקציה ישירה (First-Party) מ-news.example.

שיפור הפרטיות באתרים שונים באמצעות חלוקת האחסון למחיצות

בזמן הגלישה באינטרנט, סביר להניח שצפיתם במוצרים באתר מסוים, ואז ראיתם אותם שוב במודעה באתר אחר לגמרי.

כיום, הטכניקה הזו של פרסום מבוססת בעיקר על טכנולוגיית מעקב שמשתמשת בקובצי Cookie של צד שלישי כדי לשתף מידע בין אתרים.

צוות Chrome עובד על חלוקת האחסון, שמפרידה את האחסון בדפדפן לפי אתר. בלי חלוקה למחיצות, אם iframe מהאתר shoes.example מוטמע באתר news.example, וה-iframe הזה מאחסן ערך באחסון, אפשר לקרוא את הערך הזה מהאתר shoes.example. כשמבצעים חלוקה של האחסון, לא ניתן יותר לשתף אחסון בין iframe באתרים שונים, ולכן shoes.example לא יכול לגשת למידע שאוחסן על ידי ה-iframe. אם ה-iframe מוצג מ-*.shoes.example ומוטמע ב-*.shoes.example, אחסון הדפדפן ישותף כי הם נחשבים לאותו אתר.

חלוקת האחסון תתבצע בממשקי API סטנדרטיים לאחסון, כולל LocalStorage‏, IndexedDB וקובצי Cookie. בעולם עם חלוקה למחיצות, דליפת מידע בין מקומות אחסון של צד ראשון תצומצם באופן משמעותי.

עבודה עם נתונים מאתרים שונים

Fenced frames היא תכונה בארגז החול לפרטיות שמציעה לאתרים ברמה העליונה לבצע חלוקה של הנתונים. הרבה הצעות ו-API של ארגז החול לפרטיות נועדו לתת מענה לתרחישי שימוש באתרים שונים בלי קובצי Cookie של צד שלישי או מנגנוני מעקב אחרים. לדוגמה:

• ‫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 ב-fenced frame כדי לתקשר עם האתר שמטמיע אותו. עם זאת, במסגרת מגודרת אפשר להשתמש ב-postMessage עם iframe בתוך המסגרת המגודרת.

מסגרות מגודרות יבודדו מהאתר של בעל התוכן בדרכים אחרות. לדוגמה, לבעל האתר לא תהיה גישה ל-DOM בתוך fenced frame, ול-fenced frame לא תהיה גישה ל-DOM של בעל האתר. בנוסף, מאפיינים כמו name – שאפשר להגדיר להם כל ערך ולעקוב אחריהם באמצעות בעל התוכן הדיגיטלי – לא זמינים ב-Fenced Frames.

מסגרות מגודרות מתנהגות כמו הקשר גלישה ברמה העליונה (למשל כרטיסיית דפדפן). למרות שבתרחישי שימוש מסוימים (כמו מודעות ריטרגטינג שמבוססות על תחומי עניין) יכול להיות שפריים מגודר יכיל נתונים מאתרים שונים (כמו קבוצת אינטרס ב-Protected Audience API), הפריים לא יכול לגשת לאחסון או לקובצי Cookie שלא חולקו למחיצות. ל-fenced frame יש גישה לקובץ cookie ייחודי שמבוסס על nonce ולמחיצת אחסון.

במאמר הזה יש הסבר מפורט על המאפיינים של fenced frames.

מה ההבדל בין fenced frames לבין iframes?

אחרי שהבנתם מה אפשר ומה אי אפשר לעשות עם fenced frames, כדאי להשוות אותם לתכונות קיימות של iframe.

כדי לשמור על הפרטיות, יש פחות אפשרויות לתקשורת חיצונית ב-Fenced frames.

האם fenced frames יחליפו את ה-iframes?

בסופו של דבר, fenced frames לא יחליפו את ה-iframe ולא תצטרכו להשתמש בהם. מסגרות מגודרות הן מסגרות פרטיות יותר לשימוש כשצריך להציג נתונים ממחיצות שונות ברמה העליונה באותו דף.

‫iframe מאותו אתר (שנקרא לפעמים iframe ידידותי) נחשב לתוכן מהימן.

שימוש במסגרות בלי שיתוף נתונים

מסגרות מגודרות יפעלו בשילוב עם ממשקי API אחרים של ארגז החול לפרטיות כדי להציג מסמכים ממחיצות אחסון שונות בדף אחד. אנחנו דנים באפשרויות של ממשקי API.

המועמדים הנוכחיים לשילוב הזה כוללים:

• ממשפחת TURTLEDOVE API (שמהווה את הבסיס ל-Protected Audience API), אפשר להשתמש ב-fenced frames עם Conversion Lift Measurement באמצעות Shared Storage.
• אפשרות נוספת היא לאפשר ל-fenced frames להיות לקריאה בלבד או לגשת לאחסון לא מחולק.

פרטים נוספים זמינים במאמר הסבר על תרחישי שימוש ב-Fenced Frames.

דוגמאות

כדי לקבל אובייקט של fenced frame‏ (config), צריך להעביר את resolveToConfig: true לקריאה של Protected Audience API‏ (runAdAuction()) או לקריאה של Shared Storage‏ (selectURL()). אם המאפיין לא נוסף (או אם הוא מוגדר ל-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 config.

כותרות

בדפדפנים, הערך Sec-Fetch-Dest: fencedframe יוגדר לבקשות שנשלחות ממסגרות מגודרות וממסגרות iframe שמוטמעות בתוך מסגרת מגודרת.

Sec-Fetch-Dest: fencedframe

השרת צריך להגדיר את כותרת התגובה Supports-Loading-Mode: fenced-frame כדי שטעינת המסמך תתבצע במסגרת מוגבלת. הכותרת צריכה להיות נוכחת גם בכל מסגרת iframe בתוך מסגרת מגודרת.

Supports-Loading-Mode: fenced-frame

הקשר של Shared Storage

יכול להיות שתרצו להשתמש ב-Private Aggregation כדי לדווח על נתונים ברמת האירוע ב-fenced frames שמשויכים לנתונים הקשריים מהאתר שמטמיע את הפרסומת. באמצעות השיטה fencedFrameConfig.setSharedStorageContext(), אפשר להעביר נתונים הקשריים מסוימים, כמו מזהה אירוע, מהדף המטמיע אל ה-worklets של Shared Storage שהופעלו על ידי Protected Audience API.

בדוגמה הבאה, אנחנו מאחסנים באחסון משותף חלק מהנתונים שזמינים בדף ההטמעה וחלק מהנתונים שזמינים ב-fenced frame. בדף ההטמעה, מזהה אירוע מדומה מוגדר כהקשר של נפח האחסון המשותף. הנתונים של אירוע ה-frame מועברים מ-frame מוגבל.

בדף ההטמעה, אפשר להגדיר נתונים הקשריים כהקשר של האחסון המשותף:

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;

מתוך המסגרת המוגבלת, אפשר להעביר נתונים ברמת האירוע מהמסגרת אל ה-worklet של 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);

מידע נוסף על ההקשר של ההטמעה באובייקט ההגדרה של fenced frame זמין בהסבר.

רוצים לנסות מסגרות בלי שיתוף נתונים?

משתמשים בדגלים של Chrome כדי להפעיל את Fenced Frame API ב-chrome://flags/#enable-fenced-frames.

יש כמה אפשרויות בתיבת הדו-שיח. מומלץ מאוד לבחור באפשרות *הפעלה*, שמאפשרת ל-Chrome להתעדכן אוטומטית לארכיטקטורה חדשה כשהיא תהיה זמינה.

האפשרויות האחרות, Enabled with ShadowDOM ו-Enabled with multiple page architecture, מציעות אסטרטגיות הטמעה שונות שרלוונטיות רק למהנדסי דפדפנים. היום, האפשרות Enable פועלת כמו האפשרות Enabled with ShadowDOM. בעתיד, האפשרות הפעלה תמופה לאפשרות הפעלה עם ארכיטקטורה של כמה דפים.

זיהוי תכונות

כדי לבדוק אם הוגדרו fenced frames:

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

כדי לבדוק אם ההגדרה של fenced frame זמינה:

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

תמיכה בדפדפנים

• MDN
• סטטוס הפלטפורמה של Chrome

השתתפות ושיתוף משוב

הנושא של Fenced Frames נמצא כרגע בתהליכי דיון ופיתוח, ויכול להיות שהוא ישתנה בעתיד. אם תנסו את ה-API הזה ויהיה לכם משוב, נשמח לשמוע אותו.

• ‫GitHub: אפשר לקרוא את ההסבר, לשאול שאלות ולהשתתף בדיונים.

למידע נוסף

• סטטוס הפלטפורמה של Chrome
• Blink Intent to Prototype