API Keys exposées : la vulnérabilité n°1 des apps construites par l'IA
Lorsque nous scannons des apps construites avec des outils de coding IA, une vulnérabilité apparaît dans plus de 60 % d'entre elles : des API keys exposées dans le JavaScript frontend.
Ce n'est pas un risque théorique. Les clés exposées entraînent des conséquences réelles : accès non autorisé aux bases de données, factures cloud astronomiques, fuites de données et prises de contrôle de comptes. Et cela se produit à grande échelle parce que les outils de coding IA intègrent des secrets dans le code côté client par défaut.
Pourquoi les outils IA exposent vos clés
Quand vous demandez à Lovable d'« ajouter l'auth Supabase » ou que vous dites à Cursor de « connecter mon projet Firebase », l'IA fait ce que vous avez demandé — elle écrit du code qui fonctionne. Mais « fonctionnel » ne signifie pas « sécurisé ».
Voici ce qui se passe généralement :
- L'IA place les clés là où le code en a besoin — en général dans un fichier de configuration frontend ou directement dans le code d'un composant
- L'app fonctionne, donc le développeur la déploie
- Les clés se retrouvent dans le bundle JavaScript, visibles par quiconque ouvre les DevTools
Quelles clés sont exposées ?
Nous catégorisons les clés exposées par niveau de sévérité :
Critical Action immédiate requise
High À corriger rapidement
Low Risk Généralement sans risque en frontend
Comment détecter les clés exposées
Vérification manuelle
Ouvrez votre app déployée, puis :
- Ouvrez les DevTools (F12)
- Allez dans l'onglet Sources
- Recherchez (Ctrl+Shift+F) des patterns comme :
Si vous trouvez des clés critiques, effectuez une rotation immédiatement.
Vérification automatisée
L'analyseur de secrets de ScanVibe scanne les bundles JavaScript de votre app, le code source HTML et les requêtes réseau pour détecter plus de 30 patterns de credentials exposées. Un seul scan couvre l'ensemble.
Comment corriger le problème
La correction dépend de votre framework, mais le principe reste toujours le même : les secrets vont sur le serveur, jamais dans le navigateur.
Next.js
# .env.local
# PUBLIC — safe for browser (no secret access)
NEXT_PUBLIC_SUPABASE_URL=https://abc.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhb...public
# PRIVATE — server-side only
SUPABASE_SERVICE_ROLE_KEY=eyJhb...secret
STRIPE_SECRET_KEY=sk_live_...
OPENAI_API_KEY=sk-...
NEXT_PUBLIC_ sont incluses dans le bundle navigateur. Tout le reste reste côté serveur.Pour les appels API nécessitant des clés secrètes
Créez une route API côté serveur :
// app/api/generate/route.ts (server-side)
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY, // Never in browser
});
export async function POST(request: Request) {
const { prompt } = await request.json();
const response = await openai.chat.completions.create({
model: 'gpt-4',
messages: [{ role: 'user', content: prompt }],
});
return Response.json({ result: response.choices[0].message.content });
}
Puis appelez-la depuis votre frontend :
// Client-side — no API key needed
const response = await fetch('/api/generate', {
method: 'POST',
body: JSON.stringify({ prompt: 'Hello' }),
});
Vite / React (sans Next.js)
# Only VITE_ prefix vars go to the browser
VITE_SUPABASE_URL=https://abc.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhb...public
# These stay server-side (use in a backend)
SUPABASE_SERVICE_ROLE_KEY=eyJhb...secret
Que faire si vos clés sont déjà exposées
Si vous avez découvert des clés exposées en production :
- Effectuez une rotation de la clé immédiatement. Générez-en une nouvelle depuis le tableau de bord du service.
- Vérifiez les utilisations non autorisées. Consultez les tableaux de bord de facturation, les logs API et les journaux d'audit de la base de données.
- Mettez à jour votre code pour utiliser la nouvelle clé uniquement côté serveur.
- Vérifiez l'historique git. Si la clé a un jour été commitée dans un repository, considérez l'ancienne clé comme définitivement compromise — même si vous l'avez supprimée dans un commit ultérieur.
- Utilisez
.gitignorepour exclure les fichiers.envdu contrôle de version.
Où effectuer la rotation des clés
Prévention : bloquez les fuites avant le déploiement
1. Utilisez ScanVibe pour scanner chaque déploiement. Nous détectons les clés exposées avant les attaquants.
2. Ajoutez un pre-commit hook avec des outils comme
gitleaks ou trufflehog pour intercepter les secrets dans les commits.3. Relisez le code généré par l'IA avant de le déployer. Vérifiez la présence de chaînes en dur qui ressemblent à des clés.
4. Formez votre équipe sur la différence entre clés publiques et clés secrètes.
5. Utilisez la validation des variables d'environnement pour vous assurer que les variables côté serveur sont bien définies.
// lib/env.ts
function requireEnv(name: string): string {
const value = process.env[name];
if (!value) throw new Error(`Missing env var: ${name}`);
return value;
}
export const env = {
stripeSecret: requireEnv('STRIPE_SECRET_KEY'),
supabaseServiceRole: requireEnv('SUPABASE_SERVICE_ROLE_KEY'),
};
En résumé
Les outils de coding IA sont formidables pour livrer rapidement. Mais ils ne pensent pas à la sécurité — ils pensent à faire fonctionner votre code. La première chose que vous pouvez faire pour sécuriser votre app construite par l'IA est de vous assurer que vos secrets restent sur le serveur.