הפיכת האתר שלך "מבודד ממקורות שונים" באמצעות COOP ו-COEP

כדאי להשתמש ב-COOP וב-COEP כדי להגדיר סביבה מבודדת ממקורות שונים ולהפעיל תכונות מתקדמות כמו SharedArrayBuffer, performance.measureUserAgentSpecificMemory() וטיימר ברזולוציה גבוהה עם דיוק משופר.

Eiji Kitamura

שימו לב: SharedArrayBuffer ב-Chrome למחשב דורש חסימה לגישה מדומיינים אחרים החל מגרסה 92 של Chrome. מידע נוסף זמין במאמר עדכוני SharedArrayBuffer ב-Android Chrome 88 וב-Desktop Chrome 92.

עדכונים

• 21 ביוני 2022: צריך לשים לב גם לסקריפטים של Worker כשמפעילים בידוד בין מקורות שונים. הוספתי כמה הסברים.
• 5 באוגוסט 2021: JS Self-Profiling API הוזכר כאחד מממשקי ה-API שנדרשת עבורם בידוד בין מקורות שונים, אבל בעקבות שינוי הכיוון האחרון, הוא הוסר.
• 6 במאי 2021: על סמך המשוב והבעיות שדווחו, החלטנו לשנות את ציר הזמן של SharedArrayBufferהשימוש ב-SharedArrayBuffer באתרים שלא מבודדים מדומיינים אחרים כך שהשימוש יוגבל ב-Chrome M92.
• 16 באפריל 2021: הוספנו הערות לגבי מצב חדש של COEP ללא אישורים ו-COOP same-origin-allow-popups כתנאי פחות מחמיר לבידוד בין מקורות שונים.
• 5 במרץ 2021: הסרנו את המגבלות על הפונקציות SharedArrayBuffer,‏ performance.measureUserAgentSpecificMemory() וניפוי הבאגים, שמופעלות עכשיו באופן מלא ב-Chrome 89. נוספו יכולות עתידיות, performance.now() ו-performance.timeOrigin, שיהיו מדויקות יותר.
• 19 בפברואר 2021: הוספנו הערה לגבי מדיניות התכונות allow="cross-origin-isolated" ופונקציונליות ניפוי הבאגים בכלי הפיתוח.
• 15 באוקטובר 2020: self.crossOriginIsolated זמין מגרסה Chrome 87. בהתאם לכך, document.domain הוא קבוע כש-self.crossOriginIsolated מחזירה true. ‫performance.measureUserAgentSpecificMemory() מסיימת את תקופת הניסיון שלה, ומופעלת כברירת מחדל ב-Chrome 89. התכונה Shared Array Buffer ב-Android Chrome תהיה זמינה החל מגרסה Chrome 88.

חלק מ-API האינטרנט מגדילים את הסיכון למתקפות בערוץ צדדי כמו Spectre. כדי לצמצם את הסיכון הזה, דפדפנים מציעים סביבה מבודדת שנקראת 'מבודד ממקורות שונים' (cross-origin isolated). במצב מבודד ממקורות שונים, דף האינטרנט יוכל להשתמש בתכונות עם הרשאות מיוחדות, כולל:

תכונות שיהיו זמינות מאחורי מצב מבודד ממקורות שונים.

API	תיאור
SharedArrayBuffer	נדרש עבור שרשורים של WebAssembly. האפשרות הזו זמינה החל מ-Chrome 88 ב-Android. גרסת המחשב מופעלת כרגע כברירת מחדל בעזרת בידוד אתרים, אבל תידרש חסימה לגישה מדומיינים אחרים, ו היא תושבת כברירת מחדל ב-Chrome 92.
performance.measureUserAgentSpecificMemory()	התכונה זמינה מגרסה Chrome 89.
performance.now(), performance.timeOrigin	האפשרות הזו זמינה כרגע בדפדפנים רבים, והרזולוציה מוגבלת ל-100 מיקרו-שניות ומעלה. בבידוד בין מקורות שונים, הרזולוציה יכולה להיות 5 מיקרו-שניות ומעלה.

