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.
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.
Browsers Supporting X-Frame-Options
IE8+
Opera 10.50+
Safari 4+
Chrome 4.1.249.1042+ (Allow-From not yet supported)
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
Last updated