How to prevent Clickjacking on Magento 2?

Hello Friends!!!

In this blog, we will learn about Clickjacking and how to prevent Clickjacking on Magento 2. which is critical for Magento 2 Security

What is Clickjacking?
‘Clickjacking‘ or ‘UI Redress Attack‘ is a malicious technique that consists of deceiving a web user into interacting with something different from what the user believes he is interacting with.
This can result in the theft of confidential information, redirection to a malicious website, extortion of money, fraudulent purchases online, or coerce into downloading malware.

How does Clickjacking Affect Magento 2?
Let’s take an example to understand how exactly a Clickjacking attack works:

* Suppose, an attacker has created a page on the website that has a button on it that says “Click here for a free Gift”.
* And on top of that web page, the attacker has loaded an iframe with some malicious link.
* When the user/victim clicks on the”Click here for a free Gift” button, he will be redirected to another page or website without ever knowing what actually happened in the background.

How to Prevent Clickjacking on Magento 2?
There are three main mechanisms that can be used to defend against these attacks:

1. Preventing the browser from loading the page in the frame using the X-Frame-Options or Content Security Policy (frame-ancestors) HTTP headers.
2. Preventing session cookies from being included when the page is loaded in a frame using the SameSite cookie attribute.
3. Implementing JavaScript code in the page to attempt to prevent it from being loaded in a frame (known as a “frame-buster”).

Defending with Content Security Policy (CSP) frame-ancestors directive:

The frame-ancestors directive can be used in a Content-Security-Policy HTTP response header to indicate whether or not a browser should be allowed to render a page in a <iframe> or <frame>.
frame-ancestors allows a site to authorize multiple domains using the normal Content Security Policy semantics.
Content-Security-Policy: frame-ancestors Examples

Content-Security-Policy: frame-ancestors ‘none’;
>> It prevents any domain from framing the content. This setting is recommended unless a specific need has been identified for framing.
Content-Security-Policy: frame-ancestors ‘self’;
>> It only allows the current site to frame the content.
Content-Security-Policy: frame-ancestors ‘self’ *.example.com https://examplefriendweb.com;
>> It allows the current site, as well as any page on example.com (using any protocol), and only the page examplefriendweb.com, using HTTPS only on the default port (443).

Note: Single quotes(‘) are required around in self and none values, but may not occur around other source expressions.

Defending with X-Frame-Options Response Headers:

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <iframe>, <frame>, or <object>.

There are three possible values for the X-Frame-Options header:
DENY: It prevents any domain from framing the content. The “DENY” setting is recommended unless a specific need has been identified for framing.
SAMEORIGIN: It only allows the current site to frame the content.
ALLOW-FROM <uri>: It permits the specified ‘URI’ to frame this page. (e.g., ALLOW-FROM http://www.example.com).
This option has been deprecated because Magento-supported browsers no longer support it.

Implement X-Frame-Options : We can set a value for X-Frame-Options in <magento_root>/app/etc/env.php. Following is the default value:

'x-frame-options' => 'SAMEORIGIN',

Verifying your setting for X-Frame-Options: There are several ways to do this, here are a few examples:
1. Using a web browser inspector. Refer to the following image:

2. Use the following curl command, which we can run from any machine that can connect to your Magento server over the HTTP protocol.

curl -I -v --location-trusted '<your Magento storefront URL>'

Look for the X-Frame-Options value in the headers.

Hope this will be Helpful. Thanks 🙂