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:
parent
b3a95378f1
commit
cee85c9885
127
docs/CORS_CONFIGURATION.md
Normal file
127
docs/CORS_CONFIGURATION.md
Normal 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
|
@ -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)
|
||||
|
Loading…
x
Reference in New Issue
Block a user