L'émergence d'attaques sophistiquées telles que le détournement de clics a fait de la sécurité un problème primordial dans le monde en ligne d'aujourd'hui. En incitant les consommateurs à cliquer sur quelque chose qui diffère de ce qu'ils voient initialement, les attaquants déploient une méthode néfaste appelée « détournement de clic », qui peut avoir des résultats désastreux. Les attaques de ce type peuvent potentiellement inciter les gens à télécharger des logiciels malveillants, à envoyer des informations privées ou même à faire des choses qu'ils ne voulaient pas, comme acheter quoi que ce soit. Afin de se protéger contre ce type d'attaques, JavaScript est un composant essentiel des applications Web dynamiques.

Dans cet article de blog, nous approfondirons le fonctionnement des attaques par détournement de clic, pourquoi elles sont si dangereuses et comment vous pouvez mettre en œuvre des techniques de défense contre le détournement de clic en JavaScript. Nous fournirons des exemples de code et des stratégies pratiques pour vous aider à sécuriser vos applications Web et à prévenir ces attaques malveillantes.

Comprendre les attaques de détournement de clics

Le détournement de clics est un type d'attaque dans lequel un site Web malveillant intègre un autre site Web, généralement à l'aide d'un code HTML, et le superpose avec des éléments invisibles ou trompeurs, « détournant » efficacement les clics de l'utilisateur. Lorsque l'utilisateur interagit avec la page intégrée, il croit cliquer sur un bouton ou un lien sur le site visible, mais il interagit en réalité avec le site intégré masqué.

Voici un exemple simple de la façon dont un attaquant pourrait effectuer une attaque de détournement de clic :

    
Click the button to win a prize!
    Claim Prize
     

Dans le code ci-dessus, la page de l'attaquant apparaît comme une page Web normale, mais une iframe invisible qui charge la page cible est superposée par-dessus. Les utilisateurs pensent qu'ils interagissent avec la page malveillante, mais ils cliquent en réalité sur des éléments de l'iframe.

Pourquoi le détournement de clics est dangereux

Le détournement de clics peut entraîner de graves conséquences, notamment :

Achats involontaires : les utilisateurs peuvent cliquer sur des boutons « Acheter » masqués, ce qui entraîne des transactions indésirables.

Compte compromis : les attaquants peuvent inciter les utilisateurs à modifier leurs paramètres ou à soumettre des données sensibles sur des sites Web en qui ils ont confiance.

Téléchargement de logiciels malveillants : le détournement de clics peut être utilisé pour lancer des téléchargements de fichiers malveillants, infectant les appareils des utilisateurs.

Perte de contrôle sur les réseaux sociaux : certaines attaques consistent à inciter les utilisateurs à aimer ou à partager du contenu sur les plateformes de réseaux sociaux.

Ces attaques sont particulièrement dangereuses, car les utilisateurs n'ont généralement aucune idée qu'ils ont été compromis jusqu'à ce qu'il soit trop tard.

Se défendre contre le détournement de clics en JavaScript

Maintenant que nous comprenons le fonctionnement du détournement de clics, explorons différentes techniques de défense que vous pouvez implémenter en JavaScript.

1. Utilisation de l'en-tête X-Frame-Options

L'en-tête HTTP X-Frame-Options est l'un des moyens les plus simples et les plus efficaces pour empêcher vos pages Web d'être intégrées dans des iframes sur d'autres sites Web. Cet en-tête indique au navigateur si le site peut être intégré dans une iframe.

Il existe trois options principales pour l'en-tête X-Frame-Options :

DENY : empêche l'affichage complet de la page dans une iframe.

SAMEORIGIN : ​​permet d'intégrer la page uniquement si la requête provient du même domaine.

ALLOW-FROM : permet à la page d'être intégrée uniquement par un domaine spécifique et approuvé.

Voici comment définir cet en-tête à l'aide de JavaScript dans Node.js :

const express = require('express');
const helmet = require('helmet');

const app = express();

// Use helmet to set X-Frame-Options header
app.use(helmet.frameguard({ action: 'deny' }));

