How does it work?

The game works by exploiting a security flaw called Clickjacking, which allows a malicious site to redirect clicks to another website to perform actions on behalf of the user, without their consent.

In this game, in the locations where mines would be, are actually hidden Facebook like buttons embedded in the page. When you click them, it will cause your Facebook account to like the link it is pointed at. For example:

As you can see, the suspiciously shaped tiles of this minesweeper game hide a secret. Let's take a closer look into the world of Clickjacking attacks.

The Clickjacking attack

In the security world, Clickjacking is a forgotten cousin when compared to other high-profile exploits such as SQL Injection or Cross Site Scripting (XSS). However, if a site is vulnerable to it, there still can be bad consequences for users.

Here's a fictional, interactive demonstration of how Clickjacking attacks work:

https://shopfast.com.au/shonky-hammer

View source

ShopFast

Logged in as Gareth

Logout

Shonky Hammer

Shonky Steve PTY LTD

$100.00

1-click buy

Reviews: 100 ★★☆☆☆ 2 stars

It sucks!!!

★☆☆☆☆ 1 star

Barely works!!!

★☆☆☆☆ 1 star

How do I refund??

★★★★★ 5 stars

Item is great but got lost!!!

★★☆☆☆ 2 stars

Delivered quickly

★★★★★ 5 stars

Viewing source code for: https://shopfast.com.au

<header>
  <div>
    <img src="shop-fast-mini-logo.png">
    <h1>ShopFast</h1>
  </div>
  <div>
    <div>Logged in as Gareth</div>
    <button>Logout</button>
  </div>
</header>
<div class="item">
  <img src="hammer.png">
  <div>
    <h3>Shonky Hammer</h3>
    <p>Shonky Steve PTY LTD</p>
    <p>$100.00</p>
    <button>
      <img src="shopping-cart.svg">
      <span>1-click buy</span>
    </button>
  </div>
</div>
<div class="item-reviews">
  <div>
    Reviews: 100
    <span class="star-count">
      ★★☆☆☆ 2 stars
    </span>
  </div>
</div>
<div class="user-reviews">
  <div class="review">
    <p>It sucks!!!</p>
    <span class="star-count">
      ★☆☆☆☆ 1 star
    </span>
  </div>
  <div class="review">
    <p>Barely works!!!</p>
    <span class="star-count">
      ★☆☆☆☆ 1 star
    <span>
  </div>
  <div class="review">
    <p>How do I refund??</p>
    <span class="star-count">
      ★★★★★ 5 stars
    <span>
  </div>
  <div class="review">
    <p>Item is great but got lost!!!</p>
    <span class="star-count">
      ★★☆☆☆ 2 stars
    <span>
  </div>
  <div class="review">
    <p>Delivered quickly</p>
    <span class="star-count">
      ★★★★★ 5 stars
    <span>
  </div>
</div>

Welcome to ShopFast!

Australia's leading eCommerce website.

This fictional site lets you purchase goods from sellers across the world, with just one click.

Pressing the '1-click buy' button will automatically debit the money from your account, and send the purchased item to your address.

Try clicking it! To make it easier to understand how the demo works, we'll make a pop-up appear when you click it.

https://youhavewonafreecar.com

View source

Congratulations, Shonky Steve, you are now the proud owner of youhavewonafreecar.com!

Please edit your new website, and enjoy!

Viewing source code for: https://youhavewonafreecar.com

<div>
  <p>
    Congratulations, Shonky Steve, you are
    now the proud owner of
    youhavewonafreecar.com!
  </p>
  <p>
    Please edit your new website, and
    enjoy!
  </p>
</div>
<img src="underconstruction.gif">

The Heist Begins

Shonky Steve wishes to get more people to buy his shoddy items, but he's noticed the bad reviews have started to deter people.

Instead, he decides to set up a website to trick people into buying them.

He purchases YouHaveWonAFreeCar.com and begins his master plan.

https://youhavewonafreecar.com

View source

ShopFast

Logged in as Gareth

Logout

Shonky Hammer

Shonky Steve PTY LTD

$100.00

1-click buy

Reviews: 100 ★★☆☆☆ 2 stars

It sucks!!!

★☆☆☆☆ 1 star

Barely works!!!

★☆☆☆☆ 1 star

How do I refund??

★★★★★ 5 stars

Item is great but got lost!!!

★★☆☆☆ 2 stars

Delivered quickly

★★★★★ 5 stars

Viewing source code for: https://youhavewonafreecar.com

<div>
  <iframe src="https://shopfast.com.au">
  </iframe>
