This article was originally published on AI Study Room. For the full version with working code examples and related articles, visit the original post.

Clickjacking Protection

Clickjacking Protection

Clickjacking Protection

Clickjacking Protection

Clickjacking Protection

Clickjacking Protection

Clickjacking Protection

Clickjacking Protection

Clickjacking Protection

Clickjacking Protection

Introduction

Clickjacking, also known as a UI redress attack, tricks users into clicking on something different from what they perceive. An attacker embeds a target page in a transparent iframe overlaid on a decoy interface. When the user clicks a visible button, they actually interact with the hidden target page — potentially authorizing a transaction, changing settings, or granting permissions.

How Clickjacking Works

A clickjacking exploit involves three elements:

Click here for a free prize!

The user sees a game or prize button but actually clicks the bank's transfer confirmation. With precise CSS positioning, the attacker makes the real button overlap the decoy.

X-Frame-Options

X-Frame-Options is a response header that controls whether a page can be displayed in an iframe.

Deny all framing

add_header X-Frame-Options "DENY" always;

Allow only same-origin framing

add_header X-Frame-Options "SAMEORIGIN" always;

Flask example: set X-Frame-Options

from flask import Flask, make_response

app = Flask(name)

@app.after_request

def set_frame_options(response):

response.headers['X-Frame-Options'] = 'SAMEORIGIN'

return response

For sensitive pages (banking, admin panels), use DENY

@app.route('/admin/transfer')

def admin_transfer():

response = make_response(render_template('transfer.html'))

response.headers['X-Frame-Options'] = 'DENY'

return response

X-Frame-Options has three values: DENY (no framing ever), SAMEORIGIN (same-origin only), and ALLOW-FROM (deprecated, not supported in modern browsers).

CSP frame-ancestors

Content Security Policy's frame-ancestors directive supersedes X-Frame-Options with more granular control. It specifies which origins are allowed to embed the page.

Allow only same-origin

add_header Content-Security-Policy "frame-ancestors 'self'" always;

Allow specific origins

add_header Content-Security-Policy "frame-ancestors 'self' https://trusted-app.example.com" always;

Allow none (equivalent to DENY)

add_header Content-Security-Policy "frame-ancestors 'none'" always;

---

Read the full article on AI Study Room for complete code examples, comparison tables, and related resources.

Found this useful? Check out more developer guides and tool comparisons on AI Study Room.