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
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.