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

מריקו קוסקה

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

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

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

מה נחשב למקור זהה?

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

מה מותר ומה אסור?

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

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

TODO: DevSite - הערכה של חשיבה ובדיקה

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

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

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

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

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

סיכום

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