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
The Power of OpenText Application Security + Secure Code Warrior
OpenText Application Security and Secure Code Warrior combine vulnerability detection with AI Software Governance and developer capability. Together, they help organizations reduce risk, strengthen secure coding practices, and confidently adopt AI-driven development.
Secure Code Warrior corporate overview
Secure Code Warrior is an AI Software Governance platform designed to enable organizations to safely adopt AI-driven development by bridging the gap between development velocity and enterprise security. The platform addresses the "Visibility Gap," where security teams often lack insights into shadow AI coding tools and the origins of production code.
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 peek of what our content catalog has to offer by topic and role.
Cyber Resilience Act (CRA) Aligned Learning Pathways
SCW supports Cyber Resilience Act (CRA) readiness with CRA-aligned Quests and conceptual learning collections that help development teams build the Secure by Design, SDLC, and secure coding skills aligned with the CRA’s secure development principles.
Resources to get you started
Observe and Secure the ADLC: A Four-Point Framework for CISOs and Development Teams Using AI
While development teams look to make the most of GenAI’s undeniable benefits, we’d like to propose a four-point foundational framework that will allow security leaders to deploy AI coding tools and agents with a higher, more relevant standard of security best practices. It details exactly what enterprises can do to ensure safe, secure code development right now, and as agentic AI becomes an even bigger factor in the future.
