Clickjacking

A clickjacking attack may affect any type of application independently of the technology or framework used to build it. So, React and other apps are vulnerable.

Client-side attempts to block clickjacking attacks usually don't work well since they are easy to get around.

A better approach to prevent clickjacking attacks is to ask the browser to block any attempt to load your website within an iframe. You can do it by sending the X-Frame-Options HTTP header.

The X-Frame-Options header is added on the server-side, not the client. This is because the header is used to control how the browser should render the page.

The deny directive completely disables the loading of the page in a frame, regardless of what site is trying. Below is what the header request will look like if this is enabled.

X-Frame-Options: deny

The sameorigin directive allows the page to be loaded in a frame on the same origin as the page itself. Below is what the header request will look like if this is enabled.

X-Frame-Options: sameorigin

Browsers Supporting X-Frame-Options

• IE8+

• Opera 10.50+

• Safari 4+

• Chrome 4.1.249.1042+ (Allow-From not yet supported)

• Firefox 3.6.9 (or earlier with NoScript)

Major browsers support the X-Frame-Options header. However, it has never been standardized, so there might be browsers not supporting it.

A standard approach to prevent clickjacking attacks, including Cross Site Scripting (XSS) and data injection attacks, is by using specific Content Security Policy (CSP) directives.

Browsers Supporting Content-Security-Policy 1.0

• IE10+ partially supports

• Microsoft Edge 12+

• Opera 15+

• Safari 15+

• Chrome 14+

• Firefox 4+

CSP Evaluator - Evaluate your Content Security Policy