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

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

Eiji Kitamura

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

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

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

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

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

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

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

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

  1. פותחים את כלי הפיתוח ל-Chrome בדף שבו חושדים שמשתמשים ב-SharedArrayBuffer.
  2. לוחצים על החלונית מסוף.
  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. אם מדובר בספרייה של צד שלישי, צריך לפנות למפתח כדי לפתור את הבעיה. אם היא מוטמעת כחלק מהאתר, צריך לפעול לפי המדריך שבהמשך כדי להפעיל בידוד בין מקורות.
אזהרה במסוף DevToools כשנעשה שימוש ב-SharedArrayBuffer ללא בידוד בין מקורות
תוצג אזהרה במסוף DevToools כשמשתמשים ב-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.

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

נכון שזה יהיה נהדר אם הייתם יכולים להעריך את ההשפעה של הפעלת בידוד בין מקורות על האתר שלכם בלי לשבור שום דבר? אפשר לעשות את זה באמצעות כותרות ה-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. במשאבים ממקורות שונים, כמו תמונות, סקריפטים, גיליונות סגנונות, iframes ואחרים, צריך להגדיר את הכותרת 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. אם משאבים ממקורות שונים שנטענים ב-iframes או בסקריפטים של worker כוללים שכבה נוספת של iframes או של סקריפטים של worker, חשוב להחיל באופן רקורסיבי את השלבים שמתוארים בקטע הזה לפני שממשיכים.
  5. אחרי שמוודאים שכל המשאבים ממקורות צולבים מצורפים, מגדירים את הכותרת Cross-Origin-Embedder-Policy: require-corp ב-iframes ובסקריפטים של 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 במסוף כדי לוודא שהדף מבודד ממקורות שונים.

משאבים