Jérôme Cutrona

Version statique de l'intranet de Jérôme Cutrona - Rejoindre la version dynamique 🔒

Les exemples et corrections sont potentiellement non fonctionnels.

B.U.T. Informatique - IUT de Reims - Université de Reims

Configuration CORS pour utiliser l'authentification de l'API avec React

Navigation
  1. Accueil
  2. Objectifs de la séance
  3. Introduction
  4. Configuration de l'API en Symfony
  5. Gestion du certificat du serveur Web de l'API dans le navigateur
  6. Gestion du cookie de session du serveur Web de l'API dans le navigateur
  7. Configuration de l'URL de l'API dans l'application React

Objectifs de la séance

  • Configurer CORS sur l'API en Symfony
  • Configurer les cookies de session sur l'API en Symfony
  • Ajouter les exceptions de sécurité nécessaires dans le navigateur
  • Ajouter les exceptions de cookies tiers nécessaires dans le navigateur

Introduction

Pour obtenir facilement une authentification sur une application React basée sur une API, il est possible d'utiliser le moteur d'authentification de Symfony et de maintenir le mode connecté avec les données de session et donc un cookie de session. Ceci nécessite néanmoins un peu de configuration pour se conformer aux règles de sécurité de partage des cookies tiers.

Configuration de l'API en Symfony

L'API en Symfony doit être configurée pour que les cookies de session contiennent l'attribut « SameSite » ayant pour valeur « None » et qu'ils soient ainsi envoyés par le navigateur quel que soit le contexte. Votre frontal React transmettra donc le cookie de session lors des « fetch() » sur l'API. Pour que ceci fonctionne, votre API doit obligatoirement être servie en HTTPS et ceci va engendrer quelques éléments de configuration supplémentaires.

Travail à réaliser
  1. Dans « config/packages/framework.yaml », modifiez les valeurs de « cookie_secure » et « cookie_samesite » pour obtenir : 
        session:
        cookie_secure: true
        cookie_samesite: none
  2. Dans « config/packages/nelmio_cors.yaml », ajoutez « allow_credentials » : 
    nelmio_cors:
    defaults:
        allow_credentials: true
  3. Supprimez l'option « --no-tls » de « symfony serve » dans vos scripts Composer si elle était présente : 
        "scripts": {
        "start": [
            "Composer\Config::disableProcessTimeout",
            "symfony serve"
        ],

Gestion du certificat du serveur Web de l'API dans le navigateur

Votre serveur d'API devant fonctionner en HTTPS, le certificat autosigné proposé par « symfony serve » sera jugé dangereux par votre navigateur qui refusera d'établir une communication avec le serveur d'API. Il faut donc ajouter une exception dans le navigateur pour pouvoir consulter la version de développement de votre API. Lorsque cette dernière sera en production, vous devrez disposer d'un certificat valide pour que tous les visiteurs puissent la consulter.

Travail à réaliser
  1. Démarrez votre serveur d'API après avoir effectué les modifications de la partie précédente
  2. Vérifiez si votre serveur d'API démarre avec l'erreur suivante: 
    symfony serve
            
     [WARNING] run "symfony server:ca:install" first if you want to run the web server with TLS support, or use "--p12" or  "--no-tls" to avoid this warning
  3. Si c'est le cas, arrêtez-le et lancez la commande proposée puis annulez la saisie du mot de passe « sudo » avec « CTRL + C » 
    symfony server:ca:install
You might have to enter your root password to install the local Certificate Authority certificate
Sudo password:
  4. Si nécessaire, redémarrez votre serveur d'API
  5. Consultez votre API dans le navigateur : « https://127.0.0.1:8000/ »
  6. Constatez l'avertissement du navigateur (ici, sur Chrome) : Your connection is not private
  7. Cliquez sur « Advanced » pour pouvoir accepter l'exception : Your connection is not private, proceed to host

La politique actuelle de lutte contre les cookies tiers, qui permettent de tracer vos visites sur Internet, va bloquer le fonctionnement de la session sur le serveur Web de l'API lorsque cette dernière est interrogée par votre application React. En effet, les deux serveurs fonctionnent sur des ports différents et sont donc vus comme deux serveurs distincts qui ne doivent donc pas se transmettre de cookies tiers. Vous allez ajouter une exception de transmission des cookies tiers vers le serveur d'API.

Travail à réaliser
  1. Dans les préférences du navigateur, accédez aux exceptions de cookies tiers dans « Privacy and security » (ici, sur Chrome) : Privacy and security
  2. Cliquez pour ajouter une exception (ici, sur Chrome) : Privacy and security
  3. Ajoutez une exception pour « http://127.0.0.1:8000/ » (ici, sur Chrome) : Privacy and security, add a site

Configuration de l'URL de l'API dans l'application React

L'application React doit accéder à l'API qui est servie par « https://127.0.0.1:8000/api ».

Travail à réaliser
  1. Modifiez la constante JavaScript qui désigne la base de l'URL du serveur d'API : 
    export const BASE_URL = 'https://127.0.0.1:8000/api';
    Remarque importante

    L'URL désignée dans l'application React doit correspondre exactement à celle utilisée pour les exceptions de certificat et de cookie tiers. Si vous avez utilisé « 127.0.0.1 », ce n'est pas le même nom de serveur que « localhost », bien qu'ils correspondent à la même adresse.

  2. Lancez votre serveur React
  3. Testez l'accès à l'API depuis un « fetch() »
  4. Testez l'authentification et le maintien de la session grâce au cookie de session