Clickjacking, auch bekannt als UI-Redressing, ist eine Art Angriff, bei dem 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 Clickjacking-Angriffe mithilfe von JavaScript und Serverkonfigurationen für Apache und Nginx verhindert werden können.

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 Banking-Site 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:

    
Welcome to Our Site
    Click Me
    

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

    
Secure Site
    
This site is protected from clickjacking attacks.

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:

    
Secure Site
    
This site is protected from clickjacking attacks.

In diesem Beispiel wird die Funktion „preventClickjacking“ für die DOMContentLoaded-, Load- und Resize-Ereignisse aufgerufen, um 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 Header „X-Frame-Options“ können Sie angeben, ob Ihre Site in Iframes eingebettet werden kann. Es gibt drei Optionen:

VERWEIGERN: Verhindert, dass eine Domain Ihre Seite einbettet.
SAMEORIGIN: Ermöglicht die Einbettung nur vom gleichen 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 Eltern 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.