How to fix x frame options weak on Next.js

Steps for Next.js

1. Open next.config.js and add a headers() export: async headers() { return [{ source: '/(.*)', headers: [{ key: 'X-Frame-Options', value: 'DENY' }] }]; }
2. Restart your Next.js server (or redeploy to Vercel/your host) and verify with DevTools.

What is x frame options weak?

The `X-Frame-Options` HTTP response header tells browsers whether your website is allowed to be loaded inside an `<iframe>`, `<frame>`, or `<object>` on another site. There are two safe values: `DENY` (no framing allowed anywhere) and `SAMEORIGIN` (only your own site can frame your pages). A third value, `ALLOW-FROM`, was once supported to whitelist a specific external domain — but it is now obsolete, ignored by most modern browsers, and therefore provides no real protection. When this header is missing, set to an unsupported value like `ALLOW-FROM`, or combined with `SAMEORIGIN` in a way that browsers parse inconsistently, your pages are effectively unprotected against framing by attackers.

Without a properly enforced `X-Frame-Options` header, attackers can silently embed your store's checkout, login, or account pages inside invisible iframes on malicious websites — a technique called clickjacking. A shopper thinks they're clicking a button on the attacker's page, but they're actually clicking your hidden iframe: entering payment details, changing account settings, or completing unwanted purchases. This is a real theft and fraud vector that can lead to chargebacks, customer complaints, regulatory scrutiny under PCI-DSS, and loss of consumer trust. Search engines like Google also consider security posture signals when evaluating site quality; a site known to be compromised through clickjacking can suffer ranking and reputation damage. Fixing this header takes under 30 minutes and closes the vulnerability entirely for all modern browsers.

See the complete X frame options weak guide for every platform and the full background.