</div>

Inception

First, he embeds the ShopFast website inside his, in a nested window.

Notice how identical it can be with the original site, however note that the URL that shows up in the "browser" is Shonky's, not ShopFast's URL.

Web browsers by default will allow this to happen, and the embedded website will usually act as normal. If you are logged in, you will also appear so in the embedded site.

Interacting with the embedded site works as normal. You can even press buy!

https://youhavewonafreecar.com

View source

ShopFast

Logged in as Gareth

Logout

Shonky Hammer

Shonky Steve PTY LTD

$100.00

1-click buy

Reviews: 100 ★★☆☆☆ 2 stars

It sucks!!!

★☆☆☆☆ 1 star

Barely works!!!

★☆☆☆☆ 1 star

How do I refund??

★★★★★ 5 stars

Item is great but got lost!!!

★★☆☆☆ 2 stars

Delivered quickly

★★★★★ 5 stars

Viewing source code for: https://youhavewonafreecar.com

<div>
  <iframe src="https://shopfast.com.au">
  </iframe>
</div>
<div>
  <div class="blocker-1"></div>
  <div class="blocker-2"></div>
  <div class="blocker-3"></div>
  <div class="blocker-4"></div>
</div>
<style>
/* Style the divs to overlap with
   the rest of the content. */
.blocker-1 {
  position: absolute;
  background-color: black;
  z-index: 2;
  width: 380px;
  height: 122px;
}
.blocker-2 {
  position: absolute;
  background-color: black;
  z-index: 2;
  width: 192px;
  height: 356px;
}
.blocker-3 {
  position: absolute;
  background-color: black;
  z-index: 2;
  width: 100px;
  height: 376px;
  left: 281px;
}
.blocker-4 {
  position: absolute;
  background-color: black;
  z-index: 2;
  width: 380px;
  height: 210px;
  top: 170px;
}
</style>

Covering things up

Steve will intentionally set up his website to trick people to click buy on his item.

First, he covers up everything but the buy button with elements so that people don't accidentally interact with the site in other ways (clicking logging out, for example).

Adjust the transparency of Steve's overlay to see how it works:

Transparency: 100%

Show overlay 1

Show overlay 2

Show overlay 3

Show overlay 4

https://youhavewonafreecar.com

View source

You are the 1,000,000th visitor!!! Claim!! Click to claim your car!!!!

ShopFast

Logged in as Gareth

Logout

Shonky Hammer

Shonky Steve PTY LTD

$100.00

1-click buy

Reviews: 100 ★★☆☆☆ 2 stars

It sucks!!!

★☆☆☆☆ 1 star

Barely works!!!

★☆☆☆☆ 1 star

How do I refund??

★★★★★ 5 stars

Item is great but got lost!!!

★★☆☆☆ 2 stars

Delivered quickly

★★★★★ 5 stars

Viewing source code for: https://youhavewonafreecar.com

<div>
  <iframe src="https://shopfast.com.au">
  </iframe>
</div>
<div>
  <div class="blocker-1"></div>
  <div class="blocker-2"></div>
  <div class="blocker-3"></div>
  <div class="blocker-4"></div>
  <div id="spam-container">
    <img src="free-car.png">
    <span>
      You are the 1,000,000th visitor!!!
    </span>
    <button>Claim!!</button>
    <img src="cool-car.png">
    <img src="red-arrow.png">
    <span>Click to claim your car!!!!</span>
  </div>
</div>
<style>
#spam-container {
  /* Intentionally ignore clicks, so they
     click through to items below. */
  pointer-events: none;
}
/* Style the divs to overlap with
   the rest of the content. */
.blocker-1 {
  position: absolute;
  background-color: black;
  z-index: 2;
  width: 380px;
  height: 122px;
}
.blocker-2 {
  position: absolute;
  background-color: black;
  z-index: 2;
  width: 192px;
  height: 356px;
}
.blocker-3 {
  position: absolute;
  background-color: black;
  z-index: 2;
  width: 100px;
  height: 376px;
  left: 281px;
}
.blocker-4 {
  position: absolute;
  background-color: black;
  z-index: 2;
  width: 380px;
  height: 210px;
  top: 170px;
}
</style>

Free Cars!

Finally, Steve adds some content to his site that's enticing enough to get people to click.

The "Enter giveaway" button doesn't do anything. Instead, it's intentionally set up to ignore clicks.

When you click it, you will actually be clicking the Buy Now button underneath, even though it's not visible!

Unfortunately for the person claiming their "prize", they'll only receive a shonky hammer and feel a little lighter in the pocket, too.