app.get('/', (req, res) => {
    res.send('Clickjacking prevention with X-Frame-Options');
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

Dans cet exemple, le middleware casque.frameguard() garantit que l'en-tête X-Frame-Options est défini sur DENY pour toutes les réponses, empêchant ainsi le détournement de clic en interdisant l'intégration d'iframe.

1. Politique de sécurité du contenu (CSP)

Un autre mécanisme de défense efficace consiste à utiliser l'en-tête Content-Security-Policy (CSP). L'en-tête CSP offre un contrôle plus précis sur la manière et l'endroit où votre contenu peut être intégré.

Pour éviter le détournement de clics, vous pouvez inclure la directive frame-ancestors dans l'en-tête de votre CSP. Cette directive vous permet de spécifier quels domaines sont autorisés à intégrer votre site.

Exemple d'en-tête CSP :

Politique de sécurité du contenu : « soi » des ancêtres du cadre ;

Cette politique garantit que seule la même origine (« soi ») peut intégrer la page dans une iframe, empêchant ainsi d'autres sites Web de le faire.

Voici comment implémenter CSP dans une application Node.js :

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.setHeader("Content-Security-Policy", "frame-ancestors 'self'");
    next();
});

app.get('/', (req, res) => {
    res.send('CSP frame-ancestors directive in action!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

1. Techniques de suppression de cadres JavaScript

Bien que s'appuyer sur des en-têtes tels que X-Frame-Options et CSP soit généralement plus fiable, vous pouvez également implémenter le frame busting à l'aide de JavaScript. Les scripts de contournement de trame détectent lorsque votre page est intégrée dans une iframe et la forcent à sortir de l'iframe.

Voici un simple extrait de code JavaScript pour détecter et empêcher l'intégration d'iframe :

if (window.top !== window.self) {
    // The page is embedded in an iframe, so redirect it
    window.top.location = window.self.location;
}

Ce code vérifie si la fenêtre actuelle est chargée dans une iframe (window.top !== window.self). Si tel est le cas, il redirige le cadre parent (window.top) vers l'emplacement actuel de l'iframe (window.self), sortant ainsi de l'iframe.

Il s'agit d'une technique de base qui peut être contournée par des attaquants avancés, elle doit donc être utilisée comme mécanisme de défense secondaire en conjonction avec des en-têtes tels que X-Frame-Options et CSP.

1. Vérification des actions de clic avec JavaScript

Une autre technique défensive consiste à ajouter des boîtes de dialogue de confirmation pour les actions critiques qui pourraient être exploitées lors d'une attaque de détournement de clic. En demandant aux utilisateurs de confirmer leurs actions, vous pouvez réduire le risque de clics non autorisés.

Voici un exemple d'ajout d'une boîte de dialogue de confirmation à un événement de clic sur un bouton :

Delete Account

Dans cet exemple, lorsque l'utilisateur clique sur le bouton « Supprimer le compte », une boîte de dialogue de confirmation apparaît. Si l'utilisateur annule, l'action est empêchée.

1. Implémentation des attributs Sandbox pour le contenu intégré

Lorsque vous intégrez du contenu sur votre propre site, vous pouvez utiliser l'attribut sandbox sur les iframes pour restreindre les fonctionnalités du contenu intégré. Ceci est utile lors de l'intégration de contenu tiers non fiable, car cela limite ce que le contenu intégré peut faire.

Par exemple:

L'attribut sandbox applique des restrictions sur l'iframe, telles que la désactivation des formulaires, des scripts et l'empêchement de l'iframe de naviguer dans la page parent. Vous pouvez autoriser de manière sélective certaines fonctionnalités en ajoutant des valeurs telles que Allow-Scripts ou Allow-same-origin.

Conclusion : Renforcer les défenses contre le détournement de clics

Le détournement de clics constitue un risque de sécurité sérieux auquel les développeurs Web doivent faire face pour protéger les utilisateurs et les données. En mettant en œuvre des techniques de défense telles que la définition des en-têtes X-Frame-Options et Content-Security-Policy, l'utilisation de techniques de contournement de trame JavaScript et l'ajout de boîtes de dialogue de confirmation utilisateur pour les actions critiques, vous pouvez réduire considérablement le risque d'attaques de détournement de clic sur vos applications Web.

Il est essentiel de superposer ces mécanismes de défense pour garantir une protection complète, car aucune méthode n’est à elle seule infaillible. En combinant plusieurs stratégies, vous pouvez rendre vos applications Web plus résistantes au détournement de clics et à d'autres formes d'attaques.

Liens de référence :

OWASP : Aide-mémoire pour la défense contre le détournement de clics

MDN Web Docs : Politique de sécurité du contenu (CSP)

Principes de base de Google Web : empêcher le détournement de clics

En restant informé et vigilant, vous pouvez protéger vos utilisateurs et leurs données contre les dangers du détournement de clics, garantissant ainsi une expérience de navigation plus sécurisée.