Netlify Site Security: A Complete Guide for Devs

TL;DR: How to Secure a Netlify-Deployed Site

To secure a Netlify-deployed site, you must: (1) never hardcode secrets—use Netlify environment variables; (2) set security headers like Content-Security-Policy and Strict-Transport-Security via a netlify.toml file or _headers; (3) enable branch deploys and deploy previews with protection; (4) scan secrets in your Git history before pushing; and (5) use a security scanner to catch vulnerabilities before production. Netlify site security is not automatic—you must configure these protections yourself.

---

Why Netlify Site Security Matters for Vibe-Coded Apps

When you build an app fast with Cursor, Bolt.new, or Lovable, security often gets skipped. Netlify makes deployment easy, but it doesn’t secure your app. Common issues include exposed API keys in client-side JavaScript, missing HTTP security headers, and unprotected deploy previews. A single leaked Stripe secret key can drain your account. This guide walks you through the exact steps to lock down a Netlify site.

1. Use Netlify Environment Variables (Never Hardcode Secrets)

AI coding tools often generate code with hardcoded API keys. That’s a disaster for netlify site security because anyone viewing your site’s JavaScript can steal them.

Bad (hardcoded):

const API_KEY = "sk-live-abc123";

Good (Netlify env var):

const API_KEY = process.env.REACT_APP_API_KEY;

Set variables in Netlify UI: Site settings > Build & deploy > Environment variables.

For Next.js apps, prefix with NEXT_PUBLIC_ only if they’re safe for client. Use private env vars for server-only secrets.

2. Add Security Headers with `netlify.toml` or `_headers`

Security headers prevent XSS, clickjacking, and MIME sniffing. Here’s a secure baseline:

netlify.toml:

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Strict-Transport-Security = "max-age=31536000; includeSubDomains"

Or use a _headers file in the publish directory:

/*
  Content-Security-Policy: default-src 'self'
  X-Frame-Options: DENY

Test headers with securityheaders.com.

3. Protect Deploy Previews and Branch Deploys

Deploy previews can expose unfinished features. Enable Deploy Preview authentication in Netlify: Site settings > Deploy contexts > Deploy previews > Require authentication. Set a password or use your team’s SSO.

Also, restrict branch deploys to only main and staging via netlify.toml:

[context.production]
  command = "npm run build"

[context.deploy-preview]
  command = "npm run build"

4. Scan for Secrets in Git History

Before pushing code, check for leaked secrets. Use tools like truffleHog or git-secrets. For existing repos, scan the entire history:

git log --all --oneline | xargs -I {} sh -c 'git show {} | grep -i "sk_live\|api_key"'

If you find secrets, use git filter-branch or BFG Repo-Cleaner to remove them, then rotate the keys immediately.

5. Set Up a Security Scanner (Like OverMCP)

Manual checks miss things. A security scanner like OverMCP (overmcp.com) automatically scans your Netlify site for exposed secrets, misconfigured headers, and open ports. It integrates with your CI/CD so every deploy is checked before going live.

6. Enable Two-Factor Auth on Netlify

Protect your Netlify account itself. Go to Account settings > Password & authentication > Two-factor authentication and enable it. This prevents attackers from modifying your site settings.

7. Use a Content Security Policy (CSP) Strictly

CSP blocks inline scripts and external resources. For vibe-coded apps with many dependencies, start with a report-only policy:

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-violations

Collect reports, then enforce. This prevents XSS even if AI code has vulnerabilities.

8. Limit Function Permissions

Netlify Functions run serverless. Avoid giving them broad IAM roles. Use the principle of least privilege: each function should have only the permissions it needs. If you use AWS Lambda, create separate roles per function.

9. Rotate Deploy Keys Regularly

Netlify uses deploy keys to push to your Git provider. Rotate them periodically: Site settings > Build & deploy > Deploy keys. Generate a new key and update your Git provider.

10. Monitor for Security Alerts

Netlify doesn’t notify you of leaked secrets. Use a service like OverMCP that sends alerts when new vulnerabilities are found in your repo or deployed site.

Code Snippet: Complete netlify.toml with Security

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'"
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Strict-Transport-Security = "max-age=31536000; includeSubDomains"

[[redirects]]
  from = "/.well-known/security.txt"
  to = "https://example.com/.well-known/security.txt"
  status = 200

FAQ

What are the most common Netlify security mistakes?

Hardcoding API keys in client-side code, missing security headers, and leaving deploy previews unprotected are the top three. Always use environment variables and add headers via netlify.toml.

How do I check if my Netlify site has security issues?

Use online tools like securityheaders.com, SSL Labs, and a secret scanner like OverMCP. Also review your netlify.toml and environment variables for hardcoded secrets.

Can Netlify automatically protect my site?

No, Netlify provides the platform but security configuration is your responsibility. You must set headers, manage secrets, and scan regularly. Automation tools like OverMCP can help catch issues before they reach production.