המצב 'פרטים מבודדים מרובי מקורות' גם מונע שינויים ב-document.domain. (האפשרות לשנות את document.domain מאפשרת תקשורת בין מסמכים מאותו האתר, ונחשבת לפרצה במדיניות המקור הזהה).

כדי להפעיל את המצב של בידוד ממקורות שונים, צריך לשלוח את כותרות ה-HTTP הבאות במסמך הראשי:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

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

כדי לבדוק אם דף אינטרנט מבודד מדומיינים אחרים, צריך לבדוק את self.crossOriginIsolated.

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

הערה: המאמר הזה מיועד למי שרוצה להכין את האתרים שלו לשימוש ב-SharedArrayBuffer, בשרשורי WebAssembly, ב-performance.measureUserAgentSpecificMemory() או בטיימר ברזולוציה גבוהה עם דיוק משופר בצורה חזקה יותר בפלטפורמות של דפדפנים.

מונח חשוב: במאמר הזה נעשה שימוש במונחים רבים שנשמעים דומים. כדי להבהיר את הדברים, נגדיר קודם את המושגים: * COEP: מדיניות הטמעה ממקורות שונים * COOP: מדיניות פותחן ממקורות שונים * CORP: מדיניות משאבים ממקורות שונים * CORS: שיתוף משאבים בין מקורות * CORB: חסימת קריאה ממקורות שונים

פריסת COOP ו-COEP כדי לבודד את האתר שלכם ממקורות שונים

הערה: במאמר מדריך להפעלת בידוד מדומיינים אחרים מוסבר איך להפעיל בידוד מדומיינים אחרים.

שילוב של COOP ו-COEP

1. הגדרת הכותרת Cross-Origin-Opener-Policy: same-origin במסמך ברמה העליונה

אם מפעילים את COOP: same-origin במסמך ברמה העליונה, לחלונות עם אותו מקור ולחלונות שנפתחו מהמסמך תהיה קבוצת הקשר גלישה נפרדת, אלא אם הם באותו מקור עם אותה הגדרת COOP. לכן, האבטחה מופעלת בחלונות שנפתחים, והתקשורת ההדדית בין שני החלונות מושבתת.

שימו לב: הפעולה הזו תשבור שילובים שדורשים אינטראקציות בין חלונות מדומיינים שונים, כמו OAuth ותשלומים. כדי לצמצם את הבעיה, אנחנו בודקים אפשרות להקל על התנאי כדי להפעיל בידוד בין מקורות שונים ב-Cross-Origin-Opener-Policy: same-origin-allow-popups. כך תוכלו לתקשר עם החלון שנפתח באופן אוטומטי. אם אתם רוצים להפעיל בידוד בין מקורות אבל נתקלים בבעיה הזו, מומלץ להירשם לתקופת ניסיון של מקור ולחכות עד שהתנאי החדש יהיה זמין. אנחנו לא מתכננים להפסיק את תקופת הניסיון של התכונה עד שהבעיה תיפתר בצורה בטוחה.

