Skip to content

Security · Astro

I found an API key in my page source in Astro

The value is served to everyone who views source. Treat it as compromised and rotate it at the provider before fixing how it got there. A build-time prefix such as `NEXT_PUBLIC_` or `VITE_` inlines whatever it is given, which is the usual way this happens. A live sandbox key is the quieter version: the payment form accepts test cards and declines real ones, and nothing is logged as a failure.

The fix for Astro

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

Rotate the key first — revoke and reissue it before changing code.

Astro exposes anything prefixed PUBLIC_ to the client and keeps everything else server-side.

bash code
# .env
STRIPE_SECRET_KEY=sk_live_REPLACE_WITH_YOUR_KEY   # server only
PUBLIC_STRIPE_KEY=pk_live_REPLACE_WITH_YOUR_KEY   # shipped to the browser
ts code
// src/pages/api/checkout.ts
export const prerender = false;

export async function POST({ request }) {
  const secret = import.meta.env.STRIPE_SECRET_KEY;
  // …
}

A secret referenced from a .astro component's client-side <script> is inlined into the page. Keep secret access inside the frontmatter or an endpoint.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Astro site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.

The same fix, other stacks