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