How to Deploy Netlify Securely (2026)

When Netlify builds your app, it clones your git repository and runs your build command. Any variable prefixed with VITE_, REACT_APP_, or NEXT_PUBLIC_ gets compiled into the JavaScript that ships to your visitors' browsers. That includes secrets you stored "safely" in Netlify's dashboard, because the prefix is an instruction to copy the value into the bundle regardless of where the variable came from.

In CheckYourVibe scans of Netlify-deployed apps, VITE_-prefixed secrets are the single most common exposure pattern, ahead of committed .env files and hardcoded strings.

Step 1: Audit Your Environment Variables

Start by confirming what is actually in your JavaScript bundle.

# Vite-based projects (React, Vue, Svelte)
grep -r "VITE_" . --include="*.env*" --include="*.ts" --include="*.tsx" --include="*.js" --include="*.vue"

# Create React App
grep -r "REACT_APP_" . --include="*.env*" --include="*.ts" --include="*.tsx" --include="*.js"

# Next.js on Netlify
grep -r "NEXT_PUBLIC_" . --include="*.env*" --include="*.ts" --include="*.tsx" --include="*.js"

git log --all --full-history -- .env
git log --all --full-history -- .env.local
git log --all --full-history -- .env.production

Step 2: Move Secret API Calls to Netlify Functions

Netlify Functions run in a Node.js environment on your domain. They read environment variables at runtime via process.env, never at build time, so nothing ends up in the client bundle.

Create a netlify/functions/ directory in your repo root. Netlify deploys everything in it automatically.

import { Handler } from "@netlify/functions";
import OpenAI from "openai";

// process.env.OPENAI_API_KEY (no VITE_ prefix)
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export const handler: Handler = async (event) => {
  if (event.httpMethod !== "POST") {
    return { statusCode: 405, body: "Method Not Allowed" };
  }

  const { message } = JSON.parse(event.body || "{}");
  if (!message) {
    return { statusCode: 400, body: "message required" };
  }

  const response = await client.chat.completions.create({
    model: "gpt-4o",
    messages: [{ role: "user", content: message }],
  });

  return {
    statusCode: 200,
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ reply: response.choices[0].message.content }),
  };
};

Your React component calls /.netlify/functions/chat on your own domain. The function calls OpenAI. The key never reaches the browser.

In the Netlify dashboard, rename VITE_OPENAI_API_KEY to OPENAI_API_KEY (no prefix). The variable now scopes to Functions only.

The Supabase anon key is designed to be public and safe with VITE_ as long as you have Row Level Security enabled on every table. The service_role key bypasses RLS entirely and must never reach the browser.

Step 3: Set Security Headers via netlify.toml

Netlify does not add security headers by default. Without them, your site ships without clickjacking protection, content type sniffing prevention, or HSTS.

Add or update netlify.toml in your repository root:

[build]
  command = "npm run build"   # or bun run build, vite build, etc.
  publish = "dist"            # or build/, public/, .next/

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Permissions-Policy = "camera=(), microphone=(), geolocation=()"
    Strict-Transport-Security = "max-age=31536000; includeSubDomains"
    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https:;"

The CSP above is a starting baseline. Tighten script-src by removing 'unsafe-inline' if your app doesn't use inline scripts, and restrict connect-src to specific domains your app actually calls.

Step 4: Protect Deploy Previews

Every pull request generates a public Netlify preview URL. Any VITE_-prefixed variable in that build is visible at that URL. By default, these URLs have no access control.

Go to Site Configuration > Access Control and enable one of:

• Site password: visitors enter a password before seeing the preview
• Netlify Identity: visitors must sign in with a Netlify Identity account

For most teams, a site password on deploy previews is the simplest option. It prevents the preview URL from being a live demo of your app using production credentials.

Once you've protected previews, also set preview-specific environment variables. In Site Configuration > Environment Variables, scope your secret keys:

A leaked preview URL then exposes test credentials, not production ones.

Step 5: Add a Pre-commit Hook

This prevents the VITE_ leak from recurring.

# Install gitleaks
brew install gitleaks   # macOS
# or: pip install gitleaks, or download from github.com/gitleaks/gitleaks/releases

# Test current repo
gitleaks detect --source . --verbose

# Add pre-commit hook
cat > .git/hooks/pre-commit << 'HOOKEOF'
#!/bin/sh
gitleaks protect --staged --verbose
if [ $? -ne 0 ]; then
  echo "gitleaks found secrets in staged files. Commit blocked."
  exit 1
fi
HOOKEOF
chmod +x .git/hooks/pre-commit

Add .env, .env.local, and .env.production to your .gitignore if they aren't already:

echo ".env" >> .gitignore
echo ".env*.local" >> .gitignore
echo ".env.production" >> .gitignore
git add .gitignore && git commit -m "chore: gitignore .env files"

Step 6: Scan Before Going Live

Before you remove the under-construction page or announce your launch, run a CheckYourVibe scan on the live Netlify URL.

The scanner checks:

• JavaScript bundle for embedded API keys (OpenAI, Stripe, Supabase, AWS, and 30+ others)
• HTTP response headers against the OWASP recommended set
• Supabase service_role key used client-side
• CORS policy set to * on your Netlify Functions
• Mixed content and insecure resource loading

It takes about 90 seconds and gives you a prioritized list. Fix the criticals before launch, not after your first real users arrive.