veza/apps/web/dev_audit/frontend/06_security_frontend.md

# Phase F — Sécurité Frontend

---

## F1. Secrets et données sensibles

### Variables VITE_* exposées au bundle

| Variable | Contenu | Sensible ? |
|----------|---------|-----------|
| `VITE_API_URL` | URL API backend | ❌ Public |
| `VITE_WS_URL` | URL WebSocket | ❌ Public |
| `VITE_STREAM_URL` | URL streaming | ❌ Public |
| `VITE_UPLOAD_URL` | URL upload | ❌ Public |
| `VITE_APP_NAME` | Nom de l'app | ❌ Public |
| `VITE_DEBUG` | Flag debug | ❌ Non sensible |
| `VITE_USE_MSW` | Flag MSW | ❌ Dev only |
| `VITE_FCM_VAPID_KEY` | Clé push notifications | ⚠️ Public par design (VAPID) |
| `VITE_FEATURE_*` | Feature flags | ❌ Non sensible |

**Verdict** : Aucune clé API secrète exposée côté client. ✅

### Fichiers .env

- `.env.local` (450B) : Contient `VITE_DOMAIN`, `VITE_API_URL`, `VITE_WS_URL`, `VITE_STREAM_URL` — **pas de secrets** ✅
- `.env.production` (1.8KB) : Contient URLs et config — **pas de secrets** ✅
- `.env.example` (2.2KB) : Template

**Attention** : `.env.local` et `.env.production` sont versionnés (présents dans le repo). Le `.gitignore` ne semble pas exclure `.env.local`. Même si le contenu n'est pas sensible actuellement, c'est un **risque si quelqu'un ajoute un secret à l'avenir**.

### Stockage JWT

- **httpOnly cookies** : Les tokens JWT sont gérés côté backend via cookies httpOnly ✅
- `TokenStorage.getAccessToken()` retourne `null` en mode cookie — pas d'accès JS aux tokens ✅
- `tokenStorage.ts` est un wrapper de compatibilité, pas de stockage réel en localStorage ✅

---

## F2. XSS

### `dangerouslySetInnerHTML`

| Fichier | Ligne | Source des données | Sanitization |
|---------|-------|--------------------|-------------|
| `features/chat/components/ChatMessages.tsx` | 145-147 | `message.content` (backend) | ✅ `sanitizeChatMessage()` via DOMPurify |
| `features/chat/components/virtualized-chat-messages/VirtualizedChatMessageItem.tsx` | 58-60 | `message.content` (backend) | ✅ `sanitizeChatMessage()` via DOMPurify |

**Sanitization** : `utils/sanitize.ts` (429L) utilise DOMPurify avec :
- Allowlist stricte de tags HTML [sanitize.ts]
- Allowlist d'attributs [sanitize.ts]
- URL schemes limitées (http, https, mailto) [sanitize.ts]
- `javascript:` protocol filtré ✅

**Verdict XSS** : ✅ Les deux usages de `dangerouslySetInnerHTML` sont correctement sanitizés.

### Autres vecteurs XSS

- `eval()` / `new Function()` : **0 occurrence** ✅
- Template literals dans le DOM : Non détecté ✅
- `document.write` : **0 occurrence** ✅

---

## F3. Stockage client

### Données en localStorage

| Clé | Données | Sensible ? | Expiration |
|-----|---------|-----------|-----------|
| `ui-storage` | theme, language, sidebarOpen | ❌ | Persist |
| `veza-cart-storage` | Items du panier | ❌ | Persist |
| `auth-storage` | `isAuthenticated` (boolean) | ❌ | Persist |
| `rememberedEmail` | Email utilisateur | ⚠️ PII | Persist |
| `veza_offline_queue` | Requêtes en attente | ⚠️ Peut contenir des données | Nettoyé |
| `PENDING_ANALYTICS_STORAGE_KEY` | Analytics payload | ❌ | Nettoyé |
| `feature-highlight-*` | Dismissal flags | ❌ | Persist |
| `pwa-install-dismissed` | Flag | ❌ | Persist |
| `veza_wrong_server_shown` | Flag toast | ❌ | Persist |
| **Developer API keys** | **Clés API** | **🔴 OUI** | **Persist** |

