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

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

Eiji Kitamura

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

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

קביעה של המיקום באתר שבו נעשה שימוש ב-SharedArrayBuffer

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

אם אתם לא בטוחים איפה באתר שלכם נעשה שימוש ב-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  for more details. common-bundle.js:535
  4. שם הקובץ ומספר השורה בסוף ההודעה (לדוגמה, common-bundle.js:535) מציינים מאיפה מגיע SharedArrayBuffer. אם מדובר בספרייה של צד שלישי, צריך לפנות למפתח כדי לפתור את הבעיה. אם הוא מוטמע כחלק מהאתר, צריך לפעול לפי המדריך שלמטה כדי להפעיל בידוד בין מקורות שונים.
אזהרה במסוף כלי הפיתוח כשמשתמשים ב-SharedArrayBuffer בלי בידוד בין מקורות.
אזהרה במסוף כלי הפיתוח כשמשתמשים ב-SharedArrayBuffer בלי לחסום אותו לגישה מדומיינים אחרים.

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

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

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

דוגמה להטמעה

ניתוח ההשפעה של חסימה לגישה מדומיינים אחרים

האם לא היה נהדר אם הייתם יכולים להעריך את ההשפעה של הפעלת בידוד בין מקורות שונים באתר שלכם בלי לגרום לשום נזק? כדי לעשות את זה, אפשר להשתמש בכותרות ה-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>). לבקשת אחזור (fetch) של JavaScript, צריך לוודא שהמאפיין request.mode מוגדר לערך cors.
  3. אם רוצים להשתמש בתכונות מתקדמות כמו SharedArrayBuffer בתוך iframe שנטען, צריך להוסיף allow="cross-origin-isolated" ל-<iframe>.
  4. אם משאבים ממקורות שונים נטענים לתוך iframe או סקריפטים של worker, וכוללים שכבה נוספת של iframe או סקריפטים של worker, צריך להחיל באופן רקורסיבי את השלבים שמתוארים בקטע הזה לפני שממשיכים.
  5. אחרי שמוודאים שכל המשאבים ממקורות שונים נכללים בהסכמה, מגדירים את הכותרת Cross-Origin-Embedder-Policy: require-corp ב-iframe ובסקריפטים של Worker (הפעולה הזו נדרשת ללא קשר למקור זהה או למקורות שונים).
  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 במסוף.

משאבים