קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
Mariko Kosaka
ב-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 זמין במאמר שיתוף בטוח של משאבים ממקורות שונים.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"חסרים לי מידע או פרטים"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"התוכן מורכב מדי או עם יותר מדי שלבים"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"התוכן לא עדכני"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"בעיה בתרגום"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"בעיה בדוגמאות/בקוד"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"סיבה אחרת"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"התוכן קל להבנה"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"התוכן עזר לי לפתור בעיה"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"סיבה אחרת"
}]
{"lastModified": "\u05e2\u05d3\u05db\u05d5\u05df \u05d0\u05d7\u05e8\u05d5\u05df: 2018-11-05 (\u05e9\u05e2\u05d5\u05df UTC)."}
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2018-11-05 (שעון UTC)."],[],[]]