OpenAI API key exposed in the browser: NEXT_PUBLIC_, VITE_ and dangerouslyAllowBrowser explained
One prefix on an environment variable is enough to put your OpenAI or Anthropic key into the JavaScript every visitor downloads. Here are the five ways AI API keys reach the browser, how to move the call to the server, and BrowserKey, a free VS Code extension that catches each of them before you deploy. Here is a chat feature built the fast way. It is a made-up example, but every line of it is something I have seen in real frontend code: The first version used OPENAI_API_KEY and the client said "undefined". Adding NEXT_PUBLIC_ fixed that. Then the SDK refused to run in the browser, and dangerouslyAllowBrowser: true fixed that too. The feature works. And your OpenAI API key is now exposed in plain text in a JavaScript file that anyone can open from DevTools, copy, and spend on until you notice the bill. Frontend frameworks split environment variables into two groups, and the split is…