veza/docs/archive/frontend-sessions-2026/TEST_CORRECTIONS.md

Tests des Corrections Appliquées

1. Test CSP (Content Security Policy)

Objectif

Vérifier que unsafe-eval est absent en production et que les nonces CSP sont utilisés correctement.

Test à effectuer

1. Build en mode production : npm run build
2. Vérifier le header CSP dans vite.config.ts :
   • En production : doit contenir 'nonce-__CSP_NONCE__' et PAS 'unsafe-eval'
   • En dev : peut contenir 'unsafe-eval' uniquement pour Vite HMR

Fichiers modifiés

• src/utils/csp.ts : Ajout de vérification de mode production dans buildCSPHeaderDev()
• vite.config.ts : Configuration CSP avec nonces en production

Résultat attendu

✅ En production : CSP stricte avec nonces, pas d'unsafe-eval ✅ En dev : CSP permissive avec unsafe-eval uniquement pour Vite HMR

---

2. Test Sanitisation XSS

Objectif

Vérifier que DOMPurify fonctionne correctement et bloque les scripts malveillants.

Test à effectuer

1. Ouvrir la console du navigateur
2. Tester dans un message de chat :

   // Test 1: Script inline
   const testMessage = '<script>alert("XSS")</script>Hello';
   // Doit être sanitized et ne pas exécuter le script
   
   // Test 2: Event handlers
   const testMessage2 = '<img src=x onerror="alert(1)">';
   // Doit être sanitized et retirer onerror
   
   // Test 3: JavaScript URLs
   const testMessage3 = '<a href="javascript:alert(1)">Click</a>';
   // Doit être sanitized et retirer javascript:
   

Fichiers modifiés

• src/utils/sanitize.ts : Configuration DOMPurify renforcée avec documentation

Résultat attendu

✅ Tous les scripts et event handlers sont supprimés ✅ Seuls les tags HTML sûrs sont autorisés (p, br, strong, em, etc.) ✅ Les URLs javascript: sont bloquées

---

3. Test Toasts d'Erreur

Objectif

Vérifier que les erreurs de login/register sont affichées via des toasts.

Test à effectuer

1. Aller sur la page de login (/login)
2. Tenter de se connecter avec des identifiants invalides
3. Vérifier qu'un toast d'erreur s'affiche en plus du message d'erreur dans le formulaire
4. Répéter pour la page d'inscription (/register)

Fichiers modifiés

• src/features/auth/components/LoginForm.tsx : Ajout de toast d'erreur
• src/features/auth/components/RegisterForm.tsx : Ajout de toast d'erreur

Résultat attendu

✅ Toast d'erreur visible en haut de l'écran ✅ Message d'erreur également affiché dans le formulaire ✅ Toast disparaît après quelques secondes

---

4. Test Hardcoding Localhost

Objectif

Vérifier que les fallbacks localhost ne sont pas utilisés en production.

Test à effectuer

1. Build en mode production : npm run build
2. Vérifier que les fichiers suivants lancent une erreur si les variables d'environnement ne sont pas définies :
   • src/services/tokenRefresh.ts
   • src/services/websocket.ts
   • src/config/constants.ts

Fichiers modifiés

• src/services/tokenRefresh.ts : Chemin relatif /api/v1 au lieu de localhost
• src/services/websocket.ts : URL WebSocket dynamique basée sur window.location
• src/config/constants.ts : Validation stricte en production

Résultat attendu

✅ En production : Erreur si variables d'environnement manquantes ✅ En dev : Fallback vers chemins relatifs (pas localhost hardcodé)

---

5. Test Types TypeScript

Objectif

Vérifier que les erreurs TypeScript critiques sont corrigées.

Test à effectuer

1. Exécuter : npm run typecheck
2. Vérifier que les erreurs suivantes sont résolues :
   • OfflineIndicator.tsx : TS7030 (Not all code paths return a value)
   • Onboarding.tsx : TS6133 ('X' is declared but never read)
   • AdminDashboardView.tsx : TS2322 (Type incompatibles)

Fichiers modifiés

• src/components/OfflineIndicator.tsx : Ajout de return undefined dans else
• src/components/Onboarding.tsx : Retrait de l'import 'X' non utilisé
• src/components/admin/AdminDashboardView.tsx : Correction des props Card et Button

Résultat attendu

✅ Aucune erreur TypeScript dans les fichiers modifiés

---

6. Test Fonctionnalités TODO

Objectif

Vérifier que les TODOs fonctionnels sont résolus.

Test à effectuer

1. Play Track : Cliquer sur le bouton play dans les résultats de recherche

   • Fichier : src/features/tracks/components/TrackSearchResults.tsx
   • Résultat attendu : La track est ajoutée à la queue et commence à jouer

2. Follow/Unfollow : Cliquer sur le bouton follow dans un profil utilisateur

   • Fichier : src/features/profile/components/FollowButton.tsx
   • Résultat attendu : L'utilisateur est suivi/désabonné avec un toast de confirmation

Fichiers modifiés

• src/features/tracks/components/TrackSearchResults.tsx : Implémentation de handlePlayTrack
• src/features/profile/components/FollowButton.tsx : Déjà implémenté (documenté)

Résultat attendu

✅ Toutes les fonctionnalités TODO sont implémentées ou documentées

---

Résumé des Tests

Test	Statut	Notes
CSP Production	✅	unsafe-eval absent, nonces utilisés
Sanitisation XSS	✅	DOMPurify configuré correctement
Toasts d'Erreur	✅	Affichage visible pour login/register
Hardcoding Localhost	✅	Erreurs en production si env vars manquantes
Types TypeScript	✅	Erreurs critiques corrigées
TODOs Fonctionnels	✅	Play track implémenté, Follow déjà fait