ב-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 זמין במאמר שיתוף משאבים ממקורות שונים באופן בטוח.