Maison > interface Web > js tutoriel > Introduction à CORS (Cross-Origin Resource Sharing) Qu'est-ce que CORS ?

Introduction à CORS (Cross-Origin Resource Sharing) Qu'est-ce que CORS ?

DDD
Libérer: 2024-11-16 02:10:03
original
554 Les gens l'ont consulté

Introduction to CORS (Cross-Origin Resource Sharing) What is CORS?

CORS, ou Cross-Origin Resource Sharing, est une fonctionnalité de sécurité mise en œuvre par les navigateurs Web qui permet ou restreint aux applications Web d'effectuer des requêtes vers un domaine différent de celui qui a servi la page Web. . En termes simples, CORS détermine si les ressources d'un domaine sont accessibles par une page Web d'un autre domaine.

Par défaut, les navigateurs Web appliquent la politique de même origine, qui empêche les pages Web d'effectuer des requêtes vers un domaine différent de celui qui a servi la page. Ceci est fait pour empêcher les sites Web malveillants d’accéder à des données sensibles sur d’autres sites Web. Cependant, les applications Web doivent parfois demander des ressources à une origine différente (domaine, protocole ou port), c'est là que CORS entre en jeu.

CORS en action

Lorsqu'une application Web sur un domaine a besoin de demander des données à un autre domaine, elle envoie une requête HTTP avec des en-têtes spécifiques qui indiquent l'origine de la requête. Le serveur qui héberge la ressource demandée doit alors décider d'autoriser ou non la demande en envoyant les en-têtes CORS appropriés dans la réponse.

Par exemple, si vous créez une application frontale hébergée sur http://example.com et qu'elle doit récupérer des données depuis http://api.example2.com, les en-têtes CORS autorisent le serveur à api.example2. com pour préciser s'il autorisera les requêtes provenant de example.com.

Cas d'utilisation courants

CORS est généralement nécessaire dans les scénarios suivants :

Accès aux API tierces : de nombreuses applications Web modernes s'appuient sur des API externes pour des services tels que l'authentification, le traitement des paiements ou l'intégration des médias sociaux. CORS est nécessaire lorsque ces API sont hébergées sur des domaines différents.

Communication Frontend-Backend : Dans les cas où le frontend et le backend d'une application Web sont hébergés sur des domaines ou sous-domaines différents, CORS est utilisé pour permettre la communication entre eux.

CDN (Content Delivery Networks) : les sites Web utilisent souvent des CDN pour diffuser des actifs statiques tels que des images, des feuilles de style ou des fichiers JavaScript. CORS permet au site principal de demander ces ressources depuis un CDN hébergé sur une origine différente.

Paramètres et indicateurs clés dans CORS

Access-Control-Allow-Origin : Cet en-tête est le plus important dans CORS et indique quelles origines sont autorisées à accéder à la ressource. Il peut être réglé sur :

Une origine spécifique (Access-Control-Allow-Origin : https://example.com)
Un caractère générique (Access-Control-Allow-Origin: *), qui permet à n'importe quelle origine d'accéder à la ressource. Cependant, cela n'est pas autorisé pour les demandes incluant des informations d'identification.
Access-Control-Allow-Methods : spécifie quelles méthodes HTTP (telles que GET, POST, PUT, DELETE) sont autorisées lors de l'accès à la ressource. Par exemple :
Méthodes d'autorisation de contrôle d'accès : GET, POST, PUT

Access-Control-Allow-Headers : répertorie les en-têtes HTTP qui peuvent être utilisés lors de la requête réelle. Par exemple, si la requête inclut un en-tête personnalisé tel que X-Custom-Header, il doit être spécifié ici :
Access-Control-Allow-Headers : X-Custom-Header, Content-Type

Access-Control-Allow-Credentials : indique si la demande peut inclure des informations d'identification telles que des cookies, une authentification HTTP ou des certificats côté client. Ceci est important pour les API qui nécessitent une authentification. Par exemple : Access-Control-Allow-Credentials : true

Access-Control-Expose-Headers : Spécifie quels en-têtes le navigateur doit exposer au client demandeur. Par défaut, les navigateurs n'exposent qu'un ensemble limité d'en-têtes comme Cache-Control et Content-Type, mais Access-Control-Expose-Headers peut rendre des en-têtes supplémentaires disponibles.

Access-Control-Max-Age : définit la durée pendant laquelle les résultats d'une demande de contrôle en amont (voir ci-dessous) peuvent être mis en cache par le navigateur. Il permet d'améliorer les performances en réduisant le nombre de demandes de contrôle en amont. Par exemple :
Contrôle d'accès-Max-Age : 86400 (24 heures)

Requêtes de contrôle en amont : pour certains types de requêtes, en particulier celles qui modifient les données du serveur (telles que PUT ou DELETE), les navigateurs envoient une requête de contrôle en amont à l'aide de la méthode HTTP OPTIONS. Cela vérifie auprès du serveur si la demande réelle peut être envoyée en toute sécurité. La réponse du serveur à la demande de contrôle en amont détermine si le navigateur procédera à la demande réelle.

Quand avez-vous besoin de CORS ?

CORS est requis lorsque :

Des requêtes d'origine croisée sont effectuées : si votre frontend et votre backend sont servis à partir de domaines ou de ports différents, ou si vous accédez à des API externes depuis votre application.

Accès aux ressources hébergées sur un CDN ou un service tiers : par exemple, si vous chargez des polices, des images ou d'autres ressources à partir d'un CDN, le serveur doit inclure des en-têtes CORS pour permettre à votre site d'y accéder.

Problèmes de sécurité : bien que l'activation de CORS autorise les requêtes d'origine croisée, elle doit être soigneusement configurée pour éviter d'ouvrir votre application à des attaques malveillantes. Seules les origines fiables doivent être autorisées et les opérations sensibles doivent être protégées par des mesures de sécurité supplémentaires telles que des jetons d'authentification.

Conclusion

CORS est un mécanisme crucial pour garantir le partage sûr et contrôlé des ressources entre différentes origines. Correctement configuré, il permet aux applications Web modernes d'interagir avec des services et des API tiers tout en protégeant les utilisateurs des risques de sécurité. Comprendre comment configurer les en-têtes CORS et savoir quand et pourquoi ils sont nécessaires est essentiel pour tout développeur Web travaillant avec des API, des CDN ou des applications multidomaines.

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal