brief-20/docs/CORS_CONFIGURATION.md

Configuration CORS

Ce document explique comment le Cross-Origin Resource Sharing (CORS) est configuré dans l'application.

Vue d'ensemble

Le CORS est un mécanisme de sécurité qui permet aux serveurs de spécifier quels domaines peuvent accéder à leurs ressources. Cette configuration est essentielle pour sécuriser l'API tout en permettant au frontend de communiquer avec le backend.

Dans notre application, nous avons configuré le CORS différemment pour les environnements de développement et de production :

• Environnement de développement : Configuration permissive pour faciliter le développement
• Environnement de production : Configuration restrictive pour sécuriser l'application

Configuration dans le Backend

Configuration HTTP (NestJS)

La configuration CORS pour les requêtes HTTP est définie dans le fichier main.ts :

// Configuration CORS selon l'environnement
const environment = configService.get<string>('NODE_ENV', 'development');
const frontendUrl = configService.get<string>('FRONTEND_URL', 'http://localhost:3001');

if (environment === 'development') {
  // En développement, on autorise toutes les origines avec credentials
  app.enableCors({
    origin: true,
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    credentials: true,
  });
  console.log('CORS configured for development environment (all origins allowed)');
} else {
  // En production, on restreint les origines autorisées
  const allowedOrigins = [frontendUrl];
  // Ajouter d'autres origines si nécessaire (ex: sous-domaines, CDN, etc.)
  if (configService.get<string>('ADDITIONAL_CORS_ORIGINS')) {
    allowedOrigins.push(...configService.get<string>('ADDITIONAL_CORS_ORIGINS').split(','));
  }
  
  app.enableCors({
    origin: (origin, callback) => {
      // Permettre les requêtes sans origine (comme les appels d'API mobile)
      if (!origin || allowedOrigins.includes(origin)) {
        callback(null, true);
      } else {
        callback(new Error(`Origin ${origin} not allowed by CORS`));
      }
    },
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
    credentials: true,
    maxAge: 86400, // 24 heures de mise en cache des résultats preflight
  });
  console.log(`CORS configured for production environment with allowed origins: ${allowedOrigins.join(', ')}`);
}

Configuration WebSockets (Socket.IO)

La configuration CORS pour les WebSockets est définie dans le décorateur @WebSocketGateway dans le fichier websockets.gateway.ts :

@WebSocketGateway({
  cors: {
    origin: process.env.NODE_ENV === 'development' 
      ? true 
      : [
          process.env.FRONTEND_URL || 'http://localhost:3001',
          ...(process.env.ADDITIONAL_CORS_ORIGINS ? process.env.ADDITIONAL_CORS_ORIGINS.split(',') : [])
        ],
    credentials: true,
  },
})

Variables d'environnement

Les variables d'environnement suivantes sont utilisées pour configurer le CORS :

• NODE_ENV : Détermine l'environnement (development ou production)
• FRONTEND_URL : URL du frontend (par défaut : http://localhost:3001)
• ADDITIONAL_CORS_ORIGINS : Liste d'origines supplémentaires autorisées en production (séparées par des virgules)

Ces variables sont définies dans le fichier .env à la racine du projet backend.

Configuration dans le Frontend

Le frontend est configuré pour envoyer des requêtes avec les credentials (cookies, en-têtes d'autorisation) :

// Dans api.ts
const fetchOptions: RequestInit = {
  ...options,
  headers,
  credentials: 'include', // Include cookies for session management
};

// Dans socket-context.tsx
const socketInstance = io(API_URL, {
  withCredentials: true,
  query: {
    userId: user.id,
  },
});

Modification de la configuration

Ajouter des origines autorisées en production

Pour ajouter des origines autorisées en production, modifiez la variable ADDITIONAL_CORS_ORIGINS dans le fichier .env :

ADDITIONAL_CORS_ORIGINS=https://app2.example.com,https://app3.example.com

Modifier la configuration CORS

Pour modifier la configuration CORS, vous pouvez ajuster les paramètres dans les fichiers main.ts et websockets.gateway.ts.

Considérations de sécurité

• En production, limitez les origines autorisées aux domaines de confiance
• Utilisez HTTPS pour toutes les communications en production
• Évitez d'utiliser origin: '*' en production, car cela ne permet pas l'envoi de credentials
• Limitez les méthodes HTTP autorisées aux méthodes nécessaires
• Utilisez le paramètre maxAge pour réduire le nombre de requêtes preflight