מדריך להפעלת בידוד ממקורות שונים

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

Eiji Kitamura

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

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

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

אם אתם לא בטוחים איפה באתר שלכם נעשה שימוש ב-SharedArrayBuffer, יש שתי דרכים לברר זאת:

  • איך להשתמש בכלי הפיתוח ל-Chrome
  • (מתקדם) שימוש בדוחות הוצאה משימוש

אם כבר ידוע לכם איפה אתם משתמשים ב-SharedArrayBuffer, תוכלו לדלג אל ניתוח ההשפעה של בידוד בין מקורות.

איך להשתמש בכלי הפיתוח ל-Chrome

כלי הפיתוח ל-Chrome מאפשרים למפתחים לבדוק אתרים.

  1. פותחים את כלי הפיתוח ל-Chrome בדף שלגביו יש חשד שהוא משתמש ב-SharedArrayBuffer.
  2. בוחרים את החלונית Console.
  3. אם בדף נעשה שימוש ב-SharedArrayBuffer, תוצג ההודעה הבאה:
    [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535
  4. שם הקובץ ומספר השורה בסוף ההודעה (לדוגמה, common-bundle.js:535) מצביעים מאיפה מגיע SharedArrayBuffer. אם מדובר בספרייה של צד שלישי, צריך לפנות למפתח כדי לפתור את הבעיה. אם הוא מוטמע כחלק מהאתר, פועלים לפי המדריך שבהמשך כדי להפעיל בידוד בין מקורות.
אזהרה במסוף כלי הפיתוח כשמשתמשים ב-SharedArrayBuffer בלי בידוד בין מקורות
אזהרה במסוף DevTools כשנעשה שימוש ב-SharedArrayBuffer בלי בידוד ממקורות שונים.

(מתקדם) שימוש בדוחות על הוצאה משימוש

בחלק מהדפדפנים יש פונקציית דיווח – מוציאים משימוש את ממשקי ה-API בנקודת קצה מסוימת.

  1. הגדרת שרת של דוח הוצאה משימוש וקבלת כתובת ה-URL לדיווח אפשר לעשות זאת באמצעות שירות ציבורי או ליצור שירות כזה בעצמכם.
  2. באמצעות כתובת ה-URL, מגדירים את כותרת ה-HTTP הבאה לדפים שעשויים להציג את SharedArrayBuffer.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. אחרי שהכותרת תתחיל להופיע, נקודת הקצה שרשמת אליה תתחיל לאסוף דוחות על הוצאה משימוש.

דוגמה להטמעה זמינה כאן: https://cross-origin-isolation.glitch.me.

ניתוח ההשפעה של בידוד בין מקורות

לא הייתם רוצים לבדוק את ההשפעה של הפעלת בידוד בין מקורות (CORS) על האתר שלכם בלי לשבור שום דבר? כותרות ה-HTTP‏ Cross-Origin-Opener-Policy-Report-Only ו-Cross-Origin-Embedder-Policy-Report-Only מאפשרות לעשות זאת.

  1. מגדירים את Cross-Origin-Opener-Policy-Report-Only: same-origin במסמך ברמה העליונה. כפי שרואים מהשם, הכותרת הזו שולחת רק דוחות על ההשפעה של COOP: same-origin על האתר שלכם – היא לא משביתה בפועל את התקשורת עם חלונות קופצים.
  2. מגדירים דיווח ומגדירים שרת אינטרנט כדי לקבל ולשמור את הדוחות.
  3. מגדירים את Cross-Origin-Embedder-Policy-Report-Only: require-corp במסמך ברמה העליונה. שוב, הכותרת הזו מאפשרת לכם לראות את ההשפעה של הפעלת COEP: require-corp בלי להשפיע עדיין על תפקוד האתר. אפשר להגדיר את הכותרת הזו כך שתשלח דוחות לאותו שרת דיווח שהגדרתם בשלב הקודם.

צמצום ההשפעה של בידוד בין מקורות שונים

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

  1. במשאבים ממקורות שונים, כמו תמונות, סקריפטים, גיליונות סגנונות, רכיבי iframe ועוד, מגדירים את הכותרת Cross-Origin-Resource-Policy: cross-origin. במשאבים באותו אתר, מגדירים את הכותרת Cross-Origin-Resource-Policy: same-site.
  2. למשאבים שאפשר לטעון באמצעות CORS, צריך לוודא שהם מופעלים. לשם כך, מגדירים את המאפיין crossorigin בתג ה-HTML (למשל, <img src="example.jpg" crossorigin>). בבקשת אחזור של JavaScript, מוודאים ש-request.mode מוגדר לערך cors.
  3. אם רוצים להשתמש בתכונות מתקדמות כמו SharedArrayBuffer בתוך iframe טעון, צריך לצרף את allow="cross-origin-isolated" ל-<iframe>.
  4. אם משאבים ממקורות שונים נטענים ב-iframe או בסקריפטים של עובדים, וכוללים שכבה נוספת של iframe או סקריפטים של עובדים, צריך להחיל באופן רקורסיבי את השלבים שמפורטים בקטע הזה לפני שממשיכים הלאה.
  5. אחרי שתאשרו שכל המשאבים ממקורות שונים הביעו הסכמה, צריך להגדיר את הכותרת Cross-Origin-Embedder-Policy: require-corp ב-iframes ובסקריפטים של עובדים (חובה לעשות זאת ללא קשר למקור המשאבים).
  6. מוודאים שאין חלונות קופצים ממקורות שונים שדורשים תקשורת דרך postMessage(). אי אפשר להמשיך להשתמש בהם כשהבידול בין מקורות מופעל. אפשר להעביר את התקשורת למסמך אחר שלא מבודד בין מקורות, או להשתמש בשיטת תקשורת אחרת (לדוגמה, בקשות HTTP).

הפעלת בידוד בין מקורות

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

  1. מגדירים את הכותרת Cross-Origin-Opener-Policy: same-origin במסמך ברמה העליונה. אם הגדרתם את Cross-Origin-Opener-Policy-Report-Only: same-origin, מחליפים אותו. כך אפשר לחסום את התקשורת בין המסמך ברמה העליונה לבין החלונות הקופצים שלו.
  2. מגדירים את הכותרת Cross-Origin-Embedder-Policy: require-corp במסמך ברמה העליונה. אם הגדרתם את Cross-Origin-Embedder-Policy-Report-Only: require-corp, מחליפים אותו. הפעולה הזו תמנע את טעינת המשאבים מאתרים שונים שלא הסכמתם להשתמש בהם.
  3. מוודאים ש-self.crossOriginIsolated מחזירה true במסוף כדי לאמת שהדף מבודד ממקורות שונים.

משאבים