Dans cet atelier de programmation, vous allez découvrir comment fonctionne la même origine lors de l'extraction de ressources.
Configuration: récupérer une page de 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 des ressources à partir de https://same-origin-policy-fetch.glitch.me/fetch.html. Comme 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 depuis une origine différente. 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 d'exploration est une origine différente, mais vous devriez voir le code d'état 200. 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) permet d'indiquer au navigateur que le chargement d'une ressource multi-origine est autorisé. Pour en savoir plus sur le CORS, consultez Partager des ressources multi-origines en toute sécurité.