Security Bug: AI Assistant API Key Accessible in Browser Network Requests
Description
The DevPath AI Learning Assistant feature makes calls to an AI provider
(OpenAI or Gemini) from the frontend. If the API key is stored in a
NEXT_PUBLIC_ environment variable or passed through a client-side SDK
call, it appears in the browser's network requests and is visible in
DevTools to any user of the platform.
Steps to Reproduce
- Open the DevPath website with the AI Assistant feature.
- Open DevTools > Network tab.
- Ask a question in the AI Assistant.
- Find the outgoing API request and inspect the request headers or body.
- Observe the API key in the
Authorization header or request body.
Root Cause
Client-side AI SDK calls require the API key to be present in the browser.
Using NEXT_PUBLIC_AI_API_KEY or initialising the SDK with the key in a
client component exposes it.
Impact
Any user of the DevPath platform can extract the AI API key and use it
for their own purposes, generating API costs charged to the DevPath account
and potentially exhausting the API quota for legitimate users.
Proposed Fix
Route all AI calls through a Next.js API route (server-side):
// app/api/assistant/route.ts
import { GoogleGenerativeAI } from "@google/generative-ai";
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!); // NOT NEXT_PUBLIC_
export async function POST(req: Request) {
const { message } = await req.json();
const model = genAI.getGenerativeModel({ model: "gemini-pro" });
const result = await model.generateContent(message);
return Response.json({ response: result.response.text() });
}
Security Bug: AI Assistant API Key Accessible in Browser Network Requests
Description
The DevPath AI Learning Assistant feature makes calls to an AI provider
(OpenAI or Gemini) from the frontend. If the API key is stored in a
NEXT_PUBLIC_environment variable or passed through a client-side SDKcall, it appears in the browser's network requests and is visible in
DevTools to any user of the platform.
Steps to Reproduce
Authorizationheader or request body.Root Cause
Client-side AI SDK calls require the API key to be present in the browser.
Using
NEXT_PUBLIC_AI_API_KEYor initialising the SDK with the key in aclient component exposes it.
Impact
Any user of the DevPath platform can extract the AI API key and use it
for their own purposes, generating API costs charged to the DevPath account
and potentially exhausting the API quota for legitimate users.
Proposed Fix
Route all AI calls through a Next.js API route (server-side):