What is the X-Frame-Options header?
X-Frame-Options is a security header that tells browsers whether other websites may show your pages inside a frame. Switching it to DENY stops clickjacking, where a trick page places your site invisibly under a fake button so visitors click things they didn't mean to.
Also called: Clickjacking protection
ON THIS PAGE
What it means
A frame lets one page display another page inside it. An attacker can load your site in a see-through frame on top of their own page, then trick a logged-in visitor into clicking, for example, a "delete account" button.
The header is a single line your server sends with each page. The newer version is the frame-ancestors setting in Content-Security-Policy, and it's worth using both.
Why it matters for vibe-coded apps
It takes seconds to add and removes a whole class of tricks, yet most AI-built sites don't send it.
- Visitors can be tricked into clicking buttons on your site without knowing.
- Actions like payments, deletes or settings changes can be triggered.
- Browsers and security checkers flag it as missing.
Example
A Next.js app with no header set.
// next.config.js
module.exports = {}; // no frame protection// next.config.js
module.exports = {
async headers() {
return [{
source: "/(.*)",
headers: [
{ key: "X-Frame-Options", value: "DENY" },
{ key: "Content-Security-Policy", value: "frame-ancestors 'none'" },
],
}];
},
};If you do need your pages embedded on your own domain, use SAMEORIGIN, or list the allowed sites in frame-ancestors.
How to check if your app has this problem
- 1Run a free check on your site and look for the X-Frame-Options line.
- 2In your browser's developer tools, open the Network tab and look at the response headers for your home page.
The quicker way: LetMeCheck tests for this automatically, from the outside, the way an attacker would.
Run a free scan →How to fix it
- 1Add X-Frame-Options: DENY to every page.
- 2Also add Content-Security-Policy with frame-ancestors 'none'.
- 3If you need embedding, allow only your own domains.
- 4Run a check again to confirm.
Add anti-clickjacking headers to my app: X-Frame-Options set to DENY and a Content-Security-Policy with frame-ancestors 'none', on every route. Tell me if any feature needs embedding and how to allow just that.
Check if your app has this problem
Paste your website and we'll check for x-Frame-Options issues and other common issues in AI-built apps. Free, about a minute, and nothing on your site is changed.
Last updated
Related terms
- Security headersSettings your site sends that tell browsers how to protect visitors.
- Cross-site scripting (XSS)Someone sneaks code into your pages that runs in other users' browsers.
- Cross-site request forgery (CSRF)Another website tricks a logged-in user's browser into acting on your app.
- HTTPSThe padlock: an encrypted connection between your site and its visitors.
Need help?
Not sure what this means for your app? Our team will explain it in plain English.