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

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

סטטוס ההטמעה

• מתוכנן להוצאה משימוש.
• הודעה על כוונה להשיק: הסרת הרכיב FencedFrame וממשקי ה-API של window.fence
• סטטוס הפלטפורמה של Chrome

למה צריך fenced frames?

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

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

לדוגמה, אם news.example (הקשר של ההטמעה) מטמיע מודעה מ-shoes.example ב-מסגרת בלי שיתוף נתונים, ‏ 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 כדי לתקשר עם האתר שמטמיע את מסגרת בלי שיתוף נתונים. עם זאת, במסגרת בלי שיתוף נתונים אפשר להשתמש ב-postMessage עם iframe בתוך המסגרת בלי שיתוף נתונים.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

דוגמאות

כדי לקבל אובייקט של מסגרת בלי שיתוף נתונים config, צריך להעביר את resolveToConfig: true לקריאה runAdAuction() של Protected Audience API או לקריאה selectURL() של Shared Storage. אם המאפיין לא נוסף (או אם הוא מוגדר ל-false), אובייקט ה-promise שמתקבל יומר ל-URN שאפשר להשתמש בו רק ב-iframe.

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

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

אחרי שמקבלים את ההגדרה, אפשר להקצות אותה למאפיין config של מסגרת מוגבלת כדי לנווט את המסגרת למשאב שמיוצג על ידי ההגדרה. גרסאות קודמות של Chrome לא תומכות במאפיין resolveToConfig, ולכן עדיין צריך לוודא שאובייקט ה-promise נפתר ל-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.

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

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

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 להתעדכן אוטומטית לארכיטקטורה חדשה כשהיא תהיה זמינה.

האפשרויות האחרות, מופעל עם ShadowDOM ומופעל עם ארכיטקטורה של דפים מרובים, מציעות אסטרטגיות הטמעה שונות שרלוונטיות רק למהנדסי דפדפנים. היום, 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