From cee85c9885db4e86397431a0f190883440251f17 Mon Sep 17 00:00:00 2001 From: Avnyr Date: Fri, 16 May 2025 18:12:13 +0200 Subject: [PATCH] docs: add CORS configuration guide and update status document - Added `CORS_CONFIGURATION.md` to outline CORS setup for development and production environments. - Removed completed CORS-related task from `PROJECT_STATUS.md`. --- docs/CORS_CONFIGURATION.md | 127 +++++++++++++++++++++++++++++++++++++ docs/PROJECT_STATUS.md | 1 - 2 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 docs/CORS_CONFIGURATION.md diff --git a/docs/CORS_CONFIGURATION.md b/docs/CORS_CONFIGURATION.md new file mode 100644 index 0000000..621434b --- /dev/null +++ b/docs/CORS_CONFIGURATION.md @@ -0,0 +1,127 @@ +# 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 \ No newline at end of file diff --git a/docs/PROJECT_STATUS.md b/docs/PROJECT_STATUS.md index 2daf7b0..9de979e 100644 --- a/docs/PROJECT_STATUS.md +++ b/docs/PROJECT_STATUS.md @@ -186,7 +186,6 @@ Nous avons élaboré un plan de bataille complet pour l'implémentation du backe 3. **Sécurité** - Implémenter la validation des entrées avec class-validator - - Configurer CORS pour sécuriser les API - Mettre en place la protection contre les attaques CSRF ### Frontend (Priorité Haute)