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
<meta http-equiv="Content-Security-Policy" content="script-src 'self' <origin 1> <origin 2>;">
The CSP directives provide many newer options for specifying the origins allowed to serve the resources, hence tightening website security.
