Comprendre le fonctionnement de CORS dans les navigateurs Web

Le partage de ressources d'origine croisée (CORS) est une fonctionnalité de sécurité essentielle dans les navigateurs Web qui régit la manière dont les applications Web peuvent demander des ressources (telles que des données, des images ou des scripts) à partir d'un domaine différent. que celui qui a servi la page Web initiale. Il est principalement conçu pour protéger les utilisateurs contre les sites malveillants tentant d'accéder à des informations sensibles sur d'autres sites Web. Ce blog expliquera comment fonctionne CORS et pourquoi il est crucial pour le développement Web.
Qu'est-ce que CORS ?
En termes simples, CORS est un mécanisme de navigateur qui contrôle les ressources qu'une page Web peut demander à différents domaines. Par défaut, les navigateurs implémentent la politique de même origine (SOP), qui empêche les pages Web d'effectuer des requêtes vers un domaine autre que celui à partir duquel la page a été chargée. Cette politique est une fonctionnalité de sécurité fondamentale qui empêche les interactions potentiellement dangereuses entre les sites Web.

Cependant, il existe de nombreux cas où des requêtes légitimes d'origine croisée sont nécessaires, par exemple lorsqu'une application Web doit récupérer des données à partir d'une API hébergée sur un autre serveur. CORS permet de telles requêtes de manière sécurisée en permettant aux serveurs de spécifier quels domaines sont autorisés à accéder à leurs ressources.

Comment fonctionne CORS ?
CORS fonctionne en ajoutant des en-têtes HTTP aux réponses d'un serveur, indiquant si une requête d'origine croisée est autorisée ou non. Voici un aperçu étape par étape du fonctionnement de CORS :

Le Client fait une demande
Lorsqu'une page Web tente d'effectuer une requête (par exemple, via XMLHttpRequest, fetch ou inclusion de script) vers une origine différente (définie par le domaine, le protocole et le port), le navigateur vérifie si la requête viole la politique de même origine.

Demande de contrôle en amont CORS (pour les demandes complexes)
Certaines requêtes, en particulier celles comportant des méthodes telles que PUT, DELETE ou des en-têtes personnalisés, sont considérées comme « complexes ». Avant d'envoyer la demande proprement dite, le navigateur envoie une demande OPTIONS, appelée demande de contrôle en amont. Cette requête de contrôle en amont demande au serveur s'il autorise la requête réelle et vérifie les méthodes HTTP, les en-têtes et les origines autorisés.

Le serveur répond avec les en-têtes CORS
Le serveur recevant le contrôle en amont ou la demande réelle renvoie une réponse avec des en-têtes spécifiques indiquant si la demande est autorisée. Les en-têtes clés incluent :

Access-Control-Allow-Origin : cet en-tête spécifie quels domaines sont autorisés à accéder à la ressource. Si cet en-tête inclut l'origine de la requête, le navigateur autorise la réponse. Par exemple, le serveur peut répondre par :

Access-Control-Allow-Origin: https://example.com

Access-Control-Allow-Methods : cet en-tête spécifie quelles méthodes HTTP (GET, POST, PUT, etc.) le serveur autorise les requêtes d'origine croisée.

Access-Control-Allow-Methods: GET, POST

Access-Control-Allow-Headers : ceci spécifie quels en-têtes personnalisés peuvent être inclus dans la demande réelle.

Access-Control-Allow-Headers: Content-Type, Authorization

Access-Control-Allow-Credentials : Si le serveur autorise les informations d'identification (cookies, authentification HTTP), cet en-tête sera inclus et défini sur true.

Le navigateur décide
Après avoir reçu la réponse du serveur, le navigateur évalue les en-têtes. Si le serveur accorde l'autorisation via les en-têtes CORS appropriés, le navigateur autorise la demande d'origine croisée et traite la réponse. Sinon, le navigateur bloque la demande et la page Web ne peut pas accéder à la ressource.

Exemple de requête CORS simple
Prenons un scénario dans lequel une page Web hébergée sur https://example.com tente d'envoyer une requête GET à une API hébergée sur https://api.example.com/data.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Dans ce cas, le navigateur envoie la requête à https://api.example.com. Si le serveur API est configuré pour autoriser les requêtes provenant de https://example.com, il répondra avec l'en-tête :

Access-Control-Allow-Origin: https://example.com

Si l'en-tête est absent ou incorrect, le navigateur bloquera la réponse en raison de la politique CORS.

Exemple de contrôle en amont CORS
Pour les requêtes plus complexes, le navigateur lance une requête de contrôle en amont pour vérifier si la requête d'origine croisée est autorisée. Voici un exemple de requête PUT qui déclenche un contrôle en amont :

fetch('https://api.example.com/update', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

Le navigateur envoie une requête OPTIONS comme celle-ci :

OPTIONS /update HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

Le serveur doit répondre avec des en-têtes indiquant si cette demande est autorisée :

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: Content-Type

Si ces en-têtes sont présents et valides, le navigateur procédera à la requête PUT proprement dite.

Importance du CORS
CORS est une fonctionnalité de sécurité qui fournit un mécanisme précis permettant aux serveurs Web de contrôler l'accès à leurs ressources. Sans CORS, les sites Web malveillants pourraient facilement récupérer des données sensibles d'autres domaines sans le consentement de l'utilisateur, entraînant des vulnérabilités de sécurité telles que la falsification de requêtes intersites (CSRF).

Conclusion
Comprendre CORS est essentiel pour les développeurs Web travaillant avec des API et des ressources tierces. En configurant des politiques CORS appropriées sur les serveurs, les développeurs peuvent garantir que leurs applications restent sécurisées tout en permettant des interactions légitimes entre origines croisées.

Si vous développez une application Web et rencontrez des erreurs CORS, il est essentiel de vérifier la configuration du serveur et de vous assurer que les en-têtes nécessaires sont envoyés dans la réponse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!