Avnyr
cee85c9885
- Added `CORS_CONFIGURATION.md` to outline CORS setup for development and production environments. - Removed completed CORS-related task from `PROJECT_STATUS.md`.
127 lines
4.5 KiB
Markdown
127 lines
4.5 KiB
Markdown
# 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 |