Missing Security Headers: The #1 Issue in Vibe-Coded Web Apps

Why Vibe-Coded Apps Have No Security Headers

Security headers live in HTTP responses, not in application logic. They're set in server configuration, middleware, or framework config files - layers that AI tools either skip or treat as optional boilerplate. When Bolt scaffolds a Next.js app or Lovable generates a React frontend, it produces components and API routes. It does not produce a next.config.js with a complete security headers block.

The OWASP Foundation consistently lists missing security headers in its Web Security Testing Guide as low-effort, high-impact findings. According to the Mozilla Observatory, less than 30% of websites on the internet implement a Content Security Policy - and among newly deployed vibe-coded apps, the number is far lower. The 2024 Qualys Web Application Security Report found that missing Strict-Transport-Security headers affected 54% of scanned applications.

These headers cost almost nothing to add. A single configuration block can harden your entire application against multiple attack classes in under 10 minutes.

Before: A Typical Vibe-Coded App Response

Here is what an HTTP response from an AI-generated Next.js app deployed to Vercel looks like without any security header configuration:

$ curl -I https://your-vibe-app.vercel.app

HTTP/2 200
content-type: text/html; charset=utf-8
x-vercel-id: iad1::abc123
cache-control: private, no-cache, no-store, max-age=0, must-revalidate

# Missing headers:
# - Strict-Transport-Security (HSTS)
# - Content-Security-Policy
# - X-Frame-Options
# - X-Content-Type-Options
# - Referrer-Policy
# - Permissions-Policy

After: A Properly Configured Response

$ curl -I https://your-vibe-app.vercel.app

HTTP/2 200
content-type: text/html; charset=utf-8
strict-transport-security: max-age=63072000; includeSubDomains; preload
content-security-policy: default-src 'self'; script-src 'self' 'nonce-{nonce}'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com; connect-src 'self' https://your-api.supabase.co
x-frame-options: DENY
x-content-type-options: nosniff
referrer-policy: strict-origin-when-cross-origin
permissions-policy: camera=(), microphone=(), geolocation=()

What Each Header Does

Adding Security Headers in Next.js

For Next.js apps - the most common target for Bolt, v0, and Cursor - security headers are added in next.config.js. This applies them to every response from your application:

// ✅ GOOD - next.config.js with security headers
const securityHeaders = [
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload',
  },
  {
    key: 'X-Frame-Options',
    value: 'DENY',
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff',
  },
  {
    key: 'Referrer-Policy',
    value: 'strict-origin-when-cross-origin',
  },
  {
    key: 'Permissions-Policy',
    value: 'camera=(), microphone=(), geolocation=()',
  },
  {
    key: 'Content-Security-Policy',
    value: [
      "default-src 'self'",
      "script-src 'self' 'unsafe-eval' 'unsafe-inline'", // tighten after testing
      "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
      "img-src 'self' data: https:",
      "font-src 'self' https://fonts.gstatic.com",
      "connect-src 'self'",
    ].join('; '),
  },
];

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: securityHeaders,
      },
    ];
  },
};

module.exports = nextConfig;

Content Security Policy: Start Simple, Tighten Over Time

CSP is the most powerful header on the list, and also the most complex. A misconfigured CSP can break your application by blocking legitimate scripts, stylesheets, or API calls. The safe approach is to start permissive and tighten iteratively.

Use CSP report-only mode first: set Content-Security-Policy-Report-Only instead of Content-Security-Policy. This logs violations without enforcing them. Review the violation reports in your browser DevTools console or a reporting endpoint, then tighten the policy until violations stop.

For apps using Google Fonts (common in Lovable-generated designs), Supabase API calls, and Vercel Analytics, your CSP connect-src and font-src directives will need to explicitly allow those domains. The table above shows which sources are commonly needed.

How to Find Missing Headers in Your App

Tools like VibeDoctor (vibedoctor.io) automatically scan your deployed web app for missing security headers and flag which of HDR-001 through HDR-006 are absent from your HTTP responses. Free to sign up.

You can also check manually using the Mozilla Observatory at observatory.mozilla.org, SecurityHeaders.com, or by running curl -I your-domain.com and reviewing the response headers. Any production app scoring below B on the Mozilla Observatory has fixable issues that can be resolved in under an hour.

FAQ