# 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` : ```typescript // Configuration CORS selon l'environnement const environment = configService.get('NODE_ENV', 'development'); const frontendUrl = configService.get('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('ADDITIONAL_CORS_ORIGINS')) { allowedOrigins.push(...configService.get('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` : ```typescript @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) : ```typescript // 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