Fix Security Misconfiguration in Nuxt

Nuxt.js applications often suffer from 'Convenience-Induced Information Disclosure'. The most critical misconfiguration involves leaking sensitive environment variables to the client-side via the runtimeConfig. If you expose your private API keys or DB credentials in the public block, you're handing the keys to the kingdom to anyone with DevTools open. Hardening requires strict separation of server-side secrets and client-side constants.

The Vulnerable Pattern

// nuxt.config.ts - LEAKING SECRETS
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // CRITICAL: These are sent to the browser in the hydration payload
      STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
      AWS_ACCESS_KEY: process.env.AWS_ACCESS_KEY,
      API_BASE_URL: 'https://api.internal.production'
    }
  }
})

The Secure Implementation

The vulnerability lies in the `runtimeConfig.public` object. Nuxt serializes this entire object into the HTML payload to ensure the client-side has access to these values during hydration. To fix this: 1. Move all sensitive keys (API secrets, DB strings) outside the `public` sub-object. 2. Use Nitro `routeRules` to inject mandatory security headers like CSP and HSTS. 3. Ensure you are not running in 'development' mode in production, as this can expose stack traces and source maps. 4. Use `.env` files only for local dev and rely on encrypted environment variables in your CI/CD pipeline.

// nuxt.config.ts - HARDENED CONFIG
export default defineNuxtConfig({
  runtimeConfig: {
    // Private: Only available on the server
    stripeSecretKey: process.env.STRIPE_SECRET_KEY,
    awsAccessKey: process.env.AWS_ACCESS_KEY,
// Public: Safe for the browser
public: {
  stripePublicKey: process.env.STRIPE_PUBLIC_KEY,
  apiBase: '/api/proxy'
}
},
// Force security headers via Nitro
routeRules: {
’/**’: {
headers: {
‘Content-Security-Policy’: “default-src ‘self’;”,
‘X-Frame-Options’: ‘DENY’,
‘X-Content-Type-Options’: ‘nosniff’
}
}
}
})