Fix Security Misconfiguration in Gatsby

Gatsby's convenience features often lead to catastrophic leaks. The most common security misconfiguration is the abuse of the 'GATSBY_' environment variable prefix. Any variable prefixed with 'GATSBY_' is automatically inlined into the client-side JavaScript bundle during build time. This means your 'secret' API keys, database credentials, or internal service tokens are just one 'View Source' away from being compromised. If it's in the bundle, it belongs to the attacker.

The Vulnerable Pattern

// .env.production
GATSBY_STRIPE_SECRET_KEY=sk_live_51Mz... 
GATSBY_FIREBASE_ADMIN_SDK_JSON={...}
// src/components/Checkout.js
import Stripe from ‘stripe’;
const stripe = new Stripe(process.env.GATSBY_STRIPE_SECRET_KEY);
// DANGER: The secret key is now hardcoded in the public .js file

The Secure Implementation

To fix this, strip the 'GATSBY_' prefix from all sensitive credentials. This ensures they remain accessible only during the build process or within server-side environments. For logic requiring secrets (like processing payments or accessing a DB), migrate that code to 'Gatsby Functions' located in /src/api/. These run server-side, allowing you to access non-prefixed environment variables securely without exposing them to the browser's global scope. Always audit your public/static folder for source maps that might leak original variable names.

// .env.production
STRIPE_SECRET_KEY=sk_live_51Mz...
GATSBY_STRIPE_PUBLIC_KEY=pk_live_...
// src/api/create-intent.js (Gatsby Functions - Server Side)
const stripe = require(‘stripe’)(process.env.STRIPE_SECRET_KEY);
export default async function handler(req, res) {
const paymentIntent = await stripe.paymentIntents.create({ amount: 1000, currency: ‘usd’ });
res.status(200).json({ clientSecret: paymentIntent.client_secret });
}