• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • Restreindre ou autoriser le partage de ressources entre sites à l'aide de l'en-tête CORS.

    L'en-tête CORS (Cross-Origin Resource Sharing) est pris en charge sur tous les navigateurs modernes.

    Puis-je utiliser des cors? Les données sur la prise en charge des cors figurent sur les principaux navigateurs de caniuse.com.

    Par défaut, le navigateur limite les requêtes HTTP d'origine croisée via des scripts. Et, CORS peut être pratique pour réutiliser les ressources d'application communes sur d'autres applications Web. Une fois qu'il est correctement ajouté, il demande au navigateur de charger l'application à partir d'une autre origine.

    Il existe six types d'en-têtes CORS courants qu'un serveur peut envoyer. Explorons-les.

    Access-Control-Allow-Origin

    Le plus populaire, il indique au navigateur de charger les ressources sur l'origine autorisée. Il prend en charge le caractère générique (*) et, ce faisant, tout domaine peut charger les ressources. Cependant, il a une option pour autoriser une origine spécifique.

    Apache

    Ajoutez ce qui suit dans httpd.conf ou tout autre fichier de configuration en cours d'utilisation.

    Header set Access-Control-Allow-Origin "*"

    Redémarrez Apache pour tester. Vous devriez les voir dans les en-têtes de réponse.

    Et, pour autoriser à partir d'une origine spécifique (ex: https://gf.dev), vous pouvez utiliser ce qui suit.

    Header set Access-Control-Allow-Origin "https://gf.dev"

    Nginx

    Voici un exemple pour autoriser l'origine https://geekflare.dev. Ajoutez ce qui suit dans le server bloc de nginx.conf ou fichier de configuration en cours d'utilisation.

    add_header Access-Control-Allow-Origin "https://geekflare.dev";

    Access-Control-Allow-Methods

    Le navigateur peut lancer une ou plusieurs méthodes HTTP pour accéder aux ressources. Ex: - GET, PUT, OPTIONS, PUT, DELETE, POST

    Apache

    Pour autoriser uniquement GET et POST.

    Header add Access-Control-Allow-Methods "GET, POST"

    Nginx

    Disons que vous devez ajouter les méthodes DELETE et OPTIONS, puis vous pouvez ajouter comme ci-dessous.

    add_header Access-Control-Allow-Methods "DELETE, OPTIONS";

    Après le redémarrage, vous devriez les voir dans les en-têtes de réponse.

    Access-Control-Allow-Headers

    Les en-têtes suivants sont dans la liste sûre, vous n'avez donc pas besoin d'en ajouter un. Cela devrait fonctionner par défaut.

    • Content-Type
    • Accept
    • Contenu Langue
    • Accept-Language

    Cependant, si vous devez en ajouter un personnalisé, vous pouvez le faire. Il prend en charge un ou plusieurs en-têtes.

    Apache

    Disons que vous voulez autoriser X-Custom-Header et X-Powered-By En-têtes.

    Header always set Access-Control-Allow-Headers "X-Custom-Header, X-Powered-By"

    Après un redémarrage, vous devriez voir le résultat dans les en-têtes de réponse.

    Nginx

    Un exemple d'ajout de X-Customer-Software et d'en-tête X-My-Custom.

    add_header Access-Control-Allow-Headers "X-Custom-Software, X-My-Custom";

    Access-Control-Expose-Headers

    Les en-têtes suivants sont déjà une liste sûre. Cela signifie que vous n'avez pas besoin d'ajouter si vous souhaitez les exposer.

    • Expire le
    • Pragma
    • Cache-Control
    • Last-Modified
    • Contenu Langue
    • Content-Type

    Mais, si vous avez besoin d'autres que la liste sûre, vous pouvez les autoriser comme suit.

    Apache

    Utilisez un caractère générique pour exposer tous les en-têtes.

    Header always set Access-Control-Expose-Headers "*"

    Remarque: un caractère générique n'expose toujours pas Authorization header, et si vous en avez besoin, vous devez le mentionner explicitement.

    Header always set Access-Control-Expose-Headers "Authorization, *"

    Le résultat devrait ressembler à ceci.

    Nginx

    Si vous voulez exposer Origin en-tête.

    add_header Access-Control-Expose-Headers "Origin";

    Access-Control-Max-Age

    Connaissez-vous les données de Access-Control-Allow-Headers et Access-Control-Allow-Methods les en-têtes peuvent être mis en cache? Il peut être mis en cache jusqu'à 24 heures dans Firefox, 2 heures dans Chrome (76+).

    Pour désactiver la mise en cache, vous pouvez conserver la valeur comme -1

    Apache

    Mettre en cache pendant 15 minutes.

    Header always set Access-Control-Max-Age "900"

    Comme vous pouvez le voir, la valeur est en secondes.

    Nginx

    Mettre en cache pendant une heure.

    add_header Access-Control-Max-Age "3600";

    Une fois ajouté, redémarrez Nginx pour voir les résultats.

    Access-Control-Allow-Credentials

    Il n'y a qu'une seule option à définir ici - true. This est d'autoriser si vous souhaitez exposer des informations d'identification telles que les cookies, les certificats TLS, l'autorisation.

    Apache

    Header always set Access-Control-Allow-Credentials "true"

    Nginx

    add_header Access-Control-Allow-Credentials "true";

    et le résultat.

    Vérification des résultats

    Une fois les en-têtes nécessaires ajoutés, vous pouvez utiliser les outils de développement intégrés au navigateur ou un vérificateur d'en-tête HTTP en ligne.

    Conclusion

    J'espère que ce qui précède vous aidera à implémenter l'en-tête CORS dans Apache HTTP et le serveur Web Nginx pour une meilleure sécurité. Vous pourriez également être intéressé à postuler En-têtes sécurisés recommandés par OWASP.