Clickjacking is an attack that loads your site inside an invisible frame on a malicious page, then tricks the user into clicking elements they cannot see. The victim thinks they are interacting with the attacker's page, but their clicks land on your app, potentially confirming an action or changing a setting without their knowledge.
How it works
The attacker embeds your page in an iframe made transparent and positioned under decoy content. The user clicks what looks like a harmless button, but the click passes through to your framed page, for example a confirm or delete control, using the user's own logged-in session.
How to stop it
Tell browsers not to let your site be framed by others. Send a Content-Security-Policy with frame-ancestors set to your own origin (or none), which is the modern control, and optionally the older X-Frame-Options header for legacy browsers. With framing denied, the invisible-overlay trick cannot load your page at all.
What this means for AI-generated code
Generated apps usually ship without frame protection because nothing in the build process requires it, and the app works identically with or without the header. That leaves any sensitive click-driven action open to being framed and hijacked.
Common questions
How do I add clickjacking protection to a Next.js app?
Add the frame-ancestors directive in your Content-Security-Policy header and optionally the X-Frame-Options header for older browsers. In next.config.js: headers: [{ source: '/(.*)', headers: [{ key: 'X-Frame-Options', value: 'SAMEORIGIN' }] }]. The CSP version is: Content-Security-Policy: frame-ancestors 'self'.
What is the difference between X-Frame-Options and frame-ancestors CSP?
X-Frame-Options is the older header with two values: DENY (no framing at all) and SAMEORIGIN (only same-origin framing allowed). The frame-ancestors CSP directive is more flexible — you can specify multiple allowed origins — and takes precedence over X-Frame-Options in modern browsers. Use both for maximum coverage.
Can clickjacking attack an app that uses only GET requests?
Yes — clickjacking works by making the user click, which can trigger a GET navigation, a form submit, or a delete button. The attack does not require a POST or a state-changing request by itself; it requires making the user perform an action on your app without knowing it, which can apply to any click-driven interaction.