Comment utiliser CORS avec Nginx

Qu'est-ce que le CORS

CORS, également connu sous le nom de partage de ressources d'origine croisée, est une technique utilisée dans les navigateurs Web modernes qui contrôle l'accès aux ressources hébergées sur un serveur Web. CORS utilise des en-têtes supplémentaires tels que origin, access-control-origin et bien d'autres pour déterminer si la ressource demandée a l'autorisation d'être envoyée au navigateur. L'objectif principal de CORS est d'empêcher une application Web exécutée dans un navigateur Web d'accéder à des ressources hébergées dans une origine différente lorsqu'il n'y a pas d'autorisation, ce que cela signifie que l'application Web ne peut pas télécharger de ressources, telles que des images, des scripts, des css comme tout contenu, etc. lorsqu'ils ne sont pas hébergés dans la même origine (généralement tous devraient être dans le même domaine) que l'application Web, sauf si le serveur est configuré pour autoriser ce comportement. En ayant cette implémentation dans un navigateur Web, les utilisateurs peuvent protéger leurs données contre les parties non autorisées. Un pirate peut modifier secrètement une page Web tout en étant au milieu de la connexion pour perturber les activités de l'utilisateur ou accéder à des données précieuses. Cependant, CORS présente également des avantages, tels qu'il permet aux développeurs de charger des ressources d'une origine différente en raison de la rentabilité ou simplement de la commodité. Dans ce cas, ils doivent modifier leur serveur Web pour autoriser de telles demandes. Cet article montre comment le faire facilement sur un serveur Web Nginx.

Qu'est-ce qui déclenche une demande CORS

Toutes les demandes ne déclenchent pas une demande CORS car généralement les ressources sont hébergées dans la même origine que l'application Web. Si c'est différent, alors CORS est déclenché. CORS a deux types de demandes, une demande simple et une demande pré-volée CORS.

La demande simple fonctionne comme une demande régulière, le navigateur Web envoie une demande au serveur pour télécharger une ressource particulière lorsque l'utilisateur l'a lancée, puis le serveur Web vérifie l'origine de la demande, la compare aux règles du serveur Web, si c'est correspond, la ressource est fournie. Ce type de demande utilise les en-têtes OIRIGN et ACCESS-CONTROL-ALLOW-ORIGIN pour déterminer si la ressource doit être fournie ou non. La demande simple n'est déclenchée que si des méthodes de demande telles que GET, HEAD, POST sont utilisées et des en-têtes tels que Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width sont utilisés. Même dans ce cas, tous les types de contenu ne déclenchent pas une simple requête. Ici, seuls les types d'encodage de formulaire déclenchent une requête simple.

Le type de demande pré-volée est assez différent car il n'y a pas d'accès direct aux ressources au premier tour. Lorsque les conditions susmentionnées sont modifiées d'une manière ou d'une autre, soit en utilisant un en-tête de demande différent ou un type de contenu différent, une demande pré-volée est déclenchée. Dans les demandes pré-volées, le navigateur Web s'assure d'abord qu'il peut accéder à la ressource en communiquant avec le navigateur Web, puis lorsque le navigateur Web a répondu avec une réponse OK (HTTP 200), il envoie une autre demande pour télécharger la ressource. Il utilise la méthode de demande HTTP OPTION pour lancer la première demande, puis il utilise les types de demande similaires à GET, POST pour télécharger les ressources.

Comment configurer Nginx pour prendre en charge les demandes CORS

Cette section montre comment configurer un serveur Web nginx pour permettre le partage de ressources entre les origines. Cela ne peut être fait que si le développeur a accès au serveur Web, car cela implique de modifier le fichier de configuration de Nginx.

Utilisez l'extrait de code simple suivant pour autoriser les requêtes CORS. Cela doit être copié dans le fichier par défaut du service nginx dans Ubuntu ou toute autre plate-forme.

emplacement \
if ($request_method = 'OPTIONS')
add_header 'Access-Control-Allow-Origin' 'https://localhost;
add_header 'Access-Control-Allow-Methods"POST, OPTIONS' ;
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type"text/plain; charset=utf-8';
retour 204;

if ($request_method = 'POST')
add_header 'Access-Control-Allow-Origin"https://localhost ;
add_header 'Access-Control-Allow-Methods' 'POST' ;

L'extrait de code de base va comme ci-dessus. Il contient des directives telles que request_method, add_header pour identifier le type de demande et définir l'en-tête de la réponse pour que le navigateur lise respectivement. L'en-tête Access-control-allow-origin définit à quelle origine la ressource a accès, par exemple si une application Web hébergée dans github veut accéder à une image hébergée dans myOwnServer.com, alors l'URL de github doit être utilisée comme valeur de la directive Access-control-allow-origin dans myOwnServer.com, puis chaque fois que l'application Web hébergée dans github envoie des demandes à myOwnServer.com pour télécharger le fichier image, toutes ces demandes sont autorisées. L'en-tête Access-control-allow-method définit les types de requêtes pris en charge par l'application Web qui envoie les requêtes, puis le reste des en-têtes correspond à son âge maximal pour mettre en cache les requêtes et le type de contenu pris en charge.

Comme décrit ci-dessus, une fois la requête OPTION terminée, le navigateur envoie une autre requête pour télécharger les ressources si la première requête a réussi, ses en-têtes sont définis dans la première request_method si crochets.

Outre les directives susmentionnées, il existe d'autres directives importantes dans Nginx qui peuvent être utilisées dans les requêtes CORS. L'une des directives les plus importantes est access-control-allow-headers, ce qu'elle fait est de définir l'en-tête de réponse avec les noms d'en-tête autorisés pour que le navigateur vérifie. Une application Web peut avoir ses propres en-têtes à diverses fins, et si de tels en-têtes sont présents dans les demandes suivantes après la demande OPTIONS initiale, alors tous ces en-têtes doivent être autorisés par le serveur Web avant que la ressource demandée soit partagée.

Il est important que cet extrait de code soit au bon endroit dans le fichier par défaut de Nginx, car Nginx exécute différents blocs d'emplacement en fonction de l'URL correspondante, si un tel bloc d'emplacement ne contient pas cet extrait de code, alors il n'est pas exécuté du tout, et il est donc important de l'utiliser dans tous les blocs de localisation pour la sécurité. Certains des blocs de localisation importants sont Images, PHP (~ \.blocs php$), CSS, etc….

Une fois l'extrait de code susmentionné enregistré, enregistrez le fichier Nginx et rechargez le service Nginx pour que les modifications prennent effet.

Conclusion

CORS, est connu sous le nom de partage de ressources d'origine croisée, et est une technique pour contrôler l'accès aux ressources. Ces ressources peuvent être n'importe quel fichier d'une image à un fichier javascript. L'objectif principal de CORS est de renforcer la sécurité des applications Web pour empêcher les attaques de l'homme du milieu. Cependant, CORS peut aussi avoir des avantages. Dans ce cas, le CORS doit être activé car il n'est pas autorisé par défaut. Le type de requête CORS de base est un type de requête simple, il utilise uniquement les directives ORIGIN et ACCESS-CONTROL-ALLOW-ORIGIN, et avec cette aide, Nginx peut autoriser le navigateur Web à accéder à la ressource demandée en fonction de l'origine. Dans tous les cas, CORS est très utile et doit être utilisé avec précaution.