Tout ce que vous devez savoir sur les erreurs CORS et CORS

Comprenez-vous CORS et pourquoi obtenez-vous des erreurs CORS ? Comprenons les bases de cette pratique de sécurité et l’une des erreurs les plus courantes que vous verrez.

Lorsque nous commençons à créer nos applications, nous commettons souvent une erreur qui peut nous envoyer dans la mauvaise direction. Un message « Erreur CORS » s’affiche lorsque nous essayons d’obtenir une ressource d’un domaine différent. Nous ne savons pas quoi faire ni comment faire pour que cela fonctionne. Il y a beaucoup de développeurs qui connaissent l’erreur mais ne savent pas comment cela fonctionne ou comment y remédier.

Commençons et découvrons l’une des erreurs les plus courantes et pourquoi c’est si grave.

Qu’est-ce que le CORS ?

CORS aide à garantir que seuls les domaines autorisés peuvent accéder aux données ou ressources sensibles, et que les applications Web ne sont pas vulnérables aux attaques de script intersite (XSS) ou à d’autres types de vulnérabilités de sécurité en permettant aux développeurs Web d’autoriser ou de bloquer explicitement les demandes d’origine croisée. . Il permet également aux pages Web de faire des demandes explicites de ressources d’origine croisée tout en empêchant l’accès non autorisé à d’autres ressources.

Avant CORS, les pages Web ne pouvaient envoyer des demandes qu’au même domaine que celui qui servait la page Web, une pratique connue sous le nom de « politique de même origine ». Cette politique a été mise en œuvre pour empêcher les sites Web malveillants d’envoyer des demandes non autorisées à d’autres domaines, ce qui pourrait exposer des données sensibles ou compromettre la sécurité.

Cependant, à mesure que le Web évoluait et que les applications Web devenaient plus complexes, l’exigence pour les pages Web de pouvoir envoyer des requêtes à des domaines externes augmentait également. Les applications Web, par exemple, peuvent avoir besoin d’accéder à des API ou à d’autres sources de données hébergées sur différents domaines, ou elles peuvent avoir besoin d’inclure des ressources de domaine externes telles que des images ou des feuilles de style.

CORS a été créé pour répondre à ce besoin tout en maintenant la sécurité Web. Il permet aux développeurs Web de spécifier quels domaines sont autorisés à accéder à leurs ressources, ainsi que de contrôler les types de requêtes pouvant être effectuées et les types de données pouvant être renvoyées.

Que sont les erreurs CORS ?

Les erreurs CORS se produisent lorsqu’une page Web fait une demande à un domaine différent de celui qui a servi la page, et le serveur répond avec une erreur HTTP parce que l’en-tête « Origine » dans la demande n’est pas autorisé par la configuration CORS du serveur.

La raison du CORS

Nous avons discuté de ce qu’est une erreur CORS et de son fonctionnement, mais pour bien la comprendre, utilisons une simple analogie.

Considérez que vous et votre ami avez des sites Web. Votre site Web représente un domaine sur Internet, tandis que le site Web de votre ami en représente un autre. Pour garder vos sites Web distincts et sécurisés, il existe des réglementations en place qui limitent l’accès de votre site Web aux ressources (telles que les photos ou les données) en dehors de votre domaine. Ceci est similaire à la « politique de même origine » dans les navigateurs Web, qui permet uniquement aux pages Web d’accéder aux ressources du même domaine à partir duquel la page a été servie.

Imaginez que vous souhaitiez inclure vous-même une image du site Web d’un ami. Vous aimeriez pouvoir utiliser l’image, mais vous ne pouvez pas car il s’agit d’une propriété privée et vous n’êtes pas autorisé à le faire. Ceci est analogue à une page Web qui tente d’accéder à une ressource à partir d’un domaine autre que celui qui a fourni la page Web mais qui ne peut pas le faire en raison de la politique de même origine.

