# Configuration Content Security Policy (CSP)

## Vue d'ensemble

Le site utilise le package **Spatie Laravel CSP** pour gérer la Content Security Policy et protéger contre les attaques XSS (Cross-Site Scripting), injection de code malveillant et autres vulnérabilités.

## Fichiers de configuration

- **Config** : `config/csp.php`
- **Policy personnalisée** : `app/Support/CustomCspPolicy.php`
- **Middleware** : Automatiquement appliqué via `bootstrap/app.php`

## Directives CSP configurées

### 1. script-src (Scripts JavaScript)

**Sources autorisées :**
- `'self'` - Scripts depuis le même domaine
- `'unsafe-inline'` - Scripts inline (nécessaire pour Tailwind CDN)
- `'unsafe-eval'` - eval() JavaScript (nécessaire pour certaines librairies)
- `blob:` - Scripts blob (extensions navigateur)
- `cdn.tailwindcss.com` - Tailwind CSS CDN
- `cdnjs.cloudflare.com` - Font Awesome et autres librairies
- `cdn.jsdelivr.net` - **Alpine.js** et autres librairies
- `www.youtube.com` - Scripts YouTube
- `www.google.com` - Google APIs
- `www.gstatic.com` - Google static content

**Raison :** Permet le chargement de tous les scripts CDN utilisés par le site.

### 2. style-src (Feuilles de style CSS)

**Sources autorisées :**
- `'self'` - Styles depuis le même domaine
- `'unsafe-inline'` - Styles inline
- `cdn.tailwindcss.com` - Tailwind CSS
- `cdnjs.cloudflare.com` - Font Awesome
- `fonts.googleapis.com` - Google Fonts

**Raison :** Permet le chargement des styles et fonts externes.

### 3. font-src (Polices de caractères)

**Sources autorisées :**
- `'self'` - Polices locales
- `data:` - Data URIs pour les polices
- `cdnjs.cloudflare.com` - Font Awesome fonts
- `fonts.gstatic.com` - Google Fonts

**Raison :** Permet le chargement des polices web.

### 4. img-src (Images)

**Sources autorisées :**
- `'self'` - Images locales
- `data:` - Data URIs
- `blob:` - Blob URLs
- `https:` - Toutes les images HTTPS

**Raison :** Permet le chargement d'images depuis n'importe quelle source HTTPS.

### 5. frame-src (iFrames)

**Sources autorisées :**
- `'self'` - iFrames du même domaine
- `www.youtube.com` - Vidéos YouTube
- `www.youtube-nocookie.com` - Vidéos YouTube (mode privé)

**Raison :** Permet l'intégration de vidéos YouTube.

### 6. connect-src (Connexions AJAX/Fetch)

**Sources autorisées :**
- `'self'` - API locale
- `www.youtube.com` - API YouTube
- `youtube.com` - API YouTube
- `fonts.googleapis.com` - Google Fonts API
- `fonts.gstatic.com` - Google Fonts static

**Raison :** Permet les requêtes vers les APIs externes utilisées.

### 7. media-src (Médias audio/vidéo)

**Sources autorisées :**
- `'self'` - Médias locaux
- `blob:` - Blob URLs pour médias

**Raison :** Permet la lecture de médias locaux et blob.

### 8. object-src (Plugins)

**Sources autorisées :**
- `'none'` - **Bloqué**

**Raison :** Sécurité - les plugins (Flash, etc.) sont bloqués.

### 9. base-uri (Balise <base>)

**Sources autorisées :**
- `'self'` - Uniquement le domaine actuel

**Raison :** Empêche la modification de l'URL de base.

### 10. form-action (Soumission de formulaires)

**Sources autorisées :**
- `'self'` - Uniquement vers le même domaine

**Raison :** Empêche l'envoi de formulaires vers des domaines externes.

### 11. frame-ancestors (Protection Clickjacking)

**Sources autorisées :**
- `'self'` - Peut être inclus uniquement dans des iframes du même domaine

**Raison :** Protection contre le clickjacking.

### 12. upgrade-insecure-requests (Production uniquement)

