security: add HTTP security headers to next.config.mjs

[advikdivekar]

Problem

next.config.mjs exported an empty object with no HTTP security headers configured. Every response from AlgoBuddy was sent without X-Frame-Options, X-Content-Type-Options, Content-Security-Policy, Strict-Transport-Security, Referrer-Policy, or Permissions-Policy.

This left the app exposed to four concrete attack vectors:

• Clickjacking: the login page could be embedded in an invisible <iframe> on a malicious site and used to steal credentials.
• MIME sniffing: browsers could interpret uploaded content with the wrong MIME type as executable JavaScript.
• XSS amplification: no CSP meant any XSS vector could load arbitrary external scripts with no browser-level restriction.
• Downgrade attacks: no HSTS meant users on HTTP could be SSL-stripped by a network attacker.

What changed and why

next.config.mjs — added a headers() export that attaches six security headers to every route (source: "/(.*)"):

Header	Value	Protects against
X-Frame-Options	DENY	Clickjacking
X-Content-Type-Options	nosniff	MIME-sniffing
Referrer-Policy	strict-origin-when-cross-origin	Referer leakage
Strict-Transport-Security	max-age=63072000; includeSubDomains; preload	SSL-stripping / downgrade
Permissions-Policy	camera=(), microphone=(), geolocation=()	Unwanted hardware API access
Content-Security-Policy	See below	XSS amplification, clickjacking

CSP sources audited from the live codebase:

• script-src: googletagmanager.com (GA), challenges.cloudflare.com (Turnstile widget), va.vercel-scripts.com (Speed Insights), 'unsafe-inline' for the two inline scripts in layout.jsx (theme initialiser and GA config).
• style-src: fonts.googleapis.com (Google Fonts CSS import in globals.css), 'unsafe-inline' for Tailwind.
• font-src: fonts.gstatic.com (Google Fonts static files).
• connect-src: *.supabase.co (auth + DB), google-analytics.com, challenges.cloudflare.com, va.vercel-scripts.com.
• frame-src: challenges.cloudflare.com — Turnstile renders inside an iframe.
• frame-ancestors 'none': reinforces X-Frame-Options for CSP-aware browsers.

Why this approach fixes the root cause

Using Next.js headers() in next.config.mjs is the canonical way to set headers for all routes (including static, dynamic, and API routes). It runs at the edge before any page code executes, so no response can slip through without the headers.

Steps to test

1. Run npm run dev and execute:

   curl -sI http://localhost:3000 | grep -iE 'x-frame|x-content|strict-transport|referrer|permissions|content-security'
   

   All six headers must appear in the output.

2. Deploy to a Vercel preview branch and run:

   curl -sI https://<preview-url>/ | grep -iE 'x-frame|x-content|strict-transport|referrer|permissions|content-security'
   

3. Create an HTML file containing <iframe src="https://algobuddy.in/login"></iframe> and open it in a browser — the frame must be blocked with a console error referencing X-Frame-Options or frame-ancestors.

4. Verify the app functions normally end-to-end: login (Google OAuth + email), contact form, review form, visualizer, dashboard — no CSP console errors for any legitimate resource.

Edge cases covered

• All six headers applied to /(.*) — covers pages, API routes, and static assets.
• frame-ancestors 'none' duplicates X-Frame-Options for modern browsers that honour CSP over the legacy header.
• CSP allows data: for img-src to support any base64-encoded images used in visualiser pages.
• unsafe-inline for scripts is scoped to the two identified inline scripts; no external inline attack surface is added.

No regressions

• npm run build passes without errors or warnings.
• Dev server confirmed to return all six headers (verified with curl -sI).
• All existing external services (Supabase, GA, Turnstile, Speed Insights, Google Fonts) are explicitly whitelisted — nothing breaks.

Please review and merge this under GSSoC 2026.