**Problème critique** : `services/developerService.ts` stocke des clés API dans localStorage. Même si ce sont des clés de développeur (probablement des API keys publiques), le stockage en localStorage les expose à toute extension de navigateur ou code tiers injecté. **Recommandation : déléguer la gestion au backend.**

### sessionStorage

- Pas d'usage sensible détecté ✅

---

## F4. Dépendances

### Vulnérabilités connues

[DONNÉES INSUFFISANTES — nécessite `npm audit` sur la machine]

### Dépendances à risque

| Dépendance | Version | Risque | Usage |
|-----------|---------|--------|-------|
| `dompurify` | 3.3.x | ✅ Activement maintenu | Sanitization |
| `axios` | 1.13.x | ✅ Récent | HTTP |
| `swagger-ui-react` | 5.31.x | ⚠️ Exposé en production ? | Dev tools |
| `hls.js` | 1.6.x | ✅ Maintenu | Streaming |

**Attention** : `swagger-ui-react` et `swagger-ui-dist` sont en `dependencies` (pas `devDependencies`). Si le composant SwaggerUI est accessible en production, cela expose la documentation API. **Vérifier que la route `/developer` est bien protégée et gated.**

---

## F5. Autres vecteurs

### Open redirect

| Fichier | Risque | Détail |
|---------|--------|--------|
| `features/playlists/hooks/usePlaylistNotifications.ts:203,219,235,251` | 🔴 **HAUT** | `window.location.href = notification.link!` — URL provenant du backend, pas de validation. Si un attaquant compromet les notifications, il peut rediriger vers un site malveillant. |
| Autres `window.location.href` | ✅ Sûr | Tous vers des chemins statiques (`/login`, `/marketplace`, etc.) |

### CORS / CSP

- **CORS** : Géré côté backend. Le proxy Vite en dev élimine les problèmes CORS [vite.config.ts:63-76] ✅
- **CSP** : [DONNÉES INSUFFISANTES — nécessite inspection des headers serveur]

### Prototype pollution

- Pas d'usage de `lodash.merge` ou similaire détecté ✅
- `immer` (10.x) utilisé pour l'immutabilité — protège contre la mutation directe ✅

---

## Classement des vulnérabilités

| Gravité | Vulnérabilité | Fichier:ligne | Exploitabilité | Correction urgence |
|---------|--------------|---------------|----------------|-------------------|
| 🔴 CRITIQUE | Open redirect via notification.link | `usePlaylistNotifications.ts:203,219,235,251` | Moyenne (nécessite compromission backend/notifications) | Immédiate — valider l'URL (same-origin ou allowlist) |
| 🟠 HAUTE | Clés API en localStorage | `developerService.ts:33` | Faible (nécessite accès au navigateur) | Court terme — migrer vers backend |
| 🟡 MOYENNE | `.env.local` versionné | `.env.local` | Faible (pas de secrets actuels) | Ajouter `.env.local` au `.gitignore` |
| 🟡 MOYENNE | swagger-ui en production | `package.json` (dependencies) | Faible (route protégée) | Déplacer en devDependencies si non nécessaire en prod |
| 🟢 BASSE | `rememberedEmail` en localStorage | `LoginPage.tsx:115` | Très faible (PII minimal) | Acceptable avec notice RGPD |

---

## Score Sécurité implicite

Ce score n'est pas dans le tableau principal car la pondération est ×1.5, mais les observations sont globalement positives :
- ✅ httpOnly cookies pour JWT
- ✅ CSRF protection
- ✅ DOMPurify pour `dangerouslySetInnerHTML`
- ✅ Zod validation sur les réponses API
- ✅ Pas de `eval()` ni secrets exposés
- ❌ Open redirect dans usePlaylistNotifications
- ❌ Clés API en localStorage

**Score Sécurité : 7/10**