ShipGuardScan a site

v0 + Vercel: Production Security Headers

Updated 2026-10-17

v0 generates React/Next.js UI quickly, but security headers are deployment configuration, so they are easy to miss. A few lines in next.config cover the headers most scanners check.

Add headers in next.config

Apply a baseline to every route. Start CSP in report-only mode if you are unsure what your app loads.

// next.config.ts
const headers = [
  { key: "Strict-Transport-Security", value: "max-age=31536000; includeSubDomains" },
  { key: "X-Content-Type-Options", value: "nosniff" },
  { key: "X-Frame-Options", value: "DENY" },
  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
  { key: "Content-Security-Policy", value: "default-src 'self'; frame-ancestors 'none'; base-uri 'self'" },
];
export default { async headers() { return [{ source: "/:path*", headers }]; } };

Verify after deploy

Run curl -sI https://your-app.com and confirm each header appears on the HTML response, not just static assets.

Checklist

  • HSTS with max-age ≥ 1 year
  • CSP enforced (or report-only while tuning)
  • frame-ancestors 'none' or X-Frame-Options DENY
  • X-Content-Type-Options nosniff
  • Referrer-Policy set

Copy-paste fix prompt

Add a security headers block to my next.config: HSTS (1 year, includeSubDomains), X-Content-Type-Options nosniff, X-Frame-Options DENY, Referrer-Policy strict-origin-when-cross-origin and a Content-Security-Policy that allows only the domains my app actually loads (list them from the code).

FAQ

Will a strict CSP break my v0 app?

Possibly, if it relies on inline scripts or third-party embeds. Deploy as Content-Security-Policy-Report-Only first and tighten based on reports.

Does Vercel add HSTS automatically?

Hosting defaults change over time; check your actual response headers with curl rather than assuming.

Check your deployed app in ~25 seconds

Free passive scan: leaked keys, Supabase exposure, public config files and headers.

Run a free scan

Related