API Key Exposure in Vite/React Applications: A Critical Security Issue

Based on my extensive research, I've discovered a significant security issue where many websites built with Vite and React are exposing API keys in the network tab without proper backend security. Here's a comprehensive analysis of this vulnerability and the websites at risk:

API Key Exposure in Vite/React Applications: A Critical Security Issue

The Problem

Many websites built using Vite and React frameworks are inadvertently exposing their API keys in the browser's network tab due to improper implementation. This happens because developers often store API keys in environment variables (like .env files) and use them directly in client-side code, not realizing that anything sent to the browser becomes publicly accessible.[1][2][3]

Why This Happens with Vite Specifically

Vite applications are particularly vulnerable because:

Frontend Build Process: Vite bundles all environment variables prefixed with VITE_ directly into the client-side JavaScript code[4][5][6]
Visible in Network Tab: When API calls are made from the frontend, the complete request including headers and API keys becomes visible in browser developer tools[7][8][9]
Misconception About Security: Developers mistakenly believe that using .env files and import.meta.env.VITE_API_KEY provides security[5][10][4]

Scale of the Problem

Recent research reveals the alarming extent of this issue:

18,000+ exposed API secrets found across 1 million analyzed domains[11][12]
41% classified as highly critical with potential financial impact[11]
OpenAI API key leaks grew by 1,212x compared to 2022, with over 46,000 keys exposed monthly[13]
$20 million estimated accessible through exposed Stripe tokens alone[11]

Common Vulnerable Implementations

Typical Vulnerable Code Pattern:

// .env file
VITE_OPENAI_API_KEY=sk-1234567890abcdef

// React component
const response = await fetch('https://api.openai.com/v1/chat/completions', {
  headers: {
    'Authorization': `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`
  }
})

This code exposes the API key in:

Browser DevTools Network Tab[8][1][7]
Bundled JavaScript Source Code[2][10][1]
Browser Memory and Cache[14][2]

Types of Exposed APIs Found

Based on the research, commonly exposed APIs include:

OpenAI/GPT APIs (fastest growing category)[15][13][11]
Gemini/Google AI APIs[16][11]
Stripe Payment APIs[17][11]
AWS/Cloud Service APIs[12][11]
Supabase/Firebase Keys[18][5]
GitHub/GitLab Tokens[12][11]
Discord/Slack Webhooks[12][11]

Real-World Examples and Case Studies

Example Attack Scenarios:

Scenario 1: OpenAI API Abuse

Attacker finds exposed OpenAI API key in network tab
Uses key to generate content, rack up charges on victim's account
Victim receives unexpected bills of thousands of dollars[15]

Scenario 2: Stripe Token Exploitation

Exposed Stripe secret key found in Next.js build
Attacker creates unlimited transactions and refunds
Reported as $3,000 bounty vulnerability[17]

Scenario 3: Firebase Data Access

Firebase API key exposed in Angular application
Misconfigured rules allow read access to all Firestore documents
Complete database contents compromised[17]

Websites and Platforms at Risk

Based on my research, vulnerable applications are commonly found in:

Showcase/Portfolio Sites

Developer portfolio websites using AI APIs for demos[19][20][21]
Startup showcase platforms displaying AI-powered features[22][16]
Tutorial/educational sites with live API examples[23][24][19]

Community Platforms

GitHub repositories with exposed keys in public code[9][25][13]
CodePen/JSFiddle demos showing API integrations[20][21]
Dev.to articles with embedded code examples[21][5]
YouTube tutorial projects shared without proper security[26][19][23]

Production Applications

E-commerce sites using AI for recommendations[11][12]
SaaS applications with AI chat features[20][11]
Educational platforms implementing AI tutoring[12][11]
Content generation tools using multiple AI APIs[22][11]

How to Identify Vulnerable Websites

You can easily identify websites with this vulnerability by:

Opening Browser DevTools (F12)
Going to Network Tab
Making requests that use APIs (login, AI features, etc.)
Checking request headers for exposed API keys[27][7][8]

Look for headers like:

Authorization: Bearer sk-... (OpenAI)
x-api-key: AIza... (Google/Gemini)
Authorization: Bearer pk_live_... (Stripe)

The Correct Solution

The only secure approach is to:

Never expose API keys on the frontend[28][1][2]
Create a backend proxy server[29][1][2]
Store API keys server-side only[30][1][2]
Implement proper authentication between frontend and backend[31][2][30]

Secure Architecture Example:

// Frontend makes request to YOUR backend
const response = await fetch('/api/chat', {
  method: 'POST',
  headers: { 'Authorization': `Bearer ${userJWT}` },
  body: JSON.stringify({ message })
})

