Maison > Article > interface Web > Prévenir les attaques de détournement de clics en JavaScript

Prévenir les attaques de détournement de clics en JavaScript

WBOYoriginal: 2024-07-22 17:56:391058parcourir

Preventing Clickjacking Attacks in JavaScript

Le détournement de clics, également connu sous le nom de redressement 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 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clickjacking Example</title>
</head>
<body>
    <h1>Welcome to Our Site</h1>
    <button onclick="alert('Clicked!')">Click Me</button>
    <iframe src="https://example-bank.com/transfer" style="opacity:0; position:absolute; top:0; left:0; width:100%; height:100%;"></iframe>
</body>
</html>

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. Casse-cadre JavaScript
Le Frame Busting consiste à utiliser JavaScript pour détecter si votre site Web est chargé dans une iframe et en sortir.

Exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame Busting Example</title>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.self.location;
        }
    </script>
</head>
<body>
    <h1>Secure Site</h1>
    <p>This site is protected from clickjacking attacks.</p>
</body>
</html>

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 auditeurs 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 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Frame Busting</title>
    <script>
        function preventClickjacking() {
            if (window.top !== window.self) {
                window.top.location = window.self.location;
            }
        }

        window.addEventListener('DOMContentLoaded', preventClickjacking);
        window.addEventListener('load', preventClickjacking);
        window.addEventListener('resize', preventClickjacking);
    </script>
</head>
<body>
    <h1>Secure Site</h1>
    <p>This site is protected from clickjacking attacks.</p>
</body>
</html>

Dans cet exemple, la fonction PreventClickjacking est appelée sur les événements DOMContentLoaded, Load et Resize pour assurer 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 X-Frame-Options
L'en-tête X-Frame-Options vous permet de spécifier si votre site peut être intégré dans des iframes. Il y a 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 offre une approche plus flexible grâce à 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 cadres 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript nginx if for while using Event function this apache http ui embedding iframe

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le plus grand rectangle de l'histogrammeArticle suivant：Le plus grand rectangle de l'histogramme

Articles Liés

Voir plus