**Activé en production** pour forcer HTTPS sur toutes les requêtes.

## Résolution du problème Alpine.js

### Problème initial
```
Loading the script 'https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js'
violates the following Content Security Policy directive: "script-src 'self'
'unsafe-inline' 'unsafe-eval' blob: cdn.tailwindcss.com cdnjs.cloudflare.com
www.youtube.com www.google.com www.gstatic.com".
```

### Solution appliquée
Ajout de `cdn.jsdelivr.net` dans la directive `script-src` :

```php
$this->addDirective('script-src', [
    "'self'",
    "'unsafe-inline'",
    "'unsafe-eval'",
    'blob:',
    'cdn.tailwindcss.com',
    'cdnjs.cloudflare.com',
    'cdn.jsdelivr.net', // ✅ Ajouté pour Alpine.js
    'www.youtube.com',
    'www.google.com',
    'www.gstatic.com',
]);
```

## Activation/Désactivation de la CSP

### Via fichier .env
```env
CSP_ENABLED=true    # Activer la CSP
CSP_ENABLED=false   # Désactiver la CSP (développement uniquement)
```

### Nonces (recommandé pour production)
```env
CSP_NONCE_ENABLED=true   # Utiliser des nonces pour les scripts inline
```

## Ajout d'une nouvelle source CDN

Si vous devez ajouter un nouveau CDN :

1. **Éditez** `app/Support/CustomCspPolicy.php`
2. **Ajoutez la source** dans la directive appropriée :
   ```php
   $this->addDirective('script-src', [
       // ... sources existantes ...
       'nouveau-cdn.com', // Nouvelle source
   ]);
   ```
3. **Nettoyez le cache** :
   ```bash
   php artisan config:clear
   php artisan cache:clear
   ```

## Débogage des erreurs CSP

### Voir les violations dans la console
Les violations CSP apparaissent dans la **Console du navigateur** (F12) :
```
Refused to load the script 'https://example.com/script.js' because it
violates the following Content Security Policy directive: "script-src ..."
```

### Tester en mode Report-Only
Modifiez `config/csp.php` :
```php
'report_only_policy' => App\Support\CustomCspPolicy::class,
```

Cela signale les violations **sans bloquer** les ressources.

### Collecter les rapports de violation
Utilisez un service comme [report-uri.com](https://report-uri.com/) :
```env
CSP_REPORT_URI=https://your-domain.report-uri.com/r/d/csp/enforce
```

## Bonnes pratiques de sécurité

### ✅ Recommandations

1. **Éviter 'unsafe-inline' et 'unsafe-eval' en production**
   - Actuellement nécessaires pour Tailwind CDN
   - Envisager de compiler Tailwind en local pour production

2. **Utiliser des nonces pour les scripts inline**
   ```php
   CSP_NONCE_ENABLED=true
   ```

3. **Limiter les sources aux domaines stricts**
   - Éviter `https:` trop permissif
   - Lister explicitement chaque CDN

4. **Tester régulièrement**
   - Vérifier la console navigateur
   - Tester sur mobile et desktop

### ❌ À éviter

- `'unsafe-inline'` sans nonces
- `'unsafe-eval'` si possible
- Wildcards comme `*.com`
- Sources HTTP en production

## Compatibilité navigateurs

- ✅ Chrome/Edge 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Chrome Android
- ✅ Safari iOS

## Ressources

- [MDN - Content Security Policy](https://developer.mozilla.org/fr/docs/Web/HTTP/CSP)
- [Spatie Laravel CSP Documentation](https://github.com/spatie/laravel-csp)
- [CSP Evaluator (Google)](https://csp-evaluator.withgoogle.com/)
- [Report URI](https://report-uri.com/)

## Maintenance

### Après chaque mise à jour du site
1. Vérifier la console pour les erreurs CSP
2. Ajouter les nouvelles sources si nécessaire
3. Nettoyer le cache : `php artisan config:clear`

### Surveillance
- Monitorer les rapports CSP si configurés
- Vérifier les logs Laravel pour les violations
- Tester régulièrement sur différents navigateurs