Understanding Clickjacking Attacks
Introduction to Clickjacking
What Is Clickjacking?
Have you ever been tricked into clicking something online? It’s a common experience. You think you're closing an ad, but you end up on a new website. Clickjacking is a more sneaky version of this trick. An attacker hides what you're actually clicking on, leading you to perform actions you never intended.
Clickjacking
noun
A malicious technique of tricking a user into clicking on something different from what the user perceives they are clicking on, thus potentially revealing confidential information or taking control of their computer.
This attack works by displaying an invisible webpage or element on top of the legitimate page you see. When you click a button you trust, like "Play Video," you're actually clicking a hidden button on the invisible page, such as "Share All My Data."
Because the malicious page is stacked on top of the visible one, this attack is also known as a "UI redress attack." The user interface has been "redressed" to deceive you.
Many clickjacking attacks include a transparent user interface placed over another interface that the user is expecting to see (which is why "UI redressing" is another name for this method).
A Brief History
The concept of clickjacking isn't new. Security researchers Jeremiah Grossman and Robert Hansen first coined the term in 2008. They discovered vulnerabilities in Adobe Flash Player that allowed attackers to load a transparent Flash animation over a legitimate website. A user interacting with the visible page would unknowingly interact with the hidden Flash content, potentially enabling their webcam or microphone without consent.
While browsers and plugins like Flash have gotten much more secure since then, the core technique has evolved. Attackers now use modern web technologies like HTML and CSS to create these deceptive layers, making it a persistent threat across the web.
How It Works
The magic behind clickjacking lies in a simple web feature: the <iframe>. An iframe is an HTML element that lets you embed one webpage inside another. Attackers use this to load a malicious page within an invisible frame.
They then use CSS to make this frame transparent and place it precisely over a key element on the visible page. For example, they might align a hidden "Confirm Purchase" button directly over a visible "Watch Cute Cat Video" button.
Here is a simplified code example showing how an attacker might set this up. The iframe containing the malicious page is made transparent using the opacity CSS property and positioned over the legitimate button.
<!-- The legitimate, visible page -->
<button>Click here for a prize!</button>
<!-- The attacker's hidden iframe -->
<style>
.hidden-iframe {
position: absolute;
top: 0;
left: 0;
width: 150px; /* Sized to cover the button */
height: 50px;
opacity: 0; /* Makes it completely transparent */
}
</style>
<iframe class="hidden-iframe" src="http://malicious-site.com/delete_account.html"></iframe>
The core deception is simple: your click registers on the invisible layer, not the one you see.
Now that you understand the basic mechanics of clickjacking, let's test your knowledge.
What is the primary goal of a clickjacking attack?
Clickjacking is also known as a "UI ______ attack".
By recognizing how these attacks work, you're better equipped to stay safe online. Always be cautious about what you click, especially on unfamiliar websites.