“Add chat to this page” — how OpenAI keys reach client components
One prompt, one client component, one inlined key. Detect the Cursor pattern in seconds and move chat behind a route handler.
Feature-shaped prompts produce feature-shaped diffs. “Add chat” touches a component because chat lives there — and if the component needs a key, that is where it goes.
This page covers the signature left behind, why the pattern spreads, and the route-handler refactor that ends it.
What actually happened
The chat feature landed in a client component with the API key read beside it; streaming worked in dev and prod alike.
- Component imports the SDK with a key from env.
- NEXT_PUBLIC_/VITE_ naming makes the build pass.
- Substitution ships the literal; chat works everywhere, for everyone.
- Later features copy the working pattern — spread by imitation, not decision.
Every step above is individually reasonable and none of them prints a warning. The value crosses into the bundle during substitution, not execution, so nothing in your runtime ever sees the moment it happened.
What someone can do with it
Live billing credentials, public:
- Org-billed model calls.
- Rate-limit exhaustion affecting your real users.
Rotate first
Do the rotation first. From the moment this value reached a public URL, treat it as public knowledge: browser caches, shared proxies and automated scrapers all hold copies you cannot recall. platform.openai.com/api-keys — revoke, reissue scoped, update server env only. Code changes come after, because a clean repository with a compromised key is still compromised.
A rotated key left in old deploys is still discoverable in CDN caches and archived copies. Rotation plus redeploy closes both halves; either alone leaves the door ajar.
Move the call somewhere the browser cannot read
The structural fix is always the same shape: the call moves to a context that holds the key without serving it, and the browser asks your server instead.
const ai = new OpenAI({ apiKey: import.meta.env.VITE_OPENAI_API_KEY });// app/api/chat/route.ts
export async function POST(req: Request) {
return Response.json(await chat(process.env.OPENAI_API_KEY, await req.json()));
}Check whether yours is exposed
You can check manually right now: open the site, view source or open DevTools, and search the built JavaScript for sk-proj-. A hit means the string shipped; decode or prefix-check it before deciding how bad the news is.
The faster path is to let a machine do the fetching. KeyDrift downloads the same JavaScript a visitor gets — HTML, every referenced chunk including ones named only in the route manifest, and the server-streamed data frameworks inline into the document — and reports credentials with a masked prefix, a fingerprint, and the exact file they live in. Paste your deployed URL into the scanner; no account needed.
Keep it from coming back
It bears saying because it happens constantly: the fix holds until the next prompt that needs the query to return rows. Drift monitoring exists for precisely this — it diffs consecutive scans and pages you when a previously resolved finding reappears, naming the regression as a regression rather than repeating the first alert.
Stopping the imitation loop
Lint rules that flag key-shaped literals in client directories catch copies mechanically. Pair them with the instruction-file convention, and the pattern loses its main transmission vector: plausibility.
Why this keeps happening industry-wide
It helps to name the economics honestly. Fixing this class of leak costs minutes when caught at deploy time and days when caught at invoice time, because by then the credential has been harvested, validated, resold or drained — often all four. Detection latency is the entire game, which is why the monitoring half of KeyDrift exists alongside the scanning half.
How KeyDrift reports this exact finding
When KeyDrift finds this on your deployment, the report shows a masked value (first 8 and last 4 characters only), a salted fingerprint for tracking, the exact chunk filename carrying it, and a severity with written rationale. Public-by-design neighbours — anon keys, publishable keys, Firebase web constants — appear as informational context rather than noise, because knowing what should be there is what makes the real findings credible.
Manual check, step by step
A five-minute version you can run anywhere: view-source on the landing page, copy every src= script URL, fetch each and search the results for sk-proj-. It misses manifest-only chunks and streamed payloads — which is precisely the gap between "I checked" and "it is clean" — but it catches the loud majority and builds the pattern-recognition that makes scanner output legible.
Close the loop with monitoring
Monitoring closes the loop that one-time verification leaves open. A scheduled scan refetches everything, diffs against history, and fires only on transitions: created, regressed, resolved. Regression alerts matter most here — they fire when a previously fixed finding returns, which in agent-era codebases is less a possibility than a schedule.
Common questions
Streaming responses through a route — hard?
Straightforward: pipe the upstream stream through your handler; the SDK supports passthrough patterns.
Keys in client-only demo pages?
Still live. Demos deserve scoped keys or server routes like anything else.
Run a free scan at keydrift.dev/scan — paste a URL or the bundle source itself, no account. Findings arrive masked, with the exact chunk they live in.
Related
KeyDrift is an independent product and is not affiliated with, endorsed by, or sponsored by Cursor. The name is referenced descriptively.