JavaScript - Attaque de Clickjacking

Bonjour, futurs programmeurs ! Aujourd'hui, nous allons plonger dans le monde fascinant de la sécurité web, en nous concentrant spécifiquement sur une petite astuce sournoise appelée Clickjacking. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je vais vous guider à travers ce sujet pas à pas, comme j'ai fait pour des centaines d'étudiants au fil des ans. Alors, c'est parti !

JavaScript - Clickjacking Attack

Attaque de Clickjacking

Imaginez que vous êtes sur le point de cliquer sur une vidéo de chaton mignon, mais à la place, vous commandez accidentellement 100 canards en caoutchouc. Voilà essentiellement ce que fait une attaque de clickjacking - elle vous trompe en cliquant sur quelque chose que vous n'aviez pas l'intention de cliquer.

Le clickjacking, également connu sous le nom de UI redressing, est une technique malveillante utilisée par les attaquants pour tromper les utilisateurs en les faisant cliquer sur quelque chose de différent de ce qu'ils croient cliquer. Cela peut entraîner des actions non intentionnelles, un vol de données ou même une installation de malware.

Comment fonctionne le clickjacking ?

Maintenant, analysons comment cette attaque sournoise fonctionne réellement :

L'attaquant crée une page web qui semble inoffensive.
Ils intègrent un site cible (celui avec lequel ils veulent que vous interagissiez) dans un iframe invisible.
La page de l'attaquant est conçue pour superposer parfaitement les boutons ou les liens du site cible.
Lorsque vous croyez cliquer sur la page de l'attaquant, vous interagissez en réalité avec le site cible caché.

C'est comme un tours de magie, mais avec des pages web !

Exemples

Voyons quelques exemples de code pour mieux comprendre ce concept. Ne vous inquiétez pas si vous ne comprenez pas tout de suite - nous allons tout décomposer !

Exemple 1 : Clickjacking de Base

<html>
<head>
<title>Gagnez un Prix !</title>
<style>
#target_website {
position:relative;
width:128px;
height:128px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
position:absolute;
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>Cliquez ici pour gagner un prix !</h1>
<button>Revendiquer le Prix</button>
</div>
<iframe id="target_website" src="https://example.com/delete-account"></iframe>
</body>
</html>

Dans cet exemple :

Nous créons un site de leurre qui promet un prix.
Nous intégrons le site cible (example.com/delete-account) dans un iframe invisible.
L'iframe est positionné sur le bouton "Revendiquer le Prix".
Lorsqu'un utilisateur clique sur le bouton, il clique en réalité sur le bouton "Supprimer le compte" sur le site cible !

Exemple 2 : Clickjacking avec Glisser-Déposer

<html>
<head>
<title>Éditeur de Photos</title>
<style>
#target_website {
position:absolute;
width:300px;
height:400px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>Faites glisser l'image pour l'éditer</h1>
<img src="cute_cat.jpg" draggable="true" ondragstart="drag(event)">
</div>
<iframe id="target_website" src="https://example.com/share-private-data"></iframe>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
</body>
</html>

Dans cet exemple plus avancé :

Nous créons une interface factice d'éditeur de photos.
Le site cible (qui pourrait partager des données privées) est intégré dans un iframe invisible.
Lorsque l'utilisateur essaie de faire glisser et déposer l'image, il pourrait interagir avec le site cible sans le savoir, potentiellement partageant des informations privées.

Incidents de Clickjacking dans le Monde Réel

Le clickjacking n'est pas seulement une menace théorique. Il a été utilisé dans des attaques réelles :

En 2008, un ver de clickjacking a propagé sur Facebook, faisant cliquer les utilisateurs involontairement sur le bouton "J'aime" sur certaines pages.
En 2012, un chercheur a démontré une attaque de clickjacking sur le marché d'applications Android de Google, capable de tromper les utilisateurs en les faisant acheter des applications sans leur connaissance.
En 2017, une vulnérabilité de clickjacking a été découverte dans l'application Web Outlook de Microsoft, permettant potentiellement aux attaquants de lire les e-mails des victimes.

Ces incidents montrent pourquoi il est crucial de comprendre et de prévenir les attaques de clickjacking.

Mesures Préventives

Maintenant que nous connaissons les dangers, examinons comment nous pouvons nous protéger contre les attaques de clickjacking :

Méthode	Description	Exemple
X-Frame-Options	En-tête HTTP qui empêche une page d'être affichée dans un iframe	`X-Frame-Options: DENY`
Content Security Policy	Permet un contrôle plus granulaire sur les sources qui peuvent intégrer votre contenu	`Content-Security-Policy: frame-ancestors 'self'`
Scripts de Cassure de Frame	JavaScript qui sort des iframes	`if (top != self) top.location = self.location;`
Cookies SameSite	Empêche les cookies d'être envoyés dans les requêtes intersites	`Set-Cookie: session=123; SameSite=Strict`

Voyons un exemple simple d'un script de cassure de frame :

<html>
<head>
<style>html{display:none;}</style>
<script>
if (self == top) {
document.documentElement.style.display = 'block';
} else {
top.location = self.location;
}
</script>
</head>
<body>
<h1>Contenu Protégé</h1>
<p>Cette page est protégée contre le clickjacking !</p>
</body>
</html>

Ce script fait ce qui suit :

Cache initialement toute la page.
Vérifie si la page est la fenêtre la plus haute.
Si elle l'est, elle affiche le contenu.
Si ce n'est pas le cas (c'est-à-dire qu'elle est dans un iframe), elle sort de l'iframe.

Souvenez-vous, la sécurité web est comme un jeu de chat et de souris. À mesure que de nouvelles méthodes d'attaque émergent, nous devons constamment mettre à jour nos défenses. Restez curieux, continuez à apprendre et toujours prioriser la sécurité dans votre parcours de développement web !

J'espère que ce tutoriel vous a été utile pour comprendre les attaques de clickjacking. Souvenez-vous, avec de grandes compétences de codage vient une grande responsabilité. Utilisez vos compétences avec sagesse, et bon codage !

Credits: Image by storyset

Tutoriel précédent:

JavaScript - IndexedDB

Tutoriel suivant:

JavaScript - Currying