דף זה תורגם על ידי Cloud Translation API.

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

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

סטטוס הטמעה

מסמך זה מתאר רכיב HTML חדש: <fencedframe>.

ההצעה של Fenced Frame זמינה עכשיו לציבור הרחב.
סטטוס הפלטפורמה של Chrome

הצעה	סטטוס
שינויים ב-Web API עבור הגדרת הסבר	זמינות: ב-Chrome ברבעון הראשון של 2023.
רכיבי מאקרו של קריאייטיב ב-Fenced Frames לדיווח על מודעות (FFAR) בעיה ב-GitHub	זמינות: ב-Chrome ברבעון השלישי של 2023.
שליחת חיישני נתונים אוטומטיים פעם אחת בעיה ב-GitHub	זמינות: ב-Chrome ברבעון השלישי של 2023.
הגדרות תצורה של Fenced Frames הניתנות לעריכה בעיה ב-GitHub	זמינות: ב-Chrome ברבעון השלישי של 2023.
אפשרות פורמט נוספת לפקודות מאקרו של גודל מודעות מסוג 'קהל מוגן' בעיה ב-GitHub	זמינות: ב-Chrome ברבעון הרביעי של 2023.
משׂואות רשת (beacons) אוטומטיות שנשלחות לכל כתובות האתרים הרשומים בעיה ב-GitHub \| בעיית GitHub	זמינות: ב-Chrome ברבעון הרביעי של 2023.
הפעלת יציאה מקבוצות של תחומי עניין של מודעות מ-Urn iFrames ו-Ad Component Frames (מסגרות של מודעות) בעיה ב-GitHub	זמינות ב-Chrome ברבעון הראשון של 2024
Introduseserve.top_navigation_start/commit בעיה ב-GitHub, בעיה ב-GitHub	זמינות ב-Chrome ברבעון הראשון של 2024
אין להשבית את הגדרת קובצי ה-cookie ב-ReportEvent עד ל-3PCD בעיה ב-GitHub	זמינות ב-Chrome ברבעון הראשון של 2024
הוספת תמיכה באלומות אוטומטיות במסגרות משנה ממקורות שונים בעיה ב-GitHub	זמינות ב-Chrome ברבעון הראשון של 2024

למה אנחנו צריכים פריימים מגודרים?

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

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

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

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

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

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

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

השוואה של חלוקה למחיצות (partitioning) באחסון לפני ואחרי מצב האחסון.

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

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

Fenced Frame היא תכונה של ארגז החול לפרטיות, שבמסגרתה אתרים ברמה העליונה צריכים לחלק את הנתונים למחיצות. הרבה הצעות וממשקי API של ארגז החול לפרטיות נועדו לתת מענה לתרחישי שימוש באתרים שונים, ללא קובצי cookie של צד שלישי או מנגנוני מעקב אחרים. לדוגמה:

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

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

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

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

איך פועלות מסגרות מגודרות?

מסגרות מגודרות משתמשות באובייקט FencedFrameConfig לניווט. ניתן להחזיר את האובייקט הזה ממכרז של Protected Audience API או מפעולת בחירת כתובת URL של אחסון משותף. לאחר מכן, אובייקט config מוגדר כמאפיין config ברכיב ה-Fenced frame. היא שונה מ-iframe שבו כתובת URL או URN אטומים מוקצים למאפיין src. לאובייקט FencedFrameConfig יש מאפיין url לקריאה בלבד. עם זאת, מאחר שתרחישי השימוש הנוכחיים מחייבים הסתרה של כתובת ה-URL בפועל של המשאב הפנימי, המאפיין הזה מחזיר את המחרוזת opaque לאחר הקריאה.

מסגרת מגודרת לא יכולה להשתמש ב-postMessage כדי לתקשר עם כלי ההטמעה שלה. עם זאת, מסגרת מגודרת יכולה להשתמש ב-postMessage עם מסגרות iframe בתוך המסגרת מגודרת.

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

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

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

מה ההבדל בין מסגרות מגודרות ל-iframes?

עכשיו, כשאתם יודעים מה יקרה או לא יתבצעו, כדאי להשוות לתכונות קיימות של iframe.

התכונה	`iframe`	`fencedframe`
הטמעת תוכן	כן	כן
תוכן מוטמע יכול לגשת ל-DOM של הקשר הטמעה	כן	לא
להקשר של הטמעה יש גישה ל-DOM של תוכן מוטמע	כן	לא
מאפיינים ניתנים לצפייה, כמו `name`	כן	לא
כתובות URL (`http://example.com`)	כן	כן (תלוי בתרחיש לדוגמה)
מקור אטום המנוהל על ידי הדפדפן (`urn:uuid`)	לא	כן
גישה לנתונים מאתרים שונים	לא	כן (תלוי בתרחיש לדוגמה)

כדי לשמור על הפרטיות, אפשר להשתמש במסגרות Fenced.

האם מסגרות מגודרות יחליפו את מסגרות iframe?

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

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

שימוש במסגרות מגודרות

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

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

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

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

דוגמאות

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

קבלת הגדרות של גבולות וירטואליים ממכרזים של 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 לפני המעבר:

הגדרת התצורה למאפיין fenced frame (מסגרת מגודרת)

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

למידע נוסף, כדאי לעיין בהסברים על Fenced Frame ו-Fenced Frame config.

כותרות

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

Sec-Fetch-Dest: fencedframe

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

Supports-Loading-Mode: fenced-frame

ההקשר של נפח האחסון המשותף

כדאי להשתמש בצבירה פרטית כדי לדווח על נתונים ברמת האירוע במסגרות מגודרות שמשויכות לנתונים לפי הקשר מהמטמיע. באמצעות השיטה fencedFrameConfig.setSharedStorageContext(), ניתן להעביר נתונים לפי הקשר מסוימים, כמו מזהה אירוע, מההטמעה אל worklet של נפח אחסון משותף שהופעל על ידי 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 של האחסון המשותף (שלא קשורים לנתונים ההקשריים מהכלי המוטמע שלמעלה):

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);

למידע נוסף על ההקשר של כלי ההטמעה באובייקט config של framed framed, עיינו בקטע הסבר.

רוצה לנסות מסגרות מגודרות?

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

בניסויים של Chrome, יש להגדיר את האפשרות 'מופעל' עבור הדגל שנקרא 'הפעלת רכיב המסגרת של Fenced frame'

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

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

זיהוי תכונות

כדי לקבוע אם הוגדרו פריימים מגודרים:

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

כדי לבדוק אם ההגדרה של מסגרת מגודרת זמינה: js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

תמיכת דפדפן

האלמנט <fencedframe> עדיין במצב ניסיוני, כך שהוא נתמך כרגע מ-Chrome 97 ואילך. כרגע הוא לא נתמך על ידי דפדפנים אחרים.

יצירת מעורבות ושיתוף משוב

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

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