Stop Lovable shipping your webhook signing secret in the Vite bundle

Why Lovable does this

Lovable builds a Vite single-page app with no server of its own. When you ask it to call an API that needs a key, the only place it can put that key is the browser — so it adds a `VITE_`-prefixed variable, and Vite substitutes the literal value into the bundle at build time.

Confirm it first

Before rotating anything, check whether the key is actually being served. Paste your deployed URL — KeyDrift downloads the same JavaScript a visitor gets and tells you what is in it.

Rotate the key

Do this before changing any code. The key has been served to browsers, cached by CDNs and very likely scraped already — removing it from the source does not un-publish it.

1. 1Roll the key in the Stripe dashboard. Rolling issues a replacement and revokes the old key.
2. 2Review recent charges, refunds and payouts for anything you did not initiate.
3. 3Move the Stripe call into a server route. The browser only ever needs the publishable key.

Move the call to a server

The replacement key must not follow the old one into the bundle, which means the code that uses it cannot live in the browser. Any variable named VITE_… is inlined at build time by design — the prefix is the mechanism, not a mistake.

// src/components/Chat.tsx
// Vite substitutes the literal value here at build time.
const key = import.meta.env.VITE_STRIPE_SECRET_KEY;
const result = await new Stripe(key).checkout.sessions.create(body);

// supabase/functions/checkout/index.ts  — runs on a Supabase Edge Function
Deno.serve(async (request) => {
  const key = Deno.env.get('STRIPE_SECRET_KEY')!; // never sent to the browser
  const result = await new Stripe(key).checkout.sessions.create(body);
  return Response.json(result);
});

// src/components/Chat.tsx
const result = await fetch('/functions/v1/checkout', { method: 'POST' }).then((r) => r.json());

How KeyDrift detects it

Matches the `whsec_` prefix. Often overlooked because it is not an API key — but it is the only thing standing between your endpoint and forged events.