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