La distinction entre secrets privés et variables publiques est la frontière la plus critique d'un projet full-stack. Comprenez pourquoi les variables frontend finissent compilées dans le code source de tous vos visiteurs et comment protéger vos secrets backend.
Compilées en dur dans les fichiers .js : visibles par quiconque ouvre les outils DevTools (F12).
Stockés sur le serveur uniquement : inaccessibles au navigateur et jamais envoyés au client.
NEXT_PUBLIC_ ou VITE_ garantit que vous n'exposez pas un secret par mégarde.
Configuration des variables d'environnement chiffrées dans les dashboards Vercel et Render.
# 1. FRONTEND (.env de l'application cliente - VISIBLE DANS LE NAVIGATEUR) : # ✅ Acceptable (données publiques nécessaires au client) : NEXT_PUBLIC_API_URL=https://api.learnweb.com/api/v1 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_51Abc123PublicKeYThatEveryoneCanSee NEXT_PUBLIC_GA_TRACKING_ID=G-ABC123XYZ # ❌ DANGER MORTEL DANS LE FRONTEND (À BANNIR ABSOLUMENT) : # STRIPE_SECRET_KEY=sk_live_SECRET_DO_NOT_EXPOSE <- TOUT LE MONDE PEUT VOUS RUINER ! # DB_PASSWORD=MonMotDePasseSecret123 <- VOL COMPLET DE VOTRE BASE ! # 2. BACKEND (.env du serveur Node / Laravel - STRICTEMENT PRIVÉ ET PROTÉGÉ) : PORT=3000 NODE_ENV=production DATABASE_URL=mysql://admin_prod:VeryStrongPassword!98@127.0.0.1:3306/learnweb_db JWT_SECRET=c8e76f1234567890abcdef1234567890abcdef1234567890 STRIPE_SECRET_KEY=sk_live_51Abc987SecretKeyUsedOnlyByServerWorkers
.env et j'ai écrit process.env.MA_CLE dans mon composant React, donc personne ne peut la voir. »C'est FAUX !
Pendant l'étape npm run build, le bundler (Webpack/Vite/Rollup) prend la valeur de la variable et l'écrit en texte clair dans le fichier JavaScript final. N'importe quel internaute qui fait un clic droit « Inspecter > Réseau > main.js » et recherche le mot sk_live trouve votre clé secrète en 5 secondes !
VITE_ sont injectées dans le code client.NEXT_PUBLIC_ sont visibles par les composants.| Type de Donnée ou Clé | Emplacement Légal | Peut-elle Être Publique ? | Exemple Concret |
|---|---|---|---|
| URL de base de l'API | Frontend & Backend | ✅ Oui (le navigateur doit savoir où envoyer les requêtes) | https://api.learnweb.com |
| Clé publique de paiement | Frontend | ✅ Oui (sert à afficher le formulaire Stripe Elements sécurisé) | pk_live_... |
| Clé secrète de paiement | Backend UNIQUEMENT | ❌ JAMAIS (permet d'émettre des remboursements et virements) | sk_live_... |
| Mot de passe de BDD | Backend UNIQUEMENT | ❌ JAMAIS (donne un accès total en lecture/écriture aux données) | DATABASE_URL |
| Secret de signature JWT | Backend UNIQUEMENT | ❌ JAMAIS (permettrait à un pirate de signer ses propres tokens admin) | JWT_SECRET |