Coders Conquer Security: Share & Learn Series - Clickjacking
Susie opens her email to escape from a nasty report that's due in two days. She sees a link for a free iPad appear in her inbox. After clicking it, she goes to a website with a large banner page reading, "Click here for your free iPad!". She clicks the button but nothing really seems to happen. The problem is, something did happen.
After navigating back to her inbox, she realizes all of her emails have been deleted. She didn't even hit "delete'on any of them. What's going on?
The email site was clickjacked. Clickjacking tricks users into performing actions they didn't intend to perform, and it can lead to serious problems.
Let's take a look now at how clickjacking works, why it's dangerous, and what developers like you can do to prevent it:
Understand Clickjacking
Clickjacking, also called a "UI redressing attack", occurs when an attacker uses several transparent layers on a web page to trick the user into clicking on a button or link the user doesn't intend to click on.
Have you ever had a bug stuck in your car? They fly up against the window furiously trying to fly outside. The bug's intention is to fly to what looks like trees and open air, oblivious of the glass blocking its path.
Clickjacking is similar in design, except the user is the bug and your website is the glass blocking the way. The user sees something they want, such as a free iPhone. The attacker places your site inside a transparent frame on top of the free iPhone ad. When the user clicks on the button to grab the allegedly "free'prize, they are actually clicking on a button on your site, performing an action they didn't intend.
Why Clickjacking is Dangerous
What can an attacker do with clickjacking? It largely depends on the functionality of the website in question.
The attacker could get a user to like or share the attacker's site on social media. This can be easily pulled off since many people stay logged into their social media accounts for convenience purposes.
If your site can be placed in a frame, a sensitive operation can be completed by clicking a button, and this can act as an attack vector. For example, a user clicks to get a free iPad but instead changes account settings on your site to make the account less secure. An attack of this type occurred against the Adobe Flash plugin settings page. The settings could be placed in a transparent frame, tricking the user into allowing any Flash animation access to the microphone and camera. Attackers could then record the victim; a major invasion of privacy.
An email client could be framed into a site, causing the user to delete all emails in their mailbox or forward emails to an email address controlled by the attacker.
The bottom line is: the user can't see what they're clicking, so they can be convinced to click anything. Whether it is a social share or downloading malware, the possibilities are vast.
How to Defeat Clickjacking
Clickjacking can be prevented. The recommended way to prevent clickjacking is to define a content security policy, or CSP, for your site. Using the "frame ancestors" HTTP response header, you can control how your site can be framed.
- "frame-ancestors none'- No other site is allowed to frame yours. This is the recommended setting.
- "frame-ancestors self'- Pages in your site can only be framed by other pages within your site.
- "frame-ancestors self <uri list=""> - Your site can be framed by the sites in the URI lists and no others.</uri>
CSP frame-ancestors is not currently supported by all major browsers. Use the "X-Frame-Options" HTTP header as a fallback option for such browsers.
- DENY - No one can frame your site. This is the recommended setting
- SAMEORIGIN - The same as "self'for CSP. You can frame your own content, but no-one else can.
- ALLOW-FROM <uri> - Allow the specified URI to frame your content.</uri>
Don't Get Clickjacked
Clickjacking is a clever, misleading attack that can lead to reputational damage and revenue loss if your product can be manipulated by attackers. Check out our free learning resources to find out more about clickjacking.
Use a Content Security Policy and "X-Frame-Options" header to prevent others from using your site in malicious ways. Don't allow attackers to manipulate your users. Don't get clickjacked.
Let's take a look now at how clickjacking works, why it's dangerous, and what developers like you can do to prevent it.
Jaap Karan Singh is a Secure Coding Evangelist, Chief Singh and co-founder of Secure Code Warrior.
Secure Code Warrior is here for your organization to help you secure code across the entire software development lifecycle and create a culture in which cybersecurity is top of mind. Whether you’re an AppSec Manager, Developer, CISO, or anyone involved in security, we can help your organization reduce risks associated with insecure code.
Book a demo
Jaap Karan Singh is a Secure Coding Evangelist, Chief Singh and co-founder of Secure Code Warrior.
Susie opens her email to escape from a nasty report that's due in two days. She sees a link for a free iPad appear in her inbox. After clicking it, she goes to a website with a large banner page reading, "Click here for your free iPad!". She clicks the button but nothing really seems to happen. The problem is, something did happen.
After navigating back to her inbox, she realizes all of her emails have been deleted. She didn't even hit "delete'on any of them. What's going on?
The email site was clickjacked. Clickjacking tricks users into performing actions they didn't intend to perform, and it can lead to serious problems.
Let's take a look now at how clickjacking works, why it's dangerous, and what developers like you can do to prevent it:
Understand Clickjacking
Clickjacking, also called a "UI redressing attack", occurs when an attacker uses several transparent layers on a web page to trick the user into clicking on a button or link the user doesn't intend to click on.
Have you ever had a bug stuck in your car? They fly up against the window furiously trying to fly outside. The bug's intention is to fly to what looks like trees and open air, oblivious of the glass blocking its path.
Clickjacking is similar in design, except the user is the bug and your website is the glass blocking the way. The user sees something they want, such as a free iPhone. The attacker places your site inside a transparent frame on top of the free iPhone ad. When the user clicks on the button to grab the allegedly "free'prize, they are actually clicking on a button on your site, performing an action they didn't intend.
Why Clickjacking is Dangerous
What can an attacker do with clickjacking? It largely depends on the functionality of the website in question.
The attacker could get a user to like or share the attacker's site on social media. This can be easily pulled off since many people stay logged into their social media accounts for convenience purposes.
If your site can be placed in a frame, a sensitive operation can be completed by clicking a button, and this can act as an attack vector. For example, a user clicks to get a free iPad but instead changes account settings on your site to make the account less secure. An attack of this type occurred against the Adobe Flash plugin settings page. The settings could be placed in a transparent frame, tricking the user into allowing any Flash animation access to the microphone and camera. Attackers could then record the victim; a major invasion of privacy.
An email client could be framed into a site, causing the user to delete all emails in their mailbox or forward emails to an email address controlled by the attacker.
The bottom line is: the user can't see what they're clicking, so they can be convinced to click anything. Whether it is a social share or downloading malware, the possibilities are vast.
How to Defeat Clickjacking
Clickjacking can be prevented. The recommended way to prevent clickjacking is to define a content security policy, or CSP, for your site. Using the "frame ancestors" HTTP response header, you can control how your site can be framed.
- "frame-ancestors none'- No other site is allowed to frame yours. This is the recommended setting.
- "frame-ancestors self'- Pages in your site can only be framed by other pages within your site.
- "frame-ancestors self <uri list=""> - Your site can be framed by the sites in the URI lists and no others.</uri>
CSP frame-ancestors is not currently supported by all major browsers. Use the "X-Frame-Options" HTTP header as a fallback option for such browsers.
- DENY - No one can frame your site. This is the recommended setting
- SAMEORIGIN - The same as "self'for CSP. You can frame your own content, but no-one else can.
- ALLOW-FROM <uri> - Allow the specified URI to frame your content.</uri>
Don't Get Clickjacked
Clickjacking is a clever, misleading attack that can lead to reputational damage and revenue loss if your product can be manipulated by attackers. Check out our free learning resources to find out more about clickjacking.
Use a Content Security Policy and "X-Frame-Options" header to prevent others from using your site in malicious ways. Don't allow attackers to manipulate your users. Don't get clickjacked.
Susie opens her email to escape from a nasty report that's due in two days. She sees a link for a free iPad appear in her inbox. After clicking it, she goes to a website with a large banner page reading, "Click here for your free iPad!". She clicks the button but nothing really seems to happen. The problem is, something did happen.
After navigating back to her inbox, she realizes all of her emails have been deleted. She didn't even hit "delete'on any of them. What's going on?
The email site was clickjacked. Clickjacking tricks users into performing actions they didn't intend to perform, and it can lead to serious problems.
Let's take a look now at how clickjacking works, why it's dangerous, and what developers like you can do to prevent it:
Understand Clickjacking
Clickjacking, also called a "UI redressing attack", occurs when an attacker uses several transparent layers on a web page to trick the user into clicking on a button or link the user doesn't intend to click on.
Have you ever had a bug stuck in your car? They fly up against the window furiously trying to fly outside. The bug's intention is to fly to what looks like trees and open air, oblivious of the glass blocking its path.
Clickjacking is similar in design, except the user is the bug and your website is the glass blocking the way. The user sees something they want, such as a free iPhone. The attacker places your site inside a transparent frame on top of the free iPhone ad. When the user clicks on the button to grab the allegedly "free'prize, they are actually clicking on a button on your site, performing an action they didn't intend.
Why Clickjacking is Dangerous
What can an attacker do with clickjacking? It largely depends on the functionality of the website in question.
The attacker could get a user to like or share the attacker's site on social media. This can be easily pulled off since many people stay logged into their social media accounts for convenience purposes.
If your site can be placed in a frame, a sensitive operation can be completed by clicking a button, and this can act as an attack vector. For example, a user clicks to get a free iPad but instead changes account settings on your site to make the account less secure. An attack of this type occurred against the Adobe Flash plugin settings page. The settings could be placed in a transparent frame, tricking the user into allowing any Flash animation access to the microphone and camera. Attackers could then record the victim; a major invasion of privacy.
An email client could be framed into a site, causing the user to delete all emails in their mailbox or forward emails to an email address controlled by the attacker.
The bottom line is: the user can't see what they're clicking, so they can be convinced to click anything. Whether it is a social share or downloading malware, the possibilities are vast.
How to Defeat Clickjacking
Clickjacking can be prevented. The recommended way to prevent clickjacking is to define a content security policy, or CSP, for your site. Using the "frame ancestors" HTTP response header, you can control how your site can be framed.
- "frame-ancestors none'- No other site is allowed to frame yours. This is the recommended setting.
- "frame-ancestors self'- Pages in your site can only be framed by other pages within your site.
- "frame-ancestors self <uri list=""> - Your site can be framed by the sites in the URI lists and no others.</uri>
CSP frame-ancestors is not currently supported by all major browsers. Use the "X-Frame-Options" HTTP header as a fallback option for such browsers.
- DENY - No one can frame your site. This is the recommended setting
- SAMEORIGIN - The same as "self'for CSP. You can frame your own content, but no-one else can.
- ALLOW-FROM <uri> - Allow the specified URI to frame your content.</uri>
Don't Get Clickjacked
Clickjacking is a clever, misleading attack that can lead to reputational damage and revenue loss if your product can be manipulated by attackers. Check out our free learning resources to find out more about clickjacking.
Use a Content Security Policy and "X-Frame-Options" header to prevent others from using your site in malicious ways. Don't allow attackers to manipulate your users. Don't get clickjacked.
Click on the link below and download the PDF of this resource.
Secure Code Warrior is here for your organization to help you secure code across the entire software development lifecycle and create a culture in which cybersecurity is top of mind. Whether you’re an AppSec Manager, Developer, CISO, or anyone involved in security, we can help your organization reduce risks associated with insecure code.
View reportBook a demo
Jaap Karan Singh is a Secure Coding Evangelist, Chief Singh and co-founder of Secure Code Warrior.
Susie opens her email to escape from a nasty report that's due in two days. She sees a link for a free iPad appear in her inbox. After clicking it, she goes to a website with a large banner page reading, "Click here for your free iPad!". She clicks the button but nothing really seems to happen. The problem is, something did happen.
After navigating back to her inbox, she realizes all of her emails have been deleted. She didn't even hit "delete'on any of them. What's going on?
The email site was clickjacked. Clickjacking tricks users into performing actions they didn't intend to perform, and it can lead to serious problems.
Let's take a look now at how clickjacking works, why it's dangerous, and what developers like you can do to prevent it:
Understand Clickjacking
Clickjacking, also called a "UI redressing attack", occurs when an attacker uses several transparent layers on a web page to trick the user into clicking on a button or link the user doesn't intend to click on.
Have you ever had a bug stuck in your car? They fly up against the window furiously trying to fly outside. The bug's intention is to fly to what looks like trees and open air, oblivious of the glass blocking its path.
Clickjacking is similar in design, except the user is the bug and your website is the glass blocking the way. The user sees something they want, such as a free iPhone. The attacker places your site inside a transparent frame on top of the free iPhone ad. When the user clicks on the button to grab the allegedly "free'prize, they are actually clicking on a button on your site, performing an action they didn't intend.
Why Clickjacking is Dangerous
What can an attacker do with clickjacking? It largely depends on the functionality of the website in question.
The attacker could get a user to like or share the attacker's site on social media. This can be easily pulled off since many people stay logged into their social media accounts for convenience purposes.
If your site can be placed in a frame, a sensitive operation can be completed by clicking a button, and this can act as an attack vector. For example, a user clicks to get a free iPad but instead changes account settings on your site to make the account less secure. An attack of this type occurred against the Adobe Flash plugin settings page. The settings could be placed in a transparent frame, tricking the user into allowing any Flash animation access to the microphone and camera. Attackers could then record the victim; a major invasion of privacy.
An email client could be framed into a site, causing the user to delete all emails in their mailbox or forward emails to an email address controlled by the attacker.
The bottom line is: the user can't see what they're clicking, so they can be convinced to click anything. Whether it is a social share or downloading malware, the possibilities are vast.
How to Defeat Clickjacking
Clickjacking can be prevented. The recommended way to prevent clickjacking is to define a content security policy, or CSP, for your site. Using the "frame ancestors" HTTP response header, you can control how your site can be framed.
- "frame-ancestors none'- No other site is allowed to frame yours. This is the recommended setting.
- "frame-ancestors self'- Pages in your site can only be framed by other pages within your site.
- "frame-ancestors self <uri list=""> - Your site can be framed by the sites in the URI lists and no others.</uri>
CSP frame-ancestors is not currently supported by all major browsers. Use the "X-Frame-Options" HTTP header as a fallback option for such browsers.
- DENY - No one can frame your site. This is the recommended setting
- SAMEORIGIN - The same as "self'for CSP. You can frame your own content, but no-one else can.
- ALLOW-FROM <uri> - Allow the specified URI to frame your content.</uri>
Don't Get Clickjacked
Clickjacking is a clever, misleading attack that can lead to reputational damage and revenue loss if your product can be manipulated by attackers. Check out our free learning resources to find out more about clickjacking.
Use a Content Security Policy and "X-Frame-Options" header to prevent others from using your site in malicious ways. Don't allow attackers to manipulate your users. Don't get clickjacked.
Table of contents
Jaap Karan Singh is a Secure Coding Evangelist, Chief Singh and co-founder of Secure Code Warrior.
Secure Code Warrior is here for your organization to help you secure code across the entire software development lifecycle and create a culture in which cybersecurity is top of mind. Whether you’re an AppSec Manager, Developer, CISO, or anyone involved in security, we can help your organization reduce risks associated with insecure code.
Book a demoDownloadResources to get you started
Professional Services - Accelerate with expertise
Secure Code Warrior’s Program Strategy Services (PSS) team helps you build, enhance, and optimize your secure coding program. Whether you're starting fresh or refining your approach, our experts provide tailored guidance.
Secure code training topics & content
Our industry-leading content is always evolving to fit the ever changing software development landscape with your role in mind. Topics covering everything from AI to XQuery Injection, offered for a variety of roles from Architects and Engineers to Product Managers and QA. Get a sneak peak of what our content catalog has to offer by topic and role.
Quests: Industry leading learning to keep developers ahead of the game mitigating risk.
Quests is a learning platform that helps developers mitigate software security risks by enhancing their secure coding skills. With curated learning paths, hands-on challenges, and interactive activities, it empowers developers to identify and prevent vulnerabilities.
Resources to get you started
The Decade of the Defenders: Secure Code Warrior Turns Ten
Secure Code Warrior's founding team has stayed together, steering the ship through every lesson, triumph, and setback for an entire decade. We’re scaling up and ready to face our next chapter, SCW 2.0, as the leaders in developer risk management.
10 Key Predictions: Secure Code Warrior on AI & Secure-by-Design’s Influence in 2025
Organizations are facing tough decisions on AI usage to support long-term productivity, sustainability, and security ROI. It’s become clear to us over the last few years that AI will never fully replace the role of the developer. From AI + developer partnerships to the increasing pressures (and confusion) around Secure-by-Design expectations, let’s take a closer look at what we can expect over the next year.
Developer-driven coding.
Securely.
Contact us today and make software security an intrinsic part of your development process.
