מדיניות מקור זהה & בקשות אחזור

בקודלאב הזה תלמדו איך פועל המקור הזהה כשאוספים משאבים.

הגדרה: אחזור דף מאותו מקור

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