The client said undefined, so the key got a prefix. Then the SDK refused to run in the browser, so it got a flag:
"use client";
const openai = new OpenAI({
apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
dangerouslyAllowBrowser: true,
});
It works. And the OpenAI API key is now in plain text in a JavaScript file every visitor downloads. (A made-up example, but a very common one.)
NEXT_PUBLIC_ values "into any JavaScript sent to the browser".
The OpenAI and Anthropic JS SDKs block browsers by default "to avoid exposing your secret API credentials". dangerouslyAllowBrowser: true switches that guard off.
.env, CI, Dockerfile) dangerouslyAllowBrowser: true``"use client" file (and the "fix" of adding a prefix)define, webpack DefinePlugin, next.config env
Plus a key pasted into a component "just to test".
Fix: call the provider from a server route with a server-only variable, have the page call that route, and rotate any key that was ever deployed. Deleting it from the code is not enough: old builds and caches still have it. In a Vite app with no server, a small serverless or edge function does the same job.
I built BrowserKey, a free VS Code extension that catches all of these for Next.js, Vite, CRA, Expo, Nuxt, Gatsby, SvelteKit and Astro, and for OpenAI, Anthropic, Gemini, Groq, xAI, OpenRouter and more. Six rules, a Quick Fix to rename to a server-only variable, and an activity bar panel:
NEXT_PUBLIC_OPENAI_API_KEY in .env.local is bundled into the browser
new OpenAI({ dangerouslyAllowBrowser: true }) exposes the API key
hardcoded OpenAI key sk-proj-**** in browser code
Keys are always masked. No network, no telemetry, no child processes.
code --install-extension jaytankdev.browserkey
Source (MIT): github.com/jay-tank/browserkey
Full write-up (framework docs, the server route fix, all six rules, FAQ): OpenAI API key exposed in the browser