מדיניות מאותו מקור

Mariko Kosaka

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

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

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

מה נחשב לאותו מקור?

המקור מוגדר לפי הסכימה (שנקראת גם פרוטוקול, למשל HTTP או HTTPS), היציאה (אם היא צוינה) והמארח. אם כל שלושת הרכיבים זהים בשתי כתובות URL, הן נחשבות כבעלות אותו מקור. לדוגמה, http://www.example.com/foo הוא אותו מקור כמו http://www.example.com/bar אבל לא כמו https://www.example.com/bar כי הסכימה שונה.

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

מה מותר ומה חסום?

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

מסגרות iframe	בדרך כלל מותר להטמיע ממקורות שונים (בהתאם להנחיה X-Frame-Options), אבל אסור לקרוא ממקורות שונים (למשל, להשתמש ב-JavaScript כדי לגשת למסמך ב-iframe).
CSS	אפשר להטמיע CSS ממקורות שונים באמצעות רכיב <link> או @import בקובץ CSS. יכול להיות שצריך להוסיף את הכותרת הנכונה של Content-Type.
טפסים	אפשר להשתמש בכתובות URL ממקורות שונים כערך המאפיין action של רכיבי טופס. אפליקציית אינטרנט יכולה לכתוב נתוני טופס ליעד ממקורות שונים.
תמונות	מותר להטמיע תמונות ממקורות שונים. עם זאת, קריאת נתוני תמונה ממקורות שונים (כמו אחזור נתונים בינאריים מתמונה ממקורות שונים באמצעות JavaScript) חסומה.
מולטימדיה	אפשר להטמיע סרטונים וקטעי אודיו ממקורות שונים באמצעות הרכיבים <video> ו-<audio>.
סקריפט	אפשר להטמיע סקריפטים ממקורות שונים, אבל יכול להיות שהגישה לממשקי API מסוימים (כמו בקשות אחזור ממקורות שונים) תיחסם.

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

TODO: DevSite - Think and Check assessment

איך למנוע חטיפת קליקים

איור: מנגנון חטיפת קליקים שמוצג ב-3 שכבות נפרדות (אתר בסיס, אתר iframe, כפתור שקוף).

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

כדי לחסום אתרים אחרים מהטמעת האתר שלכם ב-iframe, הוסיפו לכותרות ה-HTTP מדיניות אבטחת תוכן עם ההוראה frame-ancestors.

לחלופין, אפשר להוסיף את X-Frame-Options לכותרות ה-HTTP. רשימת האפשרויות מפורטת ב-MDN.

סיכום

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