Skip to content

Security · Nuxt

I found an API key in my page source in Nuxt

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 Nuxt

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.

Nuxt splits this explicitly: everything under runtimeConfig is server-only, and only runtimeConfig.public is exposed to the browser.

ts code
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    stripeSecretKey: process.env.STRIPE_SECRET_KEY,        // server only
    public: {
      stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
    },
  },
});

Read the secret inside server/ only:

ts code
// server/api/checkout.post.ts
export default defineEventHandler(async (event) => {
  const { stripeSecretKey } = useRuntimeConfig(event);
  // …
});

Calling useRuntimeConfig() in a component gives you the public block only, which is what you want.

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

Check your Nuxt 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