Using X-Frame-Options to Avoid Clickjacking in Your Web Application

Clickjacking tricks a user into clicking something different from what they think they are clicking. An attacker loads your page in a hidden or transparent frame, positions it over bait content, and captures the click. It is an old technique, but plenty of applications still leave the door open.

How it works

Web pages are built in layers. Using CSS, an attacker can stack an invisible frame of your site on top of their own page and line up its buttons with theirs. When the user clicks, the action lands on your application in the context of their session.

Controlling who can frame your pages

The X-Frame-Options response header tells the browser whether your pages may be framed:

• DENY blocks all framing.
• SAMEORIGIN allows framing only by pages on your own origin.

The older ALLOW-FROM value is deprecated and inconsistently supported. For modern browsers, prefer the Content Security Policy frame-ancestors directive, which is more flexible and lets you name specific origins:

X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'

Set both for broad coverage. Clickjacking is a common finding in a web security test, and it is usually a quick fix once identified.