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.