Introduction
15 years in development, 0 focus on cybersecurity. Until Zoom rejected my app for clickjacking. Scary stuff.
💡 Stop falling for clickjacking scams
A few weeks ago, my Zoom app was rejected as it failed their Security and Privacy Compliance review.
I was a little bit worried and a bit disappointed with myself because having such a vast experience I never focussed on security, but this was the time to learn something new and also to make my web apps secure from Clickjacking attacks.
Below is the screenshot of the email from the Zoom team.
Luckily the Zoom team was very helpful and they shared a few resources with me to resolve the Clickjacking issue.
So what is Clickjacking? How can we prevent it? All these questions must be in your mind. So let's continue getting an in-depth analysis of Clickjacking.
What is Clickjacking?
Clickjacking is a web attack where malicious websites trick you into clicking on hidden elements. These actions could lead to malware downloads, sharing sensitive info, or making unwanted purchases.
Protect yourself by staying vigilant and avoiding suspicious links.
A working example of Clickjacking
Suppose we have a website with a login form that looks this this
<form action="/login" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username"><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password"><br>
<input type="submit" value="Login">
</form>
An attacker can create a malicious webpage that loads your login form (mentioned above) in an iframe and overlays it with another element, such as a fake button that says Click Me to win a prize!
<!-- malicious webpage -->
<html>
<head>
<title>Clickjacking Demo</title>
<style>
iframe {
position: absolute;
top: 100px;
left: 100px;
width: 400px;
height: 200px;
opacity: 0.5;
}
#overlay {
position: absolute;
top: 150px;
left: 150px;
width: 200px;
height: 100px;
background-color: red;
opacity: 0.5;
}
</style>
</head>
<body>
<iframe src="https://yourwebsite.com/login"></iframe>
<div id="overlay"></div>
<script>
// this code listens for clicks on the overlay element and forwards them to the hidden iframe
document.getElementById("overlay").addEventListener("click", function() {
document.getElementsByTagName("iframe")[0].contentWindow.document.forms[0].submit();
});
</script>
</body>
</html>
Now, when a user visits the attacker's page and clicks on the overlay element, they are actually clicking on the hidden login form of your website, which the attacker can use to steal the user's credentials.
Clickjacking is also called UI redress attack because the attack tampers with the user interface of the exploited website
Unmasking Clickjacking: The Hidden Threat
Clickjacking attacks can be carried out using a variety of techniques, including iframes, invisible buttons, and social engineering.
Clickjacking attacks can be used to steal sensitive information, spread malware, or manipulate user behavior.
Now let's add preventive actions in our above code using X-Frame-Options header with the DENY or SAMEORIGIN option to prevent your login form from loading in an iframe on another domain or origin
To prevent clickjacking attacks, web developers can use various techniques such as
Implementing the X-Frame-Options HTTP response header:
For applications using nginx as a web-server
There is also 1 more option available
ALLOW-FROM uri- This option is used when there is a specific URI that is allowed to frame your website.Using Content Security Policy i.e. CSP
Check the implementation
You can check the implementation of clickjacking prevention with the following guidelines -
After adding the
X-Frame-Optionsheader in your server configuration and also setting the Content Security Policy (CSP) headers in your serverAccess your website on a web browser
Open the browser's developer tools to access the network tab.
Browse to the page or action for which you want to check for clickjacking protection.
Look for corresponding HTTP response headers
By examining the HTTP response headers in the browser's tools, you can verify if clickjacking preventive measures are correctly applied.
😱 Unbelievable Clickjacking Cases!
Some of the famous Clickjacking attacks have been
Google patches Clickjacking bug
Facebook likejacking attacks continue with flesh appeal
All the above examples of our some very very big companies indeed.
🔐 Protect Your Online Life: Enhance Web Security
In a hyper-connected digital era, where vulnerabilities lurk at every click, it's crucial to safeguard our online presence. Clickjacking attacks are not new and as a developer, we should take full responsibility in applying the prevention methods.
Well, luckily using the above-mentioned methods, I was able to verify my Zoom app and prevent it from being suspended.
Below is the email reference for it
Conclusion
Clickjacking is a persistent threat that demands continuous attention from web developers and users alike. By staying informed about the potential risks and adopting best practices for web security we can prevent Clickjacking attacks.
I hope you have learned something new as I did. If so, kindly like it or share it with others so they can also see it.
Top comments (0)