CSP frame-ancestors vs. X-Frame-Options for Clickjacking prevention

Shai Alon
4 min readNov 29, 2021

--

What do frame-ancestors or X-Frame-Options do?

The default web framing behavior lacks proper isolation.

The web has a very open nature by default. You site or critical web application, will by-default “agree” to be embedded in any other website in the world. Moreover, it will include the authenticated cookies in the requests to your server.

frame-ancestors & X-Frame-Options (XFO) provide control on framing

You can explicitly limit the ability to embed your site the CSP frame-ancestors and/or the legacy X-Frame-Options. When you configure these HTTP Response Security Headers in web page responses the browsers will BLOCK the loading of the content in the iframe - even if it was approved and provided by the server.

Example of CSP frame-ancestors error code:

When you frame a site with Content-Security-Policy HTTP response header set as frame-ancestors: 'self'; in a different site, you will see:

Refused to frame ' https://SOME_SITE/ ' because it violates the following Content Security Policy directive: "frame-src 'self';".

Example of XFO error code:

When you frame a site with X-Frame-Options HTTP response header set as SAMEORIGIN in a different site, you will see:

Refused to display ' https://myaccount.google.com /' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Why are frame-ancestors or X-Frame-Options Security Headers even needed?

Attackers can frame your site in theirs

As mentioned — your site is embeddable by default anywhere. This means that attackers can target your site if it has not limited the ability to be framed.

Clickjacking Attacks

Clickjacking (UI redressing) is a creative attack in which the attacker lures the victim into their site, frames YOUR site in and invisible iframe (or other frame), and causes the victim to perform unwanted actions in your site/application.

More on this Clickjacking in the PortSwigger Tutorial.

Even companies with top R&D talent are not immune to this attack. Attackers (and security researchers) are always finding creative ways to get around this inherent isolation problem in the web architecture.

See this case in a researcher found a way to eavesdrop on unsuspecting victims via a Clickjacking attacks on Google Docs:

Sound Hijacking — Abusing Missing XFO Full Article on Netsparker

How to Protect from Clickjacking

CSP frame-ancestors is the main strategy!!!

CSP frame-ancestors is the most important protection mechanism against external framing, and better than X-Frame-Options in multiple ways:

  1. CSP Frame Ancestors can run in Report-Only Mode. This is a big deal when you want to roll-out protections on production systems in a safe way without causing regressions.
  2. CSP Frame Ancestors will send violation reports to your Report-Uri / Report-To. This is super important for mapping out risks and observing your traffic (in monitoring or enforced mode).
  3. Unlike XFO, CSP Frame Ancestors covers Ancestors . This means that it’s more powerful and effective blocking for some use-cases like this report of a wormable clickjacking attack.
  4. CSP frame-ancestors is more flexible, allowing custom domains:
    Content-Security-Policy: frame-ancestors 'self' mysubdomain.mysite.com https://frame.partner-site.com;
    While this flexibility is theoretically supported by XFO ALLOW-FROM - in practice it is not supported
ALLOW-FROM not supported. Source: MDN

X-Frame-Options is a graceful degradation for Clickjacking protection

More simply said — it’s a fallback for crappy browsers that don’t support CSP: ~5% of web traffic as of Nov 2021

So which should I use? XFO or CSP frame-ancestors?

Use BOTH CSP frame-ancestors and X-Frame-Options for best protection and coverage across browsers.

Benefits of running CSP frame-ancestors with RapidSec

Building your allowlist for CSP frame-ancestors with RapidSec CSP generator is easy and effective, avoiding any regressions in your production systems.

RapidSec Security Manager CSP Generator — Showing on a new framing that Admin can allow or dismiss

CSP is also the underlying structure that we use for the RapidSec Clickjacking Threat detection:

RapidSec Threat Detection Alert for a Clickjacking Attempt Blocked by CSP Frame Ancestors

Beyond CSP, there are other effective measures to protect against clickjacking, such as properly settings SAMESITE Strict / Lax cookies, but more on that in a future post. Read more in OWASP Clickjacking Defense Cheat Sheet.

Running these clickjacking protection headers is an essential part of maintaining a proper web security posture!

Looking for an enterprise-grade CSP solution? Book a RapidSec demo today.

Originally published at https://rapidsec.com on November 29, 2021.

--

--

Shai Alon

Maker of software for 2 decades. I write about AI, Cybersecurity and general full stack development in Javascript