Lovable + Netlify Security Blueprint

To secure a Lovable + Netlify deployment, you need to: (1) configure security headers via _headers or netlify.toml, (2) store all secrets in Netlify's dashboard, (3) use Netlify Functions for server-side operations with secret keys, and (4) use test credentials for deploy previews. This blueprint covers header configuration and environment management.

Setup Time1 hour

TL;DR

Deploying Lovable apps to Netlify requires configuration through _headers or netlify.toml. Configure environment variables in Netlify's dashboard, add security headers, and use Netlify Functions for any server-side operations that need secret keys.

Part 1: Netlify Security Headers

public/_headers

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()

Part 2: Netlify Environment Variables

Configure in Netlify Dashboard

# Public (VITE_ prefix)
VITE_SUPABASE_URL=https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJ...

# Private (Functions only)
SUPABASE_SERVICE_ROLE_KEY=eyJ...