Frontend API Key Exposure: Securing Private Keys in Client Bundles

With the rise of rapid vibe coding and AI builders (such as Lovable, Bolt.new, Cursor, and v0), developers frequently make external API calls (e.g., OpenAI, Stripe, Anthropic, Telegram Bot API) directly from client-side React or Vue components.

Any secret environment variable bundled by frontend build tools (Vite, Webpack, Next.js client components) into client-side JavaScript becomes fully visible to anyone inspecting network traffic or application source code.

Vulnerability Risk & Threat Impact

Exposing secret OpenAI keys (sk-...) or Supabase administrative service roles (service_role) in client code allows unauthorized actors to deplete billing quotas, bypass row-level security, or delete database tables.

How Our Scanner Inspects for This Flaw

Site Check passively inspects public script bundles using regex signatures targeting known credential patterns (OpenAI, Anthropic, Stripe secret keys, AWS access keys, and Supabase service roles).

During configuration and secret scanning, the Site Check engine executes lightweight, non-destructive HEAD and GET probes evaluating status code responses (404/403 vs 200). Diagnostic queries adhere to safety bounds without caching payload contents to external storage, ensuring full confidentiality.

Remediation Guide (Step-by-Step Fix)

To resolve this vulnerability, apply the following configuration or code snippet to your web server:

      // INSECURE: Exposing private keys in client code
// const res = await fetch('https://api.openai.com/v1/...', { headers: { Authorization: `Bearer ${NEXT_PUBLIC_OPENAI_KEY}` } });

// SECURE: Proxy request through a backend server endpoint / Route Handler
const res = await fetch('/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
    

• Remove private secret tokens from client-side code and environment variables with public prefixes (e.g., NEXT_PUBLIC_, VITE_).
• Implement dedicated backend route handlers or serverless Edge Functions to proxy authenticated requests.
• Immediately revoke and reissue compromised API keys in the respective service provider consoles.

Attack Anatomy & Real-World Business Impact

Vibe-coders frequently instruct AI assistants to integrate third-party services like OpenAI or Resend directly within client components. Consequently, private tokens become bundled into public main.*.js chunks, where scraper bots harvest sk-[a-zA-Z0-9]{48} patterns and deplete billing quotas.

Compliance Framework Impact: Non-compliance with PCI-DSS Req 6.5.6 (key management) and OWASP API Security Top 10 (API2:2023 Broken Authentication).

CLI Remediation Verification: Terminal Commands

After applying configuration changes or patching source code, verify that the exposure is neutralized using command-line diagnostic tools:

curl -s https://your-domain.com/ | grep -oE "(sk-[a-zA-Z0-9]{20,}|AIza[0-9A-Za-z-_]{35})"
# Output must be empty
    

DevSecOps Best Practices & CI/CD Hardening

Confine all authenticated API requests to server-side Edge Functions, server actions, or backend microservices. Never prefix sensitive API keys with NEXT_PUBLIC_ or VITE_.