Verhindern von Clickjacking-Angriffen in JavaScript-js-Tutorial-php.cn

Verhindern von Clickjacking-Angriffen in JavaScript

WBOY

Freigeben： 2024-07-22 17:56:39

Original

1073 Leute haben es durchsucht

Preventing Clickjacking Attacks in JavaScript

Clickjacking, auch bekannt als UI-Redressing, ist eine Angriffsart, bei der böswillige Akteure Benutzer dazu verleiten, auf etwas zu klicken, das sich von dem unterscheidet, was sie wahrnehmen, indem sie Webseiten in Iframes einbetten. Dies kann zu unbefugten Aktionen führen und die Benutzersicherheit gefährden. In diesem Blog werden wir zusammen mit benutzerfreundlichen Beispielen untersuchen, wie man Clickjacking-Angriffe mithilfe von JavaScript und Serverkonfigurationen für Apache und Nginx verhindern kann.

Clickjacking verstehen

Beim Clickjacking wird ein transparenter oder undurchsichtiger Iframe über einem legitimen Webseitenelement platziert, was dazu führt, dass Benutzer unwissentlich Aktionen wie das Ändern von Einstellungen oder das Überweisen von Geldern ausführen.

Beispiel aus der Praxis

Stellen Sie sich ein Szenario vor, in dem ein Angreifer einen versteckten Iframe von einer Bankseite in eine vertrauenswürdige Webseite einbettet. Wenn ein Benutzer auf eine scheinbar harmlose Schaltfläche klickt, autorisiert er möglicherweise tatsächlich eine Banktransaktion.

Hier ist ein Beispiel einer anfälligen Seite:

<!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>

Nach dem Login kopieren

Clickjacking mit JavaScript verhindern

Um Clickjacking-Angriffe zu verhindern, können Sie mithilfe von JavaScript sicherstellen, dass Ihre Website nicht mit Frames versehen wird. Hier finden Sie eine Schritt-für-Schritt-Anleitung zur Implementierung dieses Schutzes:

1. JavaScript-Frame-Busting
Beim Frame-Busting wird JavaScript verwendet, um zu erkennen, ob Ihre Website in einen Iframe geladen ist, und diesen zu verlassen.

Beispiel:

<!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>

Nach dem Login kopieren

In diesem Beispiel prüft das JavaScript, ob das aktuelle Fenster (window.self) nicht das oberste Fenster (window.top) ist. Ist dies nicht der Fall, wird das oberste Fenster auf die URL des aktuellen Fensters umgeleitet, wodurch der Iframe effektiv verlassen wird.

2. Verbessertes Frame-Busting mit Event-Listenern
Sie können Ihre Frame-Busting-Technik weiter verbessern, indem Sie Ereignis-Listener verwenden, um kontinuierlich zu überprüfen, ob Ihre Seite gerahmt ist.

Beispiel:

<!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>

Nach dem Login kopieren

In diesem Beispiel wird die Funktion „preventClickjacking“ für die Ereignisse „DOMContentLoaded“, „Laden“ und „Größenänderung“ aufgerufen, um einen kontinuierlichen Schutz sicherzustellen.

Serverseitiger Schutz

Während JavaScript-Methoden nützlich sind, bietet die Implementierung serverseitiger Schutzmaßnahmen eine zusätzliche Sicherheitsebene. So richten Sie HTTP-Header in Apache und Nginx ein, um Clickjacking zu verhindern:

1. X-Frame-Options-Header
Mit dem X-Frame-Options-Header können Sie angeben, ob Ihre Site in Iframes eingebettet werden kann. Es gibt drei Möglichkeiten:

VERWEIGERN: Verhindert, dass eine Domain Ihre Seite einbettet.
SAMEORIGIN: Ermöglicht die Einbettung nur von demselben Ursprung.
ALLOW-FROM uri: Ermöglicht das Einbetten von der angegebenen URI.
Beispiel:

X-Frame-Options: DENY

Nach dem Login kopieren

Apache-Konfiguration
Fügen Sie diesen Header zu Ihrer Serverkonfiguration hinzu:

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

Nach dem Login kopieren

Nginx-Konfiguration
Fügen Sie diesen Header zu Ihrer Serverkonfiguration hinzu:

2. Content-Security-Policy (CSP) Frame Ancestors
CSP bietet einen flexibleren Ansatz durch die Direktive „frame-ancestors“, die gültige übergeordnete Elemente angibt, die die Seite mithilfe von Iframes einbetten dürfen.

Beispiel:

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

Nach dem Login kopieren

Apache-Konfiguration
Fügen Sie diesen Header zu Ihrer Serverkonfiguration hinzu:

Beispiel:

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

Nach dem Login kopieren

Nginx-Konfiguration
Fügen Sie diesen Header zu Ihrer Serverkonfiguration hinzu:

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

Nach dem Login kopieren

Abschluss

Clickjacking stellt eine ernsthafte Bedrohung für die Websicherheit dar, aber durch die Implementierung von JavaScript-Frame-Busting-Techniken und serverseitigen Schutzmaßnahmen wie X-Frame-Options und Content-Security-Policy-Headern können Sie Ihre Webanwendungen effektiv schützen. Nutzen Sie die bereitgestellten Beispiele, um die Sicherheit Ihrer Website zu erhöhen und Ihren Benutzern ein sichereres Erlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonVerhindern von Clickjacking-Angriffen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!