How To Secure Apache From Clickjack attack using CSP frame-ancestors

As mentioned in the previous post - How To Secure Apache From Clickjack attack using X-Frame-Options, Clickjacking, also known as UI redress attack is one of the well-known vulnerability of websites and web-based applications. It's used by the attacker to force the user to click without user consent, leading to redirection to unknown websites.

In this post, we will discuss the newer option to prevent the same attack. We can do the same using the HTTP Content-Security-Policy (CSP) frame-ancestors directive by specifying the valid parents to allow embedding of frames using the frame, iframe, object, embed, or applet tags. The older browsers do not support this header directive.

We have discussed the X-FRAME-OPTIONS directive DENY to deny the frames from any origin including the same origin as shown below.

// .htaccess file - within the application directory
Header append X-FRAME-OPTIONS DENY

Similarly, we can do the same using CSP frame-ancestors as shown below.

// Update your .htaccess file or virtual host

Header set Content-Security-Policy "frame-ancestors 'none';"

In the previous tutorial, I have also mentioned the usage of X-FRAME-OPTIONS directive ALLOW-FROM. The same can be implemented using CSP frame-ancestors as shown below.

// Update your .htaccess file or virtual host

Header set Content-Security-Policy "frame-ancestors 'self' <origin 1> <origin 2>;"

The CSP also includes several other directives including allowing scripts from the selected origin as shown below.

// Update your .htaccess file or virtual host

Header set Content-Security-Policy "script-src 'self' <origin 1> <origin 2>;"

Similarly, we can specify the origins specific to CSS, images, etc.

In cases where it's not possible to update the virtual host or htaccess file, we can also do the same by adding a meta tag to the page header as shown below. Using meta tag for frame-ancestors will be ignored by browsers according to the CSP specifications.

<meta http-equiv="Content-Security-Policy" content="script-src 'self' <origin 1> <origin 2>;">

The CSP directives bring a lot of newer options to specify the origins allowed to serve the resources, hence tightening the website security.