rel=noopener noreferrer: Sicherheitspraxis für externe Links
Viele WordPress-Benutzer bemerken möglicherweise mysteriöse Code-Schnipsel in ihrem externe Links bei der Untersuchung des HTML-Codes ihrer Website. Der Code „rel=“noopener noreferrer““ erscheint häufig ohne direktes Zutun des Websitebesitzers und wirft Fragen zu seinem Zweck und seinen möglichen Auswirkungen auf die Suchmaschinenoptimierung auf.
Diese automatisch hinzugefügten Tags sind aus SEO-Sicht kein Grund zur Sorge. WordPress implementiert diese Attribute unter bestimmten Umständen standardmäßig für externe Links. Suchmaschinen verstehen diese Attribute vollständig und sie haben keinen negativen Einfluss auf die Indexierung oder das Ranking Ihrer Website in den Suchergebnissen.
Was ist rel="noopener noreferrer"?
Das rel="noopener noreferrer" ist ein HTML-Attribut, das speziell für externe Links auf Ihrer Website entwickelt wurde. Dieses Attribut besteht aus zwei separaten Komponenten, die unabhängig voneinander funktionieren:
- rel="noopener"
- rel="noreferrer"
Diese Komponenten beeinflussen, wie externe Websites mit Ihrer Site interagieren, obwohl jede einem anderen Zweck dient.
Wenn Sie dieses Attribut implementieren, wird es in Ihrem HTML-Code wie folgt angezeigt:
<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">
Die Überprüfung, ob Ihre Links diesen Code enthalten, ist unkompliziert. Sie können entweder Ihre Code-Editor der Website und verwenden Sie die Suchfunktion des Browsers, um nach rel="noopener noreferrer", oder zeigen Sie eine beliebige Webseite an, klicken Sie mit der rechten Maustaste, wählen Sie „Untersuchen“ und suchen Sie in der Entwicklerkonsole nach dem Code.
Die zweite Methode ist besonders nützlich für die Überprüfung von Websites, die Sie nicht besitzen oder verwalten. So können Entwickler und Websitebesitzer die korrekte Implementierung von Sicherheitsattributen für externe Links auf ihren Webseiten überprüfen.
Was ist rel="noreferrer"?
Das Attribut „rel=”noreferrer” dient als Datenschutzmechanismus in HTML-Links und verhindert die Übertragung von Referrer-Informationen, wenn Besucher von Ihrer Website zu einer anderen navigieren. Durch die Implementierung dieses HTML-Attributs wird Ihre Website in den Analysetools der Zielwebsite als Traffic-Quelle verborgen.
Wenn jemand auf einen Link auf Ihrer Website klickt, kann die Zielseite normalerweise Ihre Domain als Traffic-Quelle identifizieren. Mit dem Zusatz rel=”noreferrer” zu Ihrem Link wird diese Identifizierung blockiert. Anstatt als Referral-Traffic in Analyseplattformen wie Google Analytics zu erscheinen, werden diese Besucher als direkter Traffic registriert.
Das Attribut kann auf zwei Arten implementiert werden:
<a href="https://examplesite.com" target="_blank" rel="noreferrer">
Oder ohne Öffnen in einem neuen Tab:
<a href="https://examplesite.com" rel="noreferrer">
Diese versteckten Referrer-Informationen könnten die mysteriösen Spitzen im direkten Datenverkehr erklären, die einige Websitebesitzer in ihren Analysen bemerken.
Wann sollte rel=”noreferrer” für externe Links verwendet werden?
Es gibt mehrere strategische Gründe, das Attribut rel=”noreferrer” in Ihren ausgehenden Links zu implementieren:
- Wettbewerber-Links: Wenn Sie auf Konkurrenten verlinken und dabei Ihre Empfehlungsdaten privat
- Nicht vertrauenswürdige Websites: Wenn Sie auf Websites verlinken, denen Sie nicht vollständig vertrauen
- Datenschutzrechtliche Bedenken: Wenn Sie die Privatsphäre Ihrer Benutzer schützen möchten, indem Sie keine Informationen zur Traffic-Quelle weitergeben
Das Hinzufügen dieses Attributs ist unkompliziert: Fügen Sie einfach rel=”noreferrer” in Ihr Link-HTML ein, wie oben gezeigt. Wenn Sie externe Links bereits in neuen Tabs öffnen, erfordert die Einbindung dieses Codes nur minimalen zusätzlichen Aufwand.
Was ist rel="noopener"?
Das Attribut rel=”noopener” dient als wichtige Sicherheitsmaßnahme für Websites mit externen Links. Dieses HTML-Attribut schützt Ihre Website vor einem ausgeklügelten Angriffsvektor, der Benutzer über verlinkte Seiten angreift. Bei korrekter Implementierung verhindert es, dass bösartige Websites über die JavaScript-Eigenschaft window.opener auf Ihre Seite zugreifen.
Schützen Sie Ihre Site vor Reverse Tabnapping
Reverse Tabnapping stellt ein erhebliches Sicherheitsrisiko dar, das auftritt, wenn Links in neuen Tabs geöffnet werden. Ohne entsprechenden Schutz können Angreifer die Window.Opener-Beziehung ausnutzen, um Ihre ursprüngliche Seite auf eine betrügerische Website umzuleiten, die auf den Diebstahl von Informationen ausgelegt ist.
Dieser Angriff ist besonders gefährlich, da Benutzer häufig Seiten vertrauen, die sie bereits besucht haben. Wenn sie auf eine vermeintlich seriöse Website zurückkehren, geben sie möglicherweise unwissentlich vertrauliche Informationen an Angreifer weiter.
So funktioniert der Angriff:
- Der Benutzer klickt auf einen externen Link auf Ihrer Site, der in einem neuen Tab geöffnet wird
- Der Inhalt der neuen Registerkarte enthält Schadcode
- Dieser Code verwendet window.opener, um Ihre ursprüngliche Seite umzuleiten
- Wenn Benutzer zum ursprünglichen Tab zurückkehren, finden sie stattdessen eine Phishing-Site
Glücklicherweise wird diese Verbindung durch das Hinzufügen von rel=”noopener” zu externen Links unterbrochen, wodurch verhindert wird, dass die neue Seite Ihre ursprüngliche Seite manipuliert.
Wann sollte rel=”noopener” mit internen Links verwendet werden?
Für Links zu Seiten innerhalb Ihrer eigenen Domain ist rel=”noopener” im Allgemeinen nicht erforderlich. Interne Links stellen ein minimales Sicherheitsrisiko dar, da Sie sowohl die Quell- als auch die Zielseiten kontrollieren.
Wichtige Überlegungen:
- WordPress fügt automatisch rel=”noopener” zu externen Links hinzu, die in neuen Tabs geöffnet werden
- Auf Nicht-WordPress-Plattformen ist eine manuelle Implementierung erforderlich
- Das Attribut rel=”noreferrer” dient einem anderen Zweck und kann das Analytics-Tracking beeinflussen.
Denken Sie daran, dass interne Links diese Sicherheitsattribute nicht benötigen, da sie innerhalb Ihrer kontrollierten Umgebung navigieren. Konzentrieren Sie sich darauf, rel=”noopener” auf externe Links anzuwenden, insbesondere auf solche, die auf Websites verweisen, denen Sie nicht vollständig vertrauen oder die Sie nicht kontrollieren.
Verwenden von rel="noopener noreferrer" in WordPress
WordPress fügt externen Links automatisch Sicherheitsattribute hinzu, wenn Sie diese auf in neuem Tab öffnens. Dieses Verhalten schützt Ihre Website und sorgt gleichzeitig für ein gutes Benutzererlebnis. Wenn Besucher auf diese Links klicken, bleiben sie auf Ihrer Website, während der neue Inhalt separat geladen wird.
Der Codeunterschied ist signifikant. Ein standardmäßiger externer Link sieht folgendermaßen aus:
<a href="https://examplesite.com">Example Link</a>
Wenn Sie jedoch die Option „In neuem Tab öffnen“ aktivieren, ändert WordPress sie wie folgt:
<a href="https://examplesite.com" target="_blank" rel="noopener noreferrer">Example Link</a>
Das target="_blank" Anweisung öffnet die neue Registerkarte, während die rel Attribute bieten wichtige Sicherheitsvorteile. Sie können diese Attribute überprüfen, indem Sie das HTML aller externen Links auf Ihren veröffentlichten Seiten prüfen.
Können Sie es entfernen?
Das Entfernen dieser Attribute ist unkompliziert, wenn es Ihnen nichts ausmacht, wenn Links im selben Tab geöffnet werden. Deaktivieren Sie einfach die Option „In neuem Tab öffnen“ im WordPress-Editor. WordPress generiert dann einen Standardlink ohne die zusätzlichen Attribute.
Aber, Das Entfernen nur eines Teils des Codes, während die Links weiterhin in neuen Tabs geöffnet werden, ist schwieriger. WordPress fügt diese Attribute aus Sicherheitsgründen automatisch hinzu, ohne integrierten Umschalter.
Sie können versuchen, die noreferrer Teil über den Code-Editor, wodurch die Zielseite Ihre Website als Referrer in ihrer Analyse sehen kann. Der Prozess umfasst:
- Öffnen des WordPress-Code-Editors
- Lokalisieren des spezifischen Link-HTML
- Direktes Bearbeiten der Attribute
Das noopener Das Attribut ist jedoch viel schwieriger dauerhaft zu entfernen. Selbst nach dem manuellen Löschen fügt WordPress es normalerweise wieder hinzu, wenn Sie die Seite veröffentlichen oder aktualisieren. Diese Persistenz besteht, weil noopener bietet wichtigen Schutz vor potenziellen Sicherheitslücken.
In diesem Fall priorisiert WordPress die Sicherheit gegenüber einer vollständigen Anpassung.
Für diejenigen, die dieses Verhalten unbedingt ändern möchten, gibt es erweiterte Lösungen, die benutzerdefinierten Code in Ihrem Design oder spezielle Plug-Ins beinhalten. Dieser Ansatz wird den meisten Benutzern jedoch aus Sicherheitsgründen nicht empfohlen.
Die meisten Browser verfügen jetzt über einen automatischen Noopener-Schutz
Ab 2025 verfügen die meisten gängigen Webbrowser über einen automatischen „Noopener“-Schutz für externe Links, wodurch die manuelle Implementierung durch Entwickler reduziert wird. Diese Sicherheitsentwicklung begann 2018 mit Safari und setzte einen Präzedenzfall für andere Browser.
Firefox schloss sich dieser Sicherheitsinitiative im Juli 2020 an und fügte einen automatischen Schutz vor potenziellen Fenstermanipulationsangriffen hinzu. Die bedeutendste Veränderung erfolgte Anfang 2021, als alle Chromium-basierten Browser – darunter Chrome, Edge und Brave – diese Funktion in ihren Standard integrierten. Sicherheitsprotokolle.
Browser-Zeitleiste für automatischen Noopener:
- Safari: 2018
- Firefox: Juli 2020
- Chromium-Browser (Chrome, Edge, Brave): Anfang 2021
Dieser Schutz auf Browserebene schafft ein wichtiges Sicherheitsnetz und verhindert, dass bösartige Websites die Originalseite durch die window.opener Eigenschaft. Trotz dieser Fortschritte sollten Webentwickler weiterhin rel="noopener" manuell aus zwei Hauptgründen:
- Zum Schutz der Nutzer weniger verbreiteter Browser
- Zur Aufrechterhaltung umfassender Sicherheitspraktiken
Der kleine Prozentsatz der Internetnutzer, die alternative Browser verwenden, bleibt ohne expliziten Schutz in Ihrem Code angreifbar.
Reden wir über Erfolg 🏆
Rufen Sie uns noch heute unter 1800 840 999 an, um loszulegen.
in Bearbeitung...