The Basics of Clickjacking: Unveiling the Deceptive Threat to Web Security

Disclaimer

The content presented in this lab is intended solely for educational purposes and informational use. The purpose of this lab is to provide a practical understanding of clickjacking attacks and their potential impact on web security. It is not intended to promote or encourage any malicious activities or harmful actions against real-world websites or individuals.

​Participants are advised to conduct the lab exercises within a controlled environment and refrain from using the knowledge gained to engage in any unauthorized or illegal activities. Any attempt to perform clickjacking attacks on live websites or systems without explicit authorization is strictly prohibited and may lead to severe legal consequences.

The lab materials, including code snippets and demonstrations, are provided as educational resources only. The instructors and creators of this lab are not responsible for any misuse or unintended application of the knowledge acquired during the learning process.

By accessing and utilizing the lab materials, participants agree to use the information responsibly and ethically, respecting the principles of cybersecurity and online safety. If you have any concerns or questions about the content or exercises, please seek guidance from authorized instructors or cybersecurity professionals.
​
Remember, responsible learning and ethical conduct are essential for fostering a safe and secure digital ecosystem. Let's use this lab to enhance our knowledge, promote cybersecurity awareness, and contribute to a safer online environment for everyone.

Introduction

In the digital age, web security stands as a paramount concern, with developers striving to protect users from various threats lurking in cyberspace. One such perilous yet often overlooked menace is clickjacking – a cunning attack that misleads users into interacting with hidden elements on a web page without their knowledge. In this ACTIVELabs post, we delve into the world of clickjacking, exploring its mechanics through real-life examples. We will uncover how clickjacking operates, demonstrate its impact using simple code snippets, and discuss basic preventive measures to fortify web applications against this invisible adversary.

Understanding Clickjacking

Clickjacking, also known as a UI redress attack or "user-interface deception," takes advantage of user trust and interaction with a web page. It involves overlaying hidden elements, such as buttons or forms, on top of a legitimate website, effectively trapping user clicks within the obscured frame. The unsuspecting user is tricked into clicking hidden buttons or taking unintended actions without their knowledge.

The Danger of Invisible Buttons

In a basic clickjacking attack, the hidden buttons or elements are made invisible by setting their opacity to zero or positioning them off-screen. As a result, users are unaware that they are clicking on hidden elements, as they believe they are interacting with the visible content on the page.

Stealing Cookies and Sensitive Data

Beyond the deceptive nature of basic clickjacking, the attack can have severe consequences when it comes to stealing sensitive data. One of the most valuable pieces of information that can be stolen through clickjacking is user cookies.

How Cookies are Exploited

Cookies are small pieces of data stored in a user's web browser, containing information about the user's session and preferences on a website. They are often used for authentication, session management, and personalized experiences.
​
During a clickjacking attack, the hidden buttons could be strategically positioned over critical elements, such as a "Log Out" button or a "Submit" button after entering login credentials. If the user clicks on these invisible buttons, their session could be hijacked, and the attacker could gain access to the user's account, along with any sensitive information associated with it.

Other Types of Data Theft

Clickjacking can also be employed to steal other types of sensitive data, such as credit card information, personal details, or private messages. By overlaying hidden forms on top of legitimate websites, attackers can trick users into unknowingly providing their data, thinking they are interacting with the trusted website.

Combining Clickjacking with Other Attacks

Clickjacking can serve as a launching point for more sophisticated attacks. By luring users into executing actions on a vulnerable website, attackers may combine clickjacking with other techniques like Cross-Site Scripting (XSS) or Cross-Site Request Forgery (CSRF) to further exploit the user or compromise the website's security.

Executing the Clickjacking Attack: The Vulnerable Login Page (vuln.html)

Let's examine a vulnerable website called vuln.html, which represents a simple login page.

Figure 1 Vulnerable Website

Explanation of vuln.html:

The code above represents a standard login page that is vulnerable to clickjacking. It contains a form with input fields for the username and password, along with a "Login" button. The form is set to submit the data to a legitimate website (https://legitimate-website.com/login) using the POST method.

Executing the Clickjacking Attack: The Malicious Website (active.html)

To demonstrate the clickjacking attack, we have a malicious website called active.html, which aims to exploit the vulnerable login page (vuln.html).

Figure 2 Vulnerable Website Embedded in iframe

Explanation of active.html:

The code above represents the malicious website (active.html) that executes the clickjacking attack. Let's break down what the code does:
1. The code begins with standard HTML structure, with the title "ACTIVELabs Code" and a heading (<h1>) displaying "ACTIVELabs Code" to indicate that it is the malicious website.
2. In the <script> section, the code performs the clickjacking attack. It dynamically creates an iframe element using JavaScript: 

​3. The src attribute of the iframe is set to "vuln.html". This means the vulnerable login page (vuln.html) will be loaded within the iframe. 

​4. The iframe's width and height are set to "100%" to ensure that it covers the entire viewport and remains hidden from the user's view.

​5. Finally, the iframe is appended to the body of the active.html document:

​When a user visits active.html they will see the legitimate website in an iframe. This indicates the website is vulnerable to clickjacking.  By layering legitimate websites with fake websites or fake text boxes, it’s possible for an attacker to steal any credentials or information that is entered. Let’s take this a step further with a more sophisticated approach using the following code:

​When a user visits the malicious website (active.html), they won't see any visible content other than the heading "ACTIVELabs Code." However, unbeknownst to the user, the vulnerable login page (vuln.html) is loaded within the hidden iframe, carefully positioned off-screen in conjunction with being transparent. An attacker could configure the malicious website with buttons and when a user clicks the button the click is captured and passed to the vulnerable website without the user seeing what is happening. Exploiting hidden clicks could lead to unauthorized purchases, transfer funds to their account, or manipulate financial transactions. Beyond these examples, the possibilities for exploitation are numerous. An attacker could use clickjacking to manipulate settings, change account credentials, post unauthorized messages on social media, or gather sensitive data like credit card information or personal details.

Figure 3 Vulnerable website Embedded and hidden

Basics of Preventing Clickjacking: The Role of Content Security Policy (CSP)

Modern web browsers offer built-in security measures to protect users from clickjacking and other malicious attacks. One such defense mechanism is Content Security Policy (CSP). CSP allows web developers to define a set of rules to control which resources are allowed to be loaded and executed on a web page.
​
In the case of our vulnerable login page vuln.html, we can mitigate clickjacking attacks by setting an appropriate CSP directive:

How Content-Security-Policy Works

By including the meta tag with the http-equiv attribute set to "Content-Security-Policy", we instruct the browser to apply the specified CSP rules. In this example, the frame-ancestors directive is set to 'none', which means that vuln.html cannot be loaded within an iframe by any other domain.

By setting this directive, even if an attacker attempts to embed vuln.html within an iframe on a malicious website (like active.html), the browser will block the loading of vuln.html, preventing the clickjacking attack from succeeding.

Conclusion

Clickjacking poses a subtle yet substantial threat to web security. While basic clickjacking attacks may seem harmless at first glance, they can lead to severe consequences, including the theft of sensitive data like cookies and personal information. Web developers must remain vigilant and implement strict security measures to protect users from such deceptive threats. By understanding the mechanics of clickjacking and staying up-to-date with the latest security features in modern browsers, we can build a safer online environment, safeguarding users from the invisible clutches of clickjacking attacks.
​
Remember, even though modern browsers provide defenses against clickjacking, it is essential to practice secure coding practices and implement other security mechanisms to fortify your web applications against a broad range of cyber threats. Vigilance and proactive security measures are the keys to maintaining a safe and trustworthy online experience for all users. Stay informed and stay secure!