Clickjacking, according to Wikipedia, is a malicious technique of tricking a user into clicking on something different from what the user perceives, thus potentially revealing confidential information or allowing others to take control of their computer while clicking on seemingly innocuous objects, including web pages.
CSS z-index and opacity Roles in Clickjacking
We need to understand what these two CSS properties that are often deployed in Clickjacking does to elements on a web page. Definitions taken from w3shools: z-index property specifies the stack order of an element and the opacity property sets the opacity level for an element.
Clickjacking HTML CSS Test Page
z-index with a positive value ‘1’ will move the <div> box on top to overlay the ‘neutral’ web page (value ‘0’). I had to play around with the pixel (px) numbers for CSS properties left and top in order to position the transparent (opacity: 0) <div> box with the word ‘I am well-hidden‘ over the exact position of the legitimate button – THE GARDENS.
<html>
<head>
</head>
<style>
.nav {
position: absolute;
left: 145px;
top: 95px;
z-index: 1;
opacity: 0;
}
</style>
<body>
<p>Website is vulnerable to clickjacking!</p>
<a href="https://www.google.com/">
<div class="nav">
I am well-hidden
</div>
</a>
<iframe src="https://www.legitimategardens.com">
</iframe>
</body>
</html>Below is a screenshot of the clickjacking test page. In this example, assume legitimategardens.com is originally a garden themed website which is now displayed inside the HTML tag <iframe> on my test page. When I place my mouse cursor over navigation link THE GARDENS in my browser, it shows https://www.google.com which differs from the original garden themed site.
Solution – Disable <iframe> Rendering with X-Frame-Options
Directives on X-Frame-Options taken from developer.mozilla.org: DENY – The page cannot be displayed in a frame, regardless of the site attempting to do so. SAMEORIGIN – The page can only be displayed in a frame on the same origin as the page itself. Update your nginx.conf to disable others from ‘stealing’ your site into their <iframe>.
add_header X-Frame-Options "SAMEORIGIN" always;Conclusion
I built the test page in twenty minutes and had to spend another good twenty on reading up on clickjacking but overall, it was a good learning experience. I recalled that I had implemented security rules in nginx.conf related to <iframe> before in my past web development. A quick search online lead me to X-Frame-Options as mentioned in the solution. In my opinion, I don’t think this is a critical web vulnerability as I don’t prioritize it to add to all my web servers.