suchen

Heim  >  Artikel  >  Web-Frontend  >  Verhindern von Clickjacking-Angriffen in JavaScript

Verhindern von Clickjacking-Angriffen in JavaScript

WBOY
WBOYOriginal
2024-07-22 17:56:391058Durchsuche

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>

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>

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>

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

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

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

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'

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

Beispiel:

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

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

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

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!

JavaScript nginx if for while using Event function this apache http ui embedding iframe
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Größtes Rechteck im HistogrammNächster Artikel：Größtes Rechteck im Histogramm

In Verbindung stehende Artikel

Mehr sehen