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`.
This commit is contained in:
Mathis H (Avnyr) 2025-05-16 18:12:13 +02:00
parent b3a95378f1
commit cee85c9885
2 changed files with 127 additions and 1 deletions

127
docs/CORS_CONFIGURATION.md Normal file
View File

@ -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<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` :
```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

View File

@ -186,7 +186,6 @@ Nous avons élaboré un plan de bataille complet pour l'implémentation du backe
3. **Sécurité** 3. **Sécurité**
- Implémenter la validation des entrées avec class-validator - 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 - Mettre en place la protection contre les attaques CSRF
### Frontend (Priorité Haute) ### Frontend (Priorité Haute)