---
# System prepended metadata

title: Logbook for Lab 06

---

# Logbook for Lab 06

## Purpose

The purpose of this lab is to explore the common attack vector for clickjacking. 
Clickjacking, also known as a “UI redress attack,” is an attack that tricks a user into clicking on something they do not intend to when visiting a webpage, thus “hijacking” the click.

## Task 1: 

In order to mimic Alice's website we just need to add the following lines to the files: `attacker.html` and `attacker.css`.
```htmlembedded=
<iframe src="http://www.cjlab.com/" title="alice-cupcakes"></iframe>
```

```css=
iframe {
    height: 100%;
    width: 100%;
    position: absolute;
    border: 0;
}
```

Doing this allows the attacker website to look just like Alice's but with a malicious button in front of it.

![](https://i.imgur.com/YXMskPQ.png)

## Task 2: Let’s Get Clickjacking!

First, we place the malicious button in the position of the explore menu button, and then we hide it.

For that we need to add these fields in the attacker.css file:

```
    margin-left: 48px;
    margin-top: 360px;
    color: transparent;  /* font color */
    background-color: transparent;  /* button's background color */
```


The appearance of the attacker's website will be the same as the defender's website:

![](https://i.imgur.com/thOqXWg.png)

Clicking the "Explore Menu" button takes us to a page saying "You Have Been Hacked!!"

An example scenario was an attacker could cause a button click to trigger a purchase on another sales site, making the unintentional purchase without the user's knowledge or consent.

## Task 3: Bust That Frame!

In order to prevent Alice's from being clickjacked we need to add the following script to its `index.html` file:

```javascript=
window.onload = function() {
    makeThisFrameOnTop();
};

function makeThisFrameOnTop() {
    if (window.top != window.self) {
        window.top.location = window.self.location;
    }
}
```

With this code whenever we enter the attackers website the browser automatically opens Alice's unhacked website. As such, there is no hidden button on top of the `Explore Menu` button, preventing any clickjacking from happening.

## Task 4: Attacker Countermeasure (Bust the Buster)

In order to prevent the previous countermeasure from taking place the attacker can enable the attribute `sandbox=""` in the created iframe.

```htmlembedded=
<iframe src="http://www.cjlab.com/" title="alice-cupcakes" sandbox=""></iframe>
```

This option creates a sandbox environment in the attacker's website that applies more restrictions to the website that is being called in the iframe, for instance, it does not allow the website in the iframe to run scripts.

When this option is added the website run in the iframe is not changing the executing the `makeThisFrameOnTop` function defined in the previous task, instead it is simply being displayed like it used to before any countermeasures were taken.

As such, clicking the `Explore Menu` button takes the user to the _you have been hacked_ page:
![](https://i.imgur.com/eALIaXr.png)


## Task 5: The Ultimate Bust

As seen before options that envolve the use of frontend solutions can be countered by other frontend solutions on the attacker's side. As such a different approach must be taken in order to prevent this kind of attacks.

A correct approach is to add the following configurations to the website's `conf` file:

```
Header set X-Frame-Options "DENY"
Header set Content-Security-Policy "frame-ancestors 'none';"
```

The `X-Frame-Options` header is used to indicate whether or not the browser should be allowed to render a page in a `<frame>`, `<iframe>`, `<embed>` or `<object>`. The `"Deny"` option makes it so that browsers that have this measure of security don't run our website in these html tags.

The `Content-Security-Policy` header is used to the same effect as the header before. The big difference is in the supported browsers and also in the options we can pass to this header. The option  `"frame-ancestors"` allows us to set the website to only be displayed in certain html tags (`<frame>`, `<iframe>`, `<embed>` or `<object>`) where the other header option forbade all of them. We set this option to `'none'` to do the exact same thing as the other option, which is to not be allowed any tag.

With this options when we open the attacker's website we can see that our website is not loaded:

When we add only the `X-Frame-Options` header the page does not load our website as seen below:
```
<VirtualHost *:80>
    DocumentRoot /var/www/defender
    ServerName www.cjlab.com
    Header set X-Frame-Options "DENY"
</VirtualHost>
```
![](https://i.imgur.com/027aZyk.png)

When we add only the `Content-Security-Policy` header the page does not load our website as seen below:
```
<VirtualHost *:80>
    DocumentRoot /var/www/defender
    ServerName www.cjlab.com
    Header set Content-Security-Policy "frame-ancestors 'none';"
</VirtualHost>
```
![](https://i.imgur.com/Wqv2NZc.png)

With both these options enabled we secure our website the best we can, with the same resulting page as seen above:
![](https://i.imgur.com/pFOWS6c.png)

The button is still there but the page does not load correctly, which means it will probably not be clicked.
