Dans cet atelier de programmation, découvrez comment le même origine fonctionne lors de l'extraction de ressources.
Configuration: Extraire la page de la même origine
La démonstration est hébergée sur https://same-origin-policy-fetch.glitch.me.
Cette page Web simple utilise fetch pour charger la 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 à partir 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 d'extraction, car vous avez demandé une ressource à partir d'une autre origine. Cela signifie qu'un pirate informatique ne peut pas lire les ressources multi-origines, même s'il a 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 est d'une autre origine, mais le code d'état 200 devrait s'afficher. Pourquoi ? Les applications Web modernes demandent souvent des ressources multi-origines pour charger des scripts tiers ou interroger un point de terminaison d'API. Pour répondre à ces cas d'utilisation, un mécanisme appelé CORS (Cross Origin Resource Sharing) indique au navigateur que le chargement d'une ressource inter-origine est autorisé. Pour en savoir plus sur le CORS, consultez Partager des ressources entre origines multiples de manière sécurisée.