API keys exposées dans le JavaScript côté client
Tout ce qui est livré au navigateur — scripts inline, JS bundlé, source maps — peut être lu par n’importe qui. Les clés secrètes (OpenAI, clé secrète Stripe, AWS, URLs de base de données) intégrées au code frontend sont, de fait, publiées.
Ce que c’est
Les outils de build intègrent les variables d’environnement à la compilation. Si vous référencez un secret dans le code client, il se retrouve dans le bundle JavaScript que chaque visiteur télécharge.
Il y a une distinction cruciale : les clés publiables/anonymes (pk_live de Stripe, config web Firebase) sont conçues pour être publiques, mais les clés secrètes (sk_live, clés service-role, API keys de fournisseurs) ne le sont pas et ne doivent jamais atteindre le navigateur.
Pourquoi ça compte
Une clé de fournisseur fuitée permet à n’importe qui de faire grimper la consommation sur votre compte — factures de LLM, frais de SMS, dépenses cloud — ou d’accéder aux données que la clé autorise.
Les attaquants ratissent les bundles JavaScript à grande échelle à la recherche de motifs de clés. Un secret commité est généralement exploité quelques minutes après sa mise en ligne.
Comment corriger
Appelez les API tierces depuis une route serveur ou un backend, jamais depuis le navigateur. Le navigateur parle à votre endpoint ; votre endpoint détient la clé.
// app/api/summarize/route.ts (server-only)
export async function POST(req: Request) {
const { text } = await req.json();
const r = await fetch("https://api.openai.com/v1/responses", {
method: "POST",
headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}` },
body: JSON.stringify({ model: "gpt-4o-mini", input: text }),
});
return Response.json(await r.json());
}Dans Next.js, seules les variables préfixées par NEXT_PUBLIC_ sont exposées au navigateur. Ne mettez jamais un secret derrière ce préfixe — réservez-le aux valeurs qui peuvent être publiques sans risque.
Si un secret a été livré au navigateur, révoquez-le et réémettez-le. Le retirer du prochain build n’invalide pas les copies déjà récupérées.
FAQ
Ma clé publiable Stripe (pk_live) pose-t-elle problème dans le frontend ?
Non — les clés publiables sont faites pour être publiques. Le risque, c’est la clé secrète (sk_live), qui doit rester côté serveur.
Puis-je simplement obfusquer la clé ?
Non. L’obfuscation se renverse trivialement. La seule solution est de garder le secret entièrement hors du client.
Votre app est-elle concernée ?
AppSafe détecte ce problème et des dizaines d’autres en un seul scan gratuit.
Scanner mon app gratuitementGuides liés
Fichiers .env exposés : comment les attaquants trouvent vos secrets
Un seul .env accessible peut livrer toute votre stack.
Les source maps en production divulguent votre code source
Les fichiers .map livrés donnent accès à votre code source original.
Les attributs de cookies Secure, HttpOnly et SameSite
Trois attributs qui empêchent le vol des cookies de session.