Pour résoudre ce problème, votre ami pourrait vous permettre d’utiliser l’image sous certaines conditions. Par exemple, ils peuvent vous permettre d’utiliser l’image si vous demandez d’abord l’approbation et l’utilisez pour une raison spécifique.

Ceci est similaire à CORS, qui permet aux développeurs Web de déclarer quels domaines sont autorisés à accéder à leurs ressources, ainsi que de réglementer les types de requêtes pouvant être effectuées et les types de données renvoyées. En vous autorisant à utiliser l’image tant que vous respectez la réglementation, votre ami peut continuer à profiter de la confidentialité de sa propriété (l’image) tout en vous permettant de l’utiliser sur votre site Web.

Comment résoudre les erreurs CORS

Il existe plusieurs façons de résoudre les erreurs CORS, selon la cause de l’erreur et les exigences spécifiques de votre application. Voici quelques approches courantes :

Autoriser les demandes d’origine croisée sur le serveur

Si le serveur bloque la demande parce que la configuration CORS du serveur n’autorise pas l’en-tête « Origine », vous pouvez configurer le serveur pour autoriser la demande en ajoutant le domaine de la page Web qui a demandé la liste des origines autorisées, ou en définissant le En-tête Access-Control-Allow-Origin à « *” pour permettre à n’importe quel domaine d’accéder à la ressource.

L’en-tête Access-Control-Allow-Origin est un en-tête de réponse HTTP qui est utilisé dans le cas de CORS (Cross-Origin Resource Sharing). Il spécifie quel domaine est autorisé à accéder à la ressource dans la réponse.

Lorsqu’une page Web demande un domaine différent, le navigateur envoie une requête HTTP avec un en-tête « Origine » qui indique le domaine de la page Web qui a fait la demande. En fonction de la valeur de l’en-tête « Origin », le serveur peut autoriser ou refuser la demande. Si le serveur accepte la demande, il envoie une réponse HTTP avec un en-tête Access-Control-Allow-Origin indiquant le domaine autorisé à accéder à la ressource.

Pour notre exemple précédent, notre page « https://my-website.com » demande la page de notre ami « https://my-friend.com », le serveur à « https://my-friend.com » pourrait envoyer la réponse suivante :

Access-Control-Allow-Origin: https://my-website.com

Cela permet à notre page « https://my-website.com » d’accéder à la ressource mais empêche tout autre domaine de le faire.

L’en-tête Access-Control-Allow-Origin peut également être défini sur « *” pour autoriser l’accès à la ressource à partir de n’importe quel domaine. Cependant, utilisez-le avec prudence car il peut exposer des données ou des ressources sensibles à des domaines non autorisés.

Autoriser certaines méthodes HTTP

Lors de la mise à jour de votre configuration CORS, vous devez utiliser l’en-tête « Access-Control-Allow-Methods » dans les réponses HTTP de votre serveur pour autoriser les méthodes HTTP nécessaires. Cet en-tête indique quelles méthodes HTTP sont autorisées dans les requêtes cross-origin.

Pour autoriser les méthodes GET et POST, par exemple, incluez l’en-tête suivant dans les réponses HTTP de votre serveur :

Access-Control-Allow-Methods: GET, POST

Vous pouvez également utiliser le « *” pour autoriser toutes les méthodes HTTP, mais cela doit être fait avec prudence car cela pourrait exposer votre serveur à des failles de sécurité.

Vous devrez peut-être également mettre à jour la configuration CORS de votre serveur pour autoriser les en-têtes HTTP nécessaires en plus de spécifier les méthodes autorisées. Ceci est accompli grâce à l’utilisation de l’en-tête « Access-Control-Allow-Headers », qui spécifie quels en-têtes HTTP sont autorisés dans les requêtes cross-origin.

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

Conclusion

Dans l’ensemble, CORS est une fonctionnalité de sécurité importante qui contribue à assurer la sûreté et la sécurité du Web, et est essentielle pour les applications Web modernes qui effectuent des requêtes d’origine croisée.