ב-Codelab הזה נסביר איך פועלת מדיניות המקור הזהה כשמאחזרים משאבים.
הגדרה: אחזור דף מאותו מקור
ההדגמה מתארחת בכתובת https://same-origin-policy-fetch.glitch.me.
דף האינטרנט הפשוט הזה משתמש ב-fetch כדי לטעון משאב מ-https://same-origin-policy-fetch.glitch.me/fetch.html. מכיוון ש-index.html ו-fetch.html חולקים את אותו מקור, אמור להופיע 200 בתצוגה המקדימה בזמן אמת.
1. אחזור דף ממקור אחר
נסו לשנות את כתובת ה-URL לאחזור ל-https://www.google.com.
מה רואים בתצוגה המקדימה בזמן אמת?
הדפדפן היה אמור לחסום את בקשת השליפה כי ביקשתם משאב ממקור אחר. המשמעות היא שתוקפים לא יכולים לקרוא משאבים ממקורות שונים, גם אם הם השתלטו על הדפדפן של המשתמש.
2. אחזור משאב ממקורות שונים
אפשר לנסות לשנות את כתובת ה-URL לאחזור ל-https://api.thecatapi.com/v1/images/search.
מה רואים בתצוגה המקדימה בזמן אמת?
כתובת ה-URL לאחזור היא מקור אחר, אבל אתם אמורים לראות את קוד הסטטוס 200. למה? אפליקציות אינטרנט מודרניות מבקשות לעיתים קרובות משאבים ממקורות שונים כדי לטעון סקריפטים של צד שלישי או לשלוח שאילתות לנקודת קצה ל-API. כדי לתת מענה לתרחישי השימוש האלה, יש מנגנון שנקרא CORS (שיתוף משאבים בין מקורות) שמאפשר להורות לדפדפן לטעון משאב ממקור חיצוני. מידע נוסף על CORS זמין במאמר שיתוף משאבים ממקורות שונים באופן בטוח.