Transparency

Extra credit

And with that, we've demonstrated how a Clickjacking attack works. A malicious website can embed another website, and be designed to trick visitors to perform unintended actions.

It's not just limited to single clicks! You can chain multiple clicks together to perform more complex actions.

Consider a cloud storage website, where there's a confirmation to delete a file. How would you design a site to trick people to click in two locations?

https://gobblecloud.com/files

View source

Gobble Cloud

Logout

Are you sure you wish to delete this file?

Yes Cancel

Files

Filename	Uploaded	Actions
work.pdf	March 16
crimes.docx	Feb 30
fanfic.rtf	Jan 1
memes.tiff	Jan 2

Viewing source code for: https://gobblecloud.com/files

<div class="header">
  <img src="gobble-logo.png">
  <h1>Gobble Cloud</h1>
  <button class="logout">Logout</button>
</div>
<div>
  <h4>Files</h4>
  <table class="file-listing">
    <thead>
      <tr>
        <th>Filename</th>
        <th>Uploaded</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>work.pdf</td>
        <td>March 16</td>
        <td><img src="rubbish.svg"></td>
      </tr>
      <tr>
        <td>crimes.docx</td>
        <td>Feb 30</td>
        <td>
          <img src="rubbish.svg">
        </td>
      </tr>
      <tr>
        <td>fanfic.rtf</td>
        <td>Jan 1</td>
        <td>
          <img src="rubbish.svg">
        </td>
      </tr>
      <tr>
        <td>memes.tiff</td>
        <td>Jan 2</td>
        <td>
          <img src="rubbish.svg">
        </td>
      </tr>
    </tbody>
  </table>
  <div class="modal hidden">
    <div>
      Are you sure you wish to delete
      this file?
    </div>
    <div>
      <button>Yes</button>
      <button>Cancel</button>
    </div>
  </div>
</div>

← Prev Next →

How do I know if a site is vulnerable?

I've written a tool to easily check whether a site is vulnerable to Clickjacking. A site is vulnerable when the developer responsible for hosting it has not included a setting on their website that will reject attempts at embedding it on other websites.

What these field values specify is whether another website is allowed to embed this website in their site. If it's not allowed, then your web browser (Chrome, Firefox, Safari, etc) will refuse to embed it if it's tried, thus thwarting the attack.

As an example, here's what it looks like when your browser attempts to load a website that isn't allowed to be embedded (in this case, Google).

Some sites may intentionally want to allow being embedded in other sites, such as the Facebook "Like" button. It's used to allow websites (such as news sites) to let users "like" a page, making sure the article gets more attention. Facebook uses the Like button to discreetly track users across the web. They're embedded across 7.5 million websites - that's quite a spy network!

I'm a developer, how do I fix my site?

I've written a guide here.

How to eradicate this vulnerability?

The crux of the problem is that it's allowed by default. If instead it was changed to disallowed by default, and only allow same-origin embeds (i.e. the site can embed itself), this problem wouldn't occur nearly as often.

That's it. Change the default behaviour to instead require opting-in into allowing embeds. Whilst this may break some existing sites, it would one line of configuration change to allow where it's needed.

If the site is unable to be updated (perhaps it's fallen out of maintenance), it's possible to use browser extensions to override the settings, and enable it again.

There are a lot of websites out there that are not created by elite teams of developers, with a security team backing them to detect these problems. Instead, there's many apps out there, made by junior developers, or farmed out to the lowest bidder. It is generally a Good Idea to defend against ignorance.

How do I protect myself?

Unfortunately, it's up to the website creators to fix their website to make their users not vulnerable to Clickjacking attacks for that site.

However, if you wish to fix this specific attack against Facebook likes, you can install some software which has built-in protections against trackers and ads, which thwart this method.

I personally recommend:

• Firefox or Safari (iOS/Mac) browsers.
• These both have great built-in protections for both safety and privacy.
• Unfortunately Google Chrome does not (and probably won't ever) have privacy protections from trackers, as their business is built around tracking user-information and selling ads.
• Privacy Badger - A browser extension that intelligently blocks trackers.
• For Google Chrome: here
• For Firefox: here
• For Edge: here
• Safari is not supported. 😞
• uBlock Origin - The best ad blocker in existence.
• For Google Chrome: here
• For Firefox: here
• For Edge: here
• Safari is not supported. 😞 However, I've heard good things about 1Blocker.

Acknowledgements

If you're curious, the code for all this is free and open-source on GitHub, here. Or, just view source on this page. 🙃