Content Security Policy header present and allows essential resources

A missing Content Security Policy header leaves the application exposed to cross-site scripting via CWE-693 (Protection Mechanism Failure) and is a finding under OWASP A05 (Security Misconfiguration). CSP restricts which scripts, styles, and resources the browser will execute — without it, any XSS vector can load arbitrary scripts from external origins. For SEO, a compromised site that injects spam links or redirects risks Google Safe Browsing flagging, which removes the site from SERPs entirely until manual review clears it. A CSP that blocks analytics scripts is also a failure mode — it silently stops tracking data without an error.

Add CSP headers in next.config.js using the headers() async function. Start with a report-only policy to detect violations before enforcing:

// next.config.js
async headers() {
  return [{
    source: '/(.*)',
    headers: [{
      key: 'Content-Security-Policy',
      value: [
        "default-src 'self'",
        "script-src 'self' 'unsafe-inline' *.google-analytics.com *.vercel-insights.com",
        "style-src 'self' 'unsafe-inline'",
        "img-src 'self' data: https:",
        "font-src 'self' fonts.gstatic.com",
        "connect-src 'self' *.supabase.co *.google-analytics.com",
      ].join('; ')
    }]
  }]
}

Verify with curl -I https://yoursite.com | grep -i content-security-policy. Add report-uri to a CSP reporting endpoint (e.g., Report URI) to catch violations from real users before tightening the policy.