Why I stopped hardcoding AI API keys in my frontend

A few months ago, I pushed a commit that accidentally exposed my OpenAI API key in a client-side JavaScript bundle. I caught it before anyone else did, but the panic was real. The worst part? I’d known better—but I was in a hurry and thought, “It’s just a prototype, I’ll fix it later.” Later never came until a code review flagged it.

That incident pushed me to finally build a proper, secure way to call AI APIs from a frontend. Not just for OpenAI, but for any third-party AI service. Here’s what I learned.

The problem: API keys in the browser

I was building a simple chatbot UI that needed to send prompts to an AI model. The obvious approach? Call the API directly from JavaScript. I defined the API key in a .env file and used a build tool to inject it at compile time. That feels secure—until you realize the bundled JS file now contains that key as a literal string. Anyone can open DevTools, find the endpoint, and start sending requests on your behalf.

And yes, I knew about environment variables in frontend builds. But that only hides the key from your code—it’s still shipped to the client. The browser has no concept of compile-time secrets.

What I tried first (and why it didn’t work)

I looked into using serverless functions. I’m comfortable with Node.js, so I spun up a tiny Express server on a free Heroku dyno. That solved the key exposure problem—the frontend called my server, which then called the AI API. But now I had to manage a whole server, deal with CORS, rate limiting, and scaling. For a personal project, that felt like overkill.

I also tried using a cloud function as a proxy. AWS Lambda or Google Cloud Functions work, but the setup felt heavy for what I needed: a single endpoint that forwards a request and returns the response.

What eventually worked: serverless functions as a thin proxy

Platforms like Netlify, Vercel, and Cloudflare Workers let you deploy serverless functions alongside your frontend. The idea is simple: write a function that receives a request, adds the API key from an environment variable, and forwards the request to the AI service. The frontend calls your function’s URL, never the AI API directly.

Here’s a concrete example using Netlify Functions. The same pattern works on Vercel with slightly different file naming.

Step 1: Create the function

Inside your project, create a file at netlify/functions/ai-proxy.js:

// netlify/functions/ai-proxy.js
exports.handler = async (event) => {
  const { path } = event.queryStringParameters;
  if (!path) {
    return {
      statusCode: 400,
      body: JSON.stringify({ error: "Missing 'path' query parameter" }),
    };
  }

  const apiKey = process.env.AI_API_KEY;
  const baseUrl = process.env.AI_BASE_URL || "https://api.openai.com/v1";

  // Parse the incoming request body
  let body;
  try {
    body = JSON.parse(event.body);
  } catch (e) {
    body = {};
  }

  try {
    const response = await fetch(`${baseUrl}/${path}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${apiKey}`,
      },
      body: JSON.stringify(body),
    });

    const data = await response.json();
    return {
      statusCode: response.status,
      headers: {
        "Access-Control-Allow-Origin": "*", // restrict in production
      },
      body: JSON.stringify(data),
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message }),
    };
  }
};

Note: I’m using fetch (Node 18+). For older runtimes, install node-fetch.

Step 2: Set environment variables in your hosting platform

On Netlify, go to Site settings > Build & deploy > Environment variables. Add AI_API_KEY and optionally AI_BASE_URL (if you’re using a different provider). For example, if you’re using the AI service at https://ai.interwestinfo.com, set AI_BASE_URL to that value.

Step 3: Call the proxy from the frontend

Now in your JavaScript, you call your own function instead of the AI API:

// frontend/script.js
const proxyUrl = "/.netlify/functions/ai-proxy"; // relative to your site

async function askAI(prompt) {
  const response = await fetch(`${proxyUrl}?path=v1/completions`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [{ role: "user", content: prompt }],
    }),
  });
  return response.json();
}

Trade-offs and limitations

Cold starts: Serverless functions can take a few hundred milliseconds to warm up. For interactive chat, this can be noticeable. I mitigated it by keeping a persistent connection (WebSockets) or using a keep-alive ping.
Cost: Most platforms offer a generous free tier (Netlify: 125k requests/month, Vercel: 100k). If you’re building a commercial app, these costs are still lower than running your own server.
Function timeout: Netlify functions have a 10-second timeout for free plans. AI API calls can exceed that. For longer streams, consider streaming responses or upgrading your plan.
Limited flexibility: My simple proxy forwards all requests through one path. If you need to handle different endpoints with different methods (GET, DELETE), you’ll need a more sophisticated router. I ended up adding a method query parameter.

Lessons learned

This approach isn’t new—it’s essentially a BFF (Backend For Frontend) pattern. But it made me realize how easy it is to over-engineer security. A five-line serverless function replaced a whole Express app.

I also learned that environment variables in client-side build tools are a false promise. They’re fine for config like API URLs, but never for secrets.

One thing I’d do differently next time: use a typed language like TypeScript for the function. The proxy is small, but handling errors and edge cases would be cleaner with proper types.

When NOT to use this pattern

If you’re writing a pure static site that can’t have server-side logic (GitHub Pages, for instance). In that case, consider a third-party proxy service or a dedicated API gateway.
If you need extremely low latency (under 50ms). The extra hop adds overhead.
If your AI provider supports client-side authentication with signed requests (e.g., using HMAC). Some services offer that, but most don’t.

What’s your setup?

I’m curious: how do you handle API keys in your frontend apps? Have you tried serverless proxies, or do you use something like a dedicated API gateway? Let me know in the comments.

Disclaimer: I’m not affiliated with Netlify, Vercel, or any AI service. This is just the pattern that worked for me.

推荐订阅源

DEV Community