Lovable + Vercel Security Blueprint

To secure a Lovable + Vercel deployment, you need to: (1) move all secrets to Vercel's environment variables dashboard, (2) add security headers in vercel.json, (3) use environment scoping to separate production from preview, and (4) ensure no hardcoded credentials in code. This blueprint covers deployment configuration and header security.

Setup Time1 hour

TL;DR

Deploying Lovable apps to Vercel requires proper environment variable configuration and security headers. Move all secrets to Vercel's dashboard, add security headers in vercel.json, and use environment scoping to separate production from preview deployments.

Part 1: Vercel Environment Variables

Configure in Vercel Dashboard

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

# Private variables (server-side only)
SUPABASE_SERVICE_ROLE_KEY=eyJ...
STRIPE_SECRET_KEY=sk_live_xxx

Part 2: Vercel Security Headers

vercel.json

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
      ]
    }
  ]
}