Dans cet atelier de programmation, vous allez découvrir comment fonctionne la règle de même origine lors de la récupération de ressources.
Configuration : extraire la page de la même origine
La démonstration est hébergée à l'adresse 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 provenant d'une autre origine. Cela signifie qu'un pirate informatique ne peut pas lire les ressources interorigines, même s'il a pris le contrôle du navigateur d'un utilisateur.
2. Récupérer une ressource interorigine
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 une origine différente, mais vous devriez voir le code d'état 200. Pourquoi ? Les applications Web modernes demandent souvent des ressources interorigines pour charger des scripts tiers ou 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) qui indique au navigateur que le chargement d'une ressource interorigine est autorisé. Pour en savoir plus sur le CORS, consultez Partager des ressources interorigines de manière sécurisée.