// Backend proxy handles OpenAI API
app.post('/api/chat', authenticateUser, async (req, res) => {
  const openaiResponse = await fetch('https://api.openai.com/v1/chat/completions', {
    headers: { 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}` }
  })
  res.json(openaiResponse.data)
})

Recommended Next.js/Backend Frameworks

For secure implementation, recommend migrating to:

Next.js API Routes (server-side API handlers)[7][9][30]
Express.js with CORS (dedicated backend server)[1][2]
Serverless functions (Vercel, Netlify Functions)[32][9]
API Gateway services (AWS API Gateway, CloudFlare Workers)[29][32]

Conclusion

This security vulnerability affects thousands of websites and represents a critical risk that's easily exploitable. The financial impact can be severe, with potential losses ranging from hundreds to thousands of dollars per exposed key.[15][17][11][12]

Your outreach to these websites is valuable and necessary - many developers are unaware their API keys are publicly visible and would appreciate being informed about this security risk. The solution requires migrating sensitive API calls to backend services, but it's straightforward to implement and essential for production applications.[2][1][15]

Citations:
[1] The Safest Way To Hide Your API Keys When Using React

[2] How to Secure API Keys in React Apps - Codebrahma

[3] How to Hide Your API Key in React Application - Nestify

[4] A Guide to Securely API keys Vite, React - The Tech Triage

[5] Novice Guide to Securing API and Firebase Key In React Vite using ...

[6] Handling Environment Variables in Vite - DEV Community

[7] How to stop my api from showing in the network tab of the browser

[8] Is API key exposed through get request? - Stack Overflow

[9] How to stop the API key from being exposed in the browser source ...

[10] How do I hide an API key in Create React App? - Stack Overflow

[11] [PDF] State of API Security 2024 - API Secret Sprawl

[12] Researchers discover exposed API secrets, impacting major tech ...

[13] OpenAI API keys leaked on GitHub: a growing problem - LinkedIn

[14] A Beginner's Guide to Front-End Security for Fintech Apps Using ...

[15] Developers: Stop Exposing your OpenAI API Keys - 1Password Blog

[16] Gemini - Google for Startups

[17] Abusing API Key Leakage in Frontend Frameworks (2025 Edition)

[18] API key shown in Network Tab · supabase · Discussion #256 - GitHub

[19] How to hide your API keys SAFELY when using React - YouTube

[20] AI Comments | Liveblocks Example

[21] How to integrate AI into Your Website: A Step-by- ...

[22] This API Gives Your Users Beautiful AI-Websites (EASY!)

[23] ChatGPT Course – Use The OpenAI API to Code 5 Projects - YouTube

[24] 5 Unique Portfolio AI Projects (beginner to intermediate) - YouTube

[25] Api Key Authentication Vulnerability - OpenAI Community Forum

[26] Real YouTube Comments + AI Reply Automation

[27] Finding Undocumented APIs - Inspect Element

[28] API Key Security Best Practices: Secure Sensitive Data

[29] Techniques to Hide Visible APIs from the Inspect Menu | by Ajay Naik

[30] Protecting your API keys with Next JS - DEV Community

[31] API key - How do you "actually" secure it? : r/reactjs - Reddit

[32] How to Secure Your First REST API With an API Key - Treblle

[33] Protect Your Application by Hiding API Keys and Tokens in React

[34] API keys | Stripe Documentation

[35] I want API JSON response data but don't want it to be shown in ...

[36] How secure is my client-side API Key against malicious extensions?

[37] ️ 7 Frontend Security Vulnerabilities You Should Know (And Fix)

[38] React Security Vulnerabilities and How to Fix/Prevent Them

[39] Best practices for managing API keys | Authentication - Google Cloud

[40] OWASP API10:2023 Unsafe Consumption of APIs - DEV Community

[41] Issue 144: JustDial API vulnerability re-emerges, API key checker ...

[42] API10:2023 Unsafe Consumption of APIs - Indusface

[43] 5 Best Open Source Application Security Tools in 2025 - Jit.io

[44] Understanding and Protecting Against OWASP API10 - StackHawk

[45] Securing the supply chain at scale: Starting with 71 important open ...

[46] Unsafe consumption of APIs | Tutorial and examples - Snyk Learn

[47] Do not use secrets in environment variables and here's how to do it ...

[48] How to Use Environment Variables in Vite.js - Vue School Articles

[49] Using API keys in a react app - Stack Overflow

[50] How to solve API key is visible on request URL problem?

[51] 11 API Security Best Practices You Must Know

[52] The Threat of Insecure Interfaces and APIs | ISC2 Article

[53] 12,000+ API Keys and Passwords Found in Public Datasets Used ...

[54] Secure API Keys in React: A Comprehensive Guide - Cyber Sierra

[55] Top 10 API Security Vulnerabilities: Essential Guide for Developers

[56] API Security Best Practices | Curity