Dans cet atelier de programmation, découvrez comment fonctionne la même origine lors de la récupération de ressources.
Configuration: Extraire une page de la même origine
La démonstration est organisée à https://same-origin-policy-fetch.glitch.me.
Cette page Web simple utilise fetch pour charger une ressource à partir de https://same-origin-policy-fetch.glitch.me/fetch.html. Étant donné que index.html et fetch.html partagent la même origine, 200 devrait s'afficher dans l'aperçu en direct.
1. Extraire une page d'une autre origine
Essayez de remplacer l'URL de récupération par https://www.google.com.
Que voyez-vous dans l'aperçu en direct ?
Le navigateur aurait dû bloquer la requête de récupération, car vous avez demandé une ressource d'une origine différente. Cela signifie qu'un pirate ne peut pas lire les données d'origine des ressources, même s'ils ont pris le contrôle du navigateur d'un utilisateur.
2. Extraire une ressource multi-origine
Essayez de remplacer l'URL de récupération par https://api.thecatapi.com/v1/images/search.
Que voyez-vous dans l'aperçu en direct ?
L'URL de récupération a une origine différente, mais le code d'état 200 doit s'afficher. Pourquoi ? Les applications Web modernes demandent souvent des ressources multi-origines à charger des scripts tiers ou d'interroger un point de terminaison d'API. Pour répondre à ces cas d'utilisation, il existe un mécanisme appelé CORS (Cross-Origin Resource Sharing) pour indiquer au que le chargement d'une ressource multi-origines est autorisé. Pour en savoir plus sur CORS, consultez Partager des ressources multi-origines en toute sécurité.