API-Schlüssel im Frontend-Bundle finden und entfernen

Warum Frontend-Variablen öffentlich sind

Next.js baut Variablen mit dem Präfix NEXT_PUBLIC_ beim Build fest in den JavaScript-Code ein, der an den Browser geht. Variablen ohne dieses Präfix bleiben auf dem Server.

Vite nennt es ausdrücklich: Variablen mit dem Präfix VITE_ sind im Client-Quellcode sichtbar, und VITE_-Variablen sollen keine sensiblen Informationen wie API-Schlüssel enthalten.

So sucht ihr im Bundle

Öffnet die Seite im Browser, dann die Entwicklerwerkzeuge, Reiter „Quellen“ oder „Netzwerk“, und sucht nach typischen Schlüsselmustern, zum Beispiel sk- oder sk_live_. Oder lasst den Check laufen.

Was „entfernen“ heißt

Ein Schlüssel, der einmal öffentlich war, gilt als bekannt. Es reicht nicht, ihn aus dem Code zu löschen.

Widerruft den Schlüssel beim Anbieter und erstellt einen neuen. Verlegt den Aufruf in eine Server-Route und hinterlegt den neuen Schlüssel nur dort als Geheimnis.

Geheim oder veröffentlichbar

Bei Stripe gibt es veröffentlichbare Schlüssel (pk_…) und geheime bzw. eingeschränkte Schlüssel (sk_… und rk_…). Laut Stripe lassen sich nur veröffentlichbare Schlüssel sicher außerhalb des Backends offenlegen. Die anderen gehören in einen Secrets-Tresor der Hosting-Plattform oder in Umgebungsvariablen des Backends.

Typische Fehler

Diese Fehler ergeben sich aus den Doku-Seiten von Next.js, Vite und Stripe:

• Einen geheimen Schlüssel mit NEXT_PUBLIC_ oder VITE_ benennen, damit er im Browser „ankommt“. Genau dann steht er im ausgelieferten Code.
• Den Wert einer NEXT_PUBLIC_-Variable nur im Hosting ändern. Laut Next.js reagiert die App nach dem Build nicht mehr auf Änderungen, der Wert ist beim Build eingefroren. Baut die App danach neu.
• Lokale Env-Dateien einchecken. Next.js schreibt, dass ihr .env-Dateien fast nie ins Repository einchecken wollt; Vite empfiehlt *.local in der .gitignore.
• Geheime Schlüssel in Quellcode oder Konfigurationsdateien legen, die in die Versionsverwaltung kommen, oder sie per E-Mail oder Chat teilen. Von beidem rät Stripe ab.
• Einen offengelegten Schlüssel nur aus dem Code löschen, statt ihn zu widerrufen oder zu rotieren.

Beispiel: Schlüssel nur auf dem Server

Der geheime Schlüssel steht in einer Variable ohne öffentliches Präfix und wird nur in einer Server-Route gelesen. Für Stripe empfiehlt die Doku für serverseitigen Code eingeschränkte Schlüssel (rk_…). Die Datei gehört in die .gitignore, auf dem Hosting hinterlegt ihr dieselbe Variable als Geheimnis:

# .env.local (nicht einchecken)
STRIPE_API_KEY=rk_live_…

// app/api/checkout/route.js: läuft nur auf dem Server
export async function POST() {
  const key = process.env.STRIPE_API_KEY
  // … Stripe mit key aufrufen
}

Häufige Fragen