קבוצת הקשרים של הגלישה היא קבוצה של חלונות שיכולים להפנות אחד לשני. לדוגמה, מסמך ברמה העליונה ומסמכי הצאצא שלו שמוטמעים באמצעות <iframe>. אם אתר (https://a.example) פותח חלון קופץ (https://b.example), חלון הפתיחה והחלון הקופץ חולקים את אותו הקשר גלישה, ולכן יש להם גישה זה לזה באמצעות ממשקי DOM API כמו window.opener.

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

כדאי לנסות: השפעת פרמטרים שונים של מדיניות COOP.

2. מוודאים שהאפשרויות CORP או CORS מופעלות במשאבים

מוודאים שכל המשאבים בדף נטענים עם כותרות HTTP של CORP או CORS. השלב הזה נדרש כדי לבצע את שלב 4, הפעלת COEP.

אלה הפעולות שצריך לבצע בהתאם לאופי המשאב:

• אם המשאב אמור להיטען רק מאותו מקור, צריך להגדיר את הכותרת Cross-Origin-Resource-Policy: same-origin.
• אם המשאב אמור להיטען רק מאותו אתר אבל ממקורות שונים, צריך להגדיר את הכותרת Cross-Origin-Resource-Policy: same-site.
• אם המשאב נטען ממקורות חוצי-דומיין שנמצאים בשליטתכם, כדאי להגדיר את הכותרת Cross-Origin-Resource-Policy: cross-origin.
• למשאבים ממקורות שונים שאין לכם שליטה עליהם:
  • אם המשאב מוגש עם CORS, צריך להשתמש במאפיין crossorigin בתג ה-HTML של הטעינה. (לדוגמה, <img src="***" crossorigin>).
  • לבקש מבעלי המשאב לתמוך ב-CORS או ב-CORP.
• במקרה של iframe, פועלים לפי אותם עקרונות שצוינו למעלה ומגדירים את התג Cross-Origin-Resource-Policy: cross-origin (או same-site, same-origin בהתאם להקשר).
• סקריפטים שנטענים באמצעות WebWorker צריכים להיות מוגשים מאותו מקור, כך שלא צריך כותרות CORP או CORS.
• כדי להטמיע מסמך או worker שמוגשים עם COEP: require-corp, צריך להגדיר את הכותרת Cross-Origin-Resource-Policy: cross-origin במשאבי משנה ממקורות שונים שנטענים ללא CORS. לדוגמה, זה חל על <script>, importScripts, <link>, <video>, <iframe> וכו'.

כדי להפעיל בידוד ממקורות שונים במסמך שמוטמע ב-iframe, צריך להחיל את מדיניות ההרשאות allow="cross-origin-isolated" על התג <iframe> ולעמוד באותם התנאים שמתוארים במסמך הזה. חשוב לציין שגם כל השרשרת של המסמכים, כולל מסגרות הורה ומסגרות צאצא, צריכה להיות מבודדת ממקורות שונים.

מונח מפתח: חשוב להבין את ההבדל בין 'אותו אתר' לבין 'אותו מקור'. מידע נוסף על ההבדל זמין במאמר הסבר על same-site ו-same-origin.

3. שימוש בכותרת ה-HTTP של COEP Report-Only להערכת משאבים מוטמעים

לפני שמפעילים את COEP באופן מלא, אפשר לבצע הרצה יבשה באמצעות הכותרת Cross-Origin-Embedder-Policy-Report-Only כדי לבדוק אם המדיניות פועלת בפועל. תקבלו דוחות בלי לחסום תוכן מוטמע.

ההגדרה הזו חלה באופן רקורסיבי על כל המסמכים, כולל המסמך ברמה העליונה, תגי iframe וסקריפטים של worker. מידע על כותרת HTTP מסוג Report-Only זמין במאמר מעקב אחר בעיות באמצעות Reporting API.

4. הפעלת COEP

אחרי שמוודאים שהכול פועל ושאפשר לטעון את כל המשאבים בהצלחה, מחליפים את הכותרת Cross-Origin-Embedder-Policy-Report-Only בכותרת Cross-Origin-Embedder-Policy עם אותו ערך בכל המסמכים, כולל אלה שמוטמעים באמצעות תגי iframe וסקריפטים של worker.

כדאי לנסות: השפעה של פרמטרים שונים של COEP / CORP.

הערה: Squoosh (אפליקציית PWA לאופטימיזציה של תמונות) משתמשת עכשיו ב-COOP / COEP כדי לקבל גישה ל-Wasm Threads (וגם ל-Shared Array Buffer) ב-Android Chrome.

שימו לב: אנחנו בודקים דרכים לפריסת Cross-Origin-Resource-Policy בהיקף נרחב, כי חסימה לגישה מדומיינים אחרים מחייבת שכל משאבי המשנה יצטרפו באופן מפורש. לכן חשבנו ללכת בכיוון ההפוך: מצב חדש של COEP ללא אישורים שמאפשר לטעון משאבים בלי כותרת CORP, על ידי הסרת כל האישורים שלהם. אנחנו מקווים שהשינוי הזה יקל עליך לוודא שמשאבי המשנה שולחים את כותרת Cross-Origin-Resource-Policy. עם זאת, מצב credentialless זמין ב-Chrome מגרסה 96, אבל עדיין לא נתמך בדפדפנים אחרים. לכן, חלק מהמפתחים עשויים להתקשות בפריסת COOP או COEP. אם אתם מעדיפים לא להפעיל עדיין בידוד בין מקורות, מומלץ להירשם לניסיון מקור ולהמתין עד ש-credentialless יהיה זמין בדפדפנים נוספים.

איך בודקים אם הבידוד הצליח באמצעות self.crossOriginIsolated

המאפיין self.crossOriginIsolated מחזיר true כשדף האינטרנט נמצא במצב מבודד בין מקורות שונים, וכל המשאבים והחלונות מבודדים באותה קבוצת הקשר גלישה. אתם יכולים להשתמש ב-API הזה כדי לבדוק אם הצלחתם לבודד את קבוצת הקשרים לגלישה ולקבל גישה לתכונות מתקדמות כמו performance.measureUserAgentSpecificMemory().

ניפוי באגים באמצעות כלי הפיתוח ל-Chrome

במשאבים שמוצגים על המסך, כמו תמונות, קל יחסית לזהות בעיות ב-COEP כי הבקשה תיחסם והדף יציין שתמונה חסרה. עם זאת, יכול להיות שלא תשימו לב לבעיות ב-COEP במשאבים שלא בהכרח משפיעים על התצוגה, כמו סקריפטים או סגנונות. לשם כך, משתמשים בחלונית Network בכלי הפיתוח. אם יש בעיה ב-COEP, הסמל (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) יופיע בעמודה סטטוס.

אחר כך אפשר ללחוץ על הרשומה כדי לראות פרטים נוספים.

אפשר גם לקבוע את הסטטוס של מסגרות iframe וחלונות קופצים דרך החלונית Application (אפליקציה). עוברים לקטע Frames (מסגרות) בצד ימין ומרחיבים את האפשרות top (עליון) כדי לראות את פירוט מבנה המשאבים.

אפשר לבדוק את הסטטוס של ה-iframe, כמו הזמינות של SharedArrayBuffer וכו'.

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

זיהוי בעיות באמצעות Reporting API

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

הערה: האם אתם כבר משתמשים ב-Reporting API עם הכותרת Report-To? מתבצעת העברה של Chrome לגרסה חדשה של Reporting API, שמחליפה את Report-To ב-Reporting-Endpoints. מומלץ לעבור לגרסה החדשה. פרטים נוספים זמינים במאמר מעבר ל-Reporting API v1.

במאמר שימוש ב-Reporting API מוסבר איך להגדיר את Reporting API ואיך להגדיר שרת לקבלת דוחות.

דוח COEP לדוגמה

דוגמה למטען ייעודי (payload) של דוח COEP כשמשאב ממקורות שונים נחסם:

‫

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

שימו לב: blocked-url נועד רק לתאימות לאחור ויוסר בסופו של דבר.

דוח COOP לדוגמה

דוגמה למטען ייעודי (payload) של דוח COOP כשחלון קופץ נפתח בבידוד:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

כשקבוצות שונות של הקשרים לגלישה מנסות לגשת זו לזו (רק במצב report-only), ‏ COOP שולח גם דוח. לדוגמה, דוח שנוצר כשמנסים להשתמש ב-postMessage() ייראה כך:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

סיכום

אפשר להשתמש בשילוב של כותרות HTTP של COOP ו-COEP כדי להגדיר דף אינטרנט למצב מיוחד של בידוד ממקורות שונים. תוכלו לבדוק את הערך של self.crossOriginIsolated כדי לדעת אם דף אינטרנט נמצא במצב מבודד בין מקורות.

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

משאבים

• למה צריך 'בידוד ממקורות שונים' כדי להשתמש בתכונות מתקדמות
• מדריך להפעלת חסימה לגישה מדומיינים אחרים
• עדכוני SharedArrayBuffer ב-Android Chrome 88 וב-Desktop Chrome 92
• מעקב אחרי השימוש הכולל בזיכרון של דף אינטרנט באמצעות measureUserAgentSpecificMemory()