Comment savoir si une clé API est exposée dans Next.js ?

Une clé API est exposée si elle apparaît dans du code public envoyé au navigateur, dans les en-têtes d'une requête réseau depuis le client, ou si elle utilise le préfixe NEXT_PUBLIC_ alors qu'elle devrait être secrète. Les clés destinées au serveur ne doivent jamais être importées dans un composant marqué "use client".

Lorsque vous générez une application avec un agent IA (Cursor, Lovable, Bolt.new), la gestion des clés est souvent la première faille. Par souci de rapidité, l'IA crée un code qui expose accidentellement vos clés privées (OpenAI, Stripe) directement aux yeux de tous.

L'architecture Client / Serveur de Next.js

Next.js (App Router) permet d'exécuter du code à la fois côté Serveur (Node.js sécurisé) et côté Client (Navigateur, public).

La convention des variables d'environnement

Dans Next.js, seules les variables d'environnement préfixées par NEXT_PUBLIC_ sont incluses dans le JavaScript public envoyé au navigateur.

# Exposé au public (Sécurisé car conçu pour le frontend)
NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...

# Secret et protégé côté serveur UNIQUEMENT
STRIPE_SECRET_KEY=sk_live_123456...
OPENAI_API_KEY=sk-123456...

L'erreur fatale du Vibe Coding

Souvent, une IA génère un composant "Client" ("use client") et y insère directement l'appel à une API tierce pour aller plus vite :

"use client"; // Le fichier est envoyé au navigateur

// ❌ DANGER : Ce code expose la clé OpenAI publiquement
export function ChatGenerator() {
  const generate = async () => {
    const res = await fetch("https://api.openai.com/v1/chat/completions", {
      headers: {
        Authorization: `Bearer ${process.env.OPENAI_API_KEY}`
      }
    });
  }
}

Même sans le préfixe NEXT_PUBLIC_, l'utilisation de process.env.OPENAI_API_KEY dans un fichier marqué "use client" va obliger le compilateur de Next.js à injecter la vraie clé (ex: sk-12345...) dans le code source de la page. N'importe quel visiteur, ou pire, des bots automatisés scannant le web, pourront voler votre clé.

3 méthodes pour détecter une fuite de clés API

La solution de sécurité : Route Handlers et Server Actions

Toute interaction avec une API payante ou nécessitant des clés privées doit être isolée sur votre backend.

1. Créez un fichier backend (ex: app/api/chat/route.ts ou une Server Action) qui s'exécute uniquement sur le serveur.
2. Effectuez l'appel API sécurisé vers OpenAI ou Stripe depuis ce fichier.
3. Modifiez votre composant React côté client pour appeler votre propre route interne (ex: fetch('/api/chat')).

Foire aux questions (FAQ)

Si vous n'êtes pas certain que votre code généré par l'IA respecte ces règles, ou si vous vous demandez pourquoi votre SaaS consomme des API payantes sans utilisateurs, commencez par lancer une Analyse Express sur votre domaine public, puis passez à l'Audit Complet.