OpenAI API key (sk-) is in the front-end code

What it means in plain English

An OpenAI API key is a password for your account's usage. OpenAI's key-safety guide says never to deploy that key in a browser or a mobile app. Anyone who can view the page can copy it and spend your quota.

If you use OpenAI's official JavaScript SDK in the browser, it stops with this error:

It looks like you're running in a browser-like environment.

This is disabled by default, as it risks exposing your secret API credentials to attackers.

The SDK's README says enabling the dangerouslyAllowBrowser option "exposes your secret API credentials in the client-side code." Setting it to true silences the error and leaves the key public. Move the call to your server instead.

Likely causes

• The chat feature calls api.openai.com directly from the browser, with the key in the request.
• The key was saved as VITE_OPENAI_API_KEY or NEXT_PUBLIC_OPENAI_API_KEY, which the build inlines into the JavaScript.
• The key was pasted into a component "just for the demo" and then deployed.

How to fix it, step by step

1. Search the built JavaScript for sk-. Remove every copy from front-end code.
2. Send the user's prompt to your own server route. That route reads OPENAI_API_KEY from the environment and calls OpenAI. OpenAI says requests should go through your own backend, and recommends the environment variable name OPENAI_API_KEY.
3. Do not prefix that variable with VITE_ or NEXT_PUBLIC_. Those prefixes publish the value to the browser.
4. If the key was already deployed, rotate it from the API keys page in the OpenAI platform. OpenAI says to rotate immediately when you believe a key has leaked, then update the server with the new value and redeploy.

How to check it worked

• The deployed JavaScript has no sk- key.
• The chat feature still answers, and the browser's network panel shows a call to your server, not a call to api.openai.com that contains the key.

The same rule applies to Claude and Gemini keys. Rate-limit responses for those APIs are Anthropic or Gemini API 429 and overloaded errors.

Questions people ask

Is it safe to put my OpenAI API key in a Lovable, Bolt or Cursor front end?

No. OpenAI says never to deploy an API key in a browser or a mobile app, because anyone who can view the page can copy it and make requests on your account, which can lead to unexpected charges.

What does dangerouslyAllowBrowser do in the OpenAI SDK?

Setting it to true silences the browser error and leaves the key public. The SDK's README says it exposes your secret API credentials in the client-side code, so move the call to your server instead.

What should I do if my OpenAI key was already deployed?

Rotate it from the API keys page in the OpenAI platform. OpenAI says to rotate immediately when you believe a key has leaked, then update the server with the new value and redeploy.

Sources

• https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety (opens in a new tab)
• https://github.com/openai/openai-node (opens in a new tab)