Same Origin Policy & Fetch requests
In this codelab, see how the same-origin works when fetching resources.
Set up: Fetch page from same origin #
The demo is hosted at https://same-origin-policy-fetch.glitch.me. This simple web page uses fetch to load resource from https://same-origin-policy-fetch.glitch.me/fetch.html. Since index.html and fetch.html share the same origin, you should see 200 displayed on the live preview.
1. Fetch page from different origin #
Try to change the fetch URL to https://www.google.com. What do you see in the live preview?
The browser should have blocked the fetch request because you requested a resource from a different origin. This means an attacker cannot read cross-origin resources even if they have taken control of a user's browser.
2. Fetch a cross-origin resource #
Try changing the fetch URL to https://api.thecatapi.com/v1/images/search. What do you see in the live preview?
The fetch URL is a different origin, but you should see the status code 200. Why? Modern web applications often request cross-origin resources to load third-party scripts or query an API endpoint. To accommodate these use cases, there is a mechanism called CORS (Cross Origin Resource Sharing) to tell the browser that loading of a cross-origin resource is allowed. See Share cross-origin resources safely for more on CORS.