Le détournement de clics, également connu sous le nom de correction de l'interface utilisateur, est un type d'attaque dans lequel des acteurs malveillants incitent les utilisateurs à cliquer sur quelque chose de différent de ce qu'ils perçoivent en intégrant des pages Web dans des iframes. Cela peut conduire à des actions non autorisées et compromettre la sécurité des utilisateurs. Dans ce blog, nous explorerons comment empêcher les attaques de détournement de clics à l'aide de JavaScript et de configurations de serveur pour Apache et Nginx, ainsi que des exemples conviviaux.

Comprendre le détournement de clics

Le détournement de clics consiste à placer une iframe transparente ou opaque sur un élément légitime d'une page Web, ce qui amène les utilisateurs à effectuer sans le savoir des actions telles que la modification des paramètres ou le transfert de fonds.

Exemple concret

Prenons un scénario dans lequel un attaquant intègre une iframe cachée d'un site bancaire dans une page Web de confiance. Lorsqu'un utilisateur clique sur un bouton apparemment inoffensif, il peut en réalité autoriser une transaction bancaire.

Voici un exemple de page vulnérable :

    
Welcome to Our Site
    Click Me
    

Prévenir le détournement de clics avec JavaScript

Pour éviter les attaques de détournement de clic, vous pouvez utiliser JavaScript pour vous assurer que votre site Web n'est pas encadré. Voici un guide étape par étape sur la façon de mettre en œuvre cette protection :

1. Contournement des cadres JavaScript
Le Frame Busting consiste à utiliser JavaScript pour détecter si votre site Web est chargé dans une iframe et en sortir.

Exemple:

    
Secure Site
    
This site is protected from clickjacking attacks.

Dans cet exemple, le JavaScript vérifie si la fenêtre actuelle (window.self) n'est pas la fenêtre la plus haute (window.top). Si ce n'est pas le cas, il redirige la fenêtre la plus haute vers l'URL de la fenêtre actuelle, sortant ainsi de l'iframe.

2. Amélioration du Frame Busting avec les écouteurs d'événements
Vous pouvez encore améliorer votre technique de frame busting en utilisant des écouteurs d'événements pour vérifier en permanence si votre page est encadrée.

Exemple:

    
Secure Site
    
This site is protected from clickjacking attacks.

Dans cet exemple, la fonction PreventClickjacking est appelée sur les événements DOMContentLoaded, Load et Resize pour garantir une protection continue.

Protection côté serveur

Bien que les méthodes JavaScript soient utiles, la mise en œuvre de protections côté serveur fournit une couche de sécurité supplémentaire. Voici comment configurer les en-têtes HTTP dans Apache et Nginx pour empêcher le détournement de clic :

1. En-tête des options X-Frame
L'en-tête X-Frame-Options vous permet de spécifier si votre site peut être intégré dans des iframes. Il existe trois options :

DENY : empêche tout domaine d'intégrer votre page.
SAMEORIGIN : ​​permet l'intégration uniquement à partir de la même origine.
ALLOW-FROM uri : permet l'intégration à partir de l'URI spécifié.
Exemple:

X-Frame-Options: DENY

Configuration d'Apache
Ajoutez cet en-tête à la configuration de votre serveur :

# Apache
Header always set X-Frame-Options "DENY"

Configuration Nginx
Ajoutez cet en-tête à la configuration de votre serveur :

2. Ancêtres du cadre Content-Security-Policy (CSP)
CSP fournit une approche plus flexible via la directive frame-ancestors, qui spécifie les parents valides qui peuvent intégrer la page à l'aide d'iframes.

Exemple:

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

Configuration d'Apache
Ajoutez cet en-tête à la configuration de votre serveur :

Exemple:

# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"

Configuration Nginx
Ajoutez cet en-tête à la configuration de votre serveur :

# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'";

Conclusion

Le détournement de clics constitue une menace sérieuse pour la sécurité Web, mais en mettant en œuvre des techniques de contournement de trame JavaScript et des protections côté serveur telles que les en-têtes X-Frame-Options et Content-Security-Policy, vous pouvez protéger efficacement vos applications Web. Utilisez les exemples fournis pour améliorer la sécurité de votre site et offrir une expérience plus sûre à vos utilisateurs.