In der Welt der Webentwicklung sind HTML-Links das Rückgrat der Navigation zwischen Webseiten. Doch selbst diese grundlegenden Elemente können Sicherheitsrisiken bergen. Hier kommt das rel=“noopener noreferrer“ Tag ins Spiel, das eine Schutzschicht für Ihre Website und deren Besucher bietet.

Was sind die Bestandteile dieses Tags?

Lassen Sie uns die zwei Komponenten dieses Tags aufschlüsseln:

  • noopener: Dieser Teil adressiert eine Sicherheitslücke, die entsteht, wenn Sie Links in neuen Tabs oder Fenstern mit dem Attribut target=“_blank“ öffnen. Eine bösartige Website, die auf diese Weise geöffnet wird, könnte teilweise die Kontrolle über das ursprüngliche Fenster (das, in dem Sie den Link angeklickt haben) erlangen. Das noopener-Attribut verhindert dies, indem es die Verbindung zwischen dem neu geöffneten Tab und der ursprünglichen Seite trennt.
  • noreferrer: Dieser Teil betrifft die Privatsphäre. Wenn Sie auf einen Link klicken, erhält die Zielwebsite normalerweise Informationen darüber, woher Sie gekommen sind (der Referrer). Das noreferrer-Attribut verbirgt diese Referrer-Informationen. Dies kann hilfreich sein, wenn Sie auf externe Seiten verlinken, die Sie möglicherweise nicht unbedingt unterstützen, und die Privatsphäre Ihrer Besucher schützen möchten.

Warum „noopener noreferrer“ verwenden?

  1. Sicherheit: Dieses Tag wird hauptsächlich verwendet, um die Sicherheit zu erhöhen. Indem verhindert wird, dass neu geöffnete Tabs oder Fenster die ursprüngliche Seite kontrollieren, schützen Sie Ihre Benutzer vor möglichen Exploits.
  2. Privatsphäre: Wenn Sie keine Referrer-Informationen an externe Websites weitergeben möchten, stellt das noreferrer-Attribut sicher, dass die Browserhistorie Ihrer Besucher etwas privater bleibt.
  3. Leistung (indirekt): Obwohl es keine direkte Auswirkung hat, kann noopener zu geringfügigen Leistungsverbesserungen führen. Ohne die Verbindung zur ursprünglichen Seite kann der neue Tab möglicherweise etwas schneller laden.

Wie verwendet man das Tag

Das Einfügen von rel=“noopener noreferrer“ in Ihre HTML-Links ist einfach:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example Website</a>

WordPress Hinweis: WordPress fügt dieses Tag automatisch zu allen Links hinzu, die Sie so einstellen, dass sie in einem neuen Tab oder Fenster geöffnet werden, und bietet so einen eingebauten Schutz.

Sollte ich es immer verwenden?

Obwohl es allgemein als gute Praxis gilt, rel=“noopener noreferrer“ bei externen Links zu verwenden, gibt es einige Ausnahmen:

  • Vertrauenswürdige Websites: Wenn Sie auf bekannte, vertrauenswürdige Websites verlinken, können Sie das Tag weglassen.
  • Interne Links: Es ist nicht notwendig, dieses Tag zu verwenden, wenn Sie auf Seiten innerhalb Ihrer eigenen Website verlinken.

Auswirkungen auf SEO

Die gute Nachricht ist, dass die Verwendung von rel=“noopener noreferrer“ keine direkten negativen Auswirkungen auf die Suchmaschinenoptimierung (SEO) Ihrer Website haben sollte. Das noreferrer-Element könnte jedoch die Verfolgung von Referral-Traffic in Analysetools erschweren, wenn Sie stark auf diese Daten angewiesen sind.

Das rel=“noopener noreferrer“ Tag mag wie ein kleines Detail erscheinen, spielt jedoch eine bedeutende Rolle in der Sicherheit und Privatsphäre von Websites. Indem Sie dieses Tag verstehen und einbauen, schaffen Sie ein sichereres und verantwortungsvolleres Online-Erlebnis.

Grundlagen des rel=“noopener noreferrer“ Tags verstehen

HTML-Links und das target=“_blank“ Attribut

Das Fundament der Webnavigation liegt im einfachen HTML-Link, oft dargestellt durch das Tag. Lassen Sie uns das aufschlüsseln:

  • Die Grundstruktur: <a href=“https://www.examplewebsite.com“>Klicken Sie hier für Beispiel-Website<>
  • href gibt das Ziel des Links an
  • Der Text zwischen den öffnenden <a> und schließenden </a> Tags ist das, was der Benutzer sieht und anklickt.
  • Die Magie von target=“_blank“: Dieses Attribut weist den Browser an, den Link in einem neuen Tab oder Fenster zu öffnen, was eine reibungslosere Benutzererfahrung bietet, wenn Sie Besucher auf Ihrer Seite halten möchten, während sie zusätzliche Ressourcen erkunden.

Potenzielle Sicherheitslücken

Obwohl praktisch, kann das target=“_blank“ Attribut, wenn es ohne Schutzmaßnahmen verwendet wird, unbeabsichtigt eine Gelegenheit für böswillige Akteure eröffnen. Hier ist der Grund:

Die window.opener Eigenschaft: In einem normalen Szenario haben Websites nur begrenzten Zugriff auf andere Tabs oder Fenster, die Sie geöffnet haben. Wenn jedoch ein neuer Tab mit target=“_blank“ geöffnet wird, wird eine spezielle JavaScript-Eigenschaft namens window.opener erstellt, die eine Verbindung zum ursprünglichen Tab oder Fenster herstellt.

Die Risiken der Manipulation: Sollte eine bösartige Website Zugriff auf window.opener erhalten, könnte sie:

  • Das ursprüngliche Tab auf eine schädliche Website umleiten (Phishing, Malware-Verteilung usw.)
  • Unerwünschte Inhalte oder Werbung in Ihre Website einfügen
  • Täuschende Pop-ups oder Overlays starten, um Besucher zu täuschen
  • Eine Klasse von Angriffen namens „Tabnabbing“ ausnutzen

Referrer-Informationen und Analytik

Jedes Mal, wenn Sie auf einen Link klicken, um von einer Website zu einer anderen zu navigieren, sendet Ihr Browser normalerweise ein wenig Information, die als „Referrer“ bekannt ist. Dies teilt der Zielwebsite mit, woher Sie gekommen sind. Hier ist der Grund, warum das wichtig ist:

Besucher-Traffic verstehen: Referrer-Daten sind für die Website-Analytik von unschätzbarem Wert. Sie helfen Ihnen:

  • Zu sehen, welche Websites und Backlinks Besucher zu Ihnen schicken.
  • Den Erfolg von Marketingkampagnen zu verfolgen.
  • Zu verstehen, wie Menschen durch Ihre Website navigieren.

Potenzielle Datenschutzüberlegungen: Während sie für Analysen nützlich sind, können Referrer-Informationen in bestimmten Situationen auch Datenschutzbedenken aufwerfen:

  • Empfindliche Websites (z.B. Gesundheitswesen, Finanzen) möchten möglicherweise nicht, dass die Referrer-URL offen übertragbar ist.
  • Benutzer, die sich Sorgen machen, dass ihr Browserverlauf nachverfolgt wird, möchten möglicherweise die Daten, die Websites über sie erhalten, einschränken.

Mit einer Grundlage in HTML-Links, potenziellen Schwachstellen und Referrer-Informationen sind wir bereit zu erkunden, wie „noopener“ und „noreferrer“ helfen, diese Risiken zu mindern.

Wie „noopener“ und „noreferrer“ funktionieren

Das „noopener“-Tag

  • Die Kernfunktion: Das „noopener“-Tag trennt die JavaScript-Verbindung (hergestellt durch window.opener) zwischen dem neuen Tab/Fenster und der ursprünglichen Website. Dies ist eine wichtige Sicherheitsmaßnahme.
  • Verhinderung von Tab-Manipulation: Durch die Verwendung von „noopener“ sagen Sie dem Browser im Wesentlichen: „Gib der neuen Website keine Möglichkeit, mit dem ursprünglichen Tab zu manipulieren.“ Dies stellt sicher, dass Ihre Besucher nicht unerwartet umgeleitet werden oder Inhalte auf Ihrer Website geändert werden.
  • Code-Beispiel:
<a href="https://externalsite.com" target="_blank" rel="noopener">Visit External Site</a>
  • Vorteile über die Sicherheit hinaus: „noopener“ kann auch subtil die Website-Performance verbessern. Durch das Blockieren dieser potenziellen Kontrolle weiß der Browser, dass er nicht so viele Ressourcen für die Überwachung der Interaktionen zwischen den Tabs aufwenden muss.

Das „noreferrer“-Tag

Kontrolle der Referrer-Informationen: Das „noreferrer“-Tag weist den Browser an, die Referrer-Informationen zurückzuhalten, wenn ein Benutzer auf den Link klickt. Dies wirkt sich auf das Website-Analyse-Tracking aus.

Datenschutz und Anwendungsfälle: Hier sind einige Situationen, in denen Sie „noreferrer“ verwenden könnten:

  • Verlinkung zu sensiblen Websites, bei denen Anonymität wichtig ist.
  • Partnerschaft mit Websites, bei denen Sie die Herkunftsdetails des Traffics privat halten möchten.
  • Priorisierung des Datenschutzes der Benutzer über eine detaillierte Verkehrsanalyse

Code-Beispiel

Externe Seite besuchen

Kombination der Tags

Für maximalen Schutz und Flexibilität ist es gängige Praxis, „noopener“ und „noreferrer“ zusammen zu kombinieren:

Maximierung der Sicherheit: Dieser Ansatz adressiert sowohl das Risiko der Tab-Manipulation als auch potenzielle Datenschutz- oder Analysebedenken in einem einzigen Schritt.

Code-Beispiel

<a href="https://externalsite.com" target="_blank" rel="noopener noreferrer">Visit External Site</a>

WordPress, Elementor und „noopener noreferrer“

Standardverhalten von WordPress

WordPress, bekannt für sein Engagement für Sicherheit, nimmt eine proaktive Haltung zu den „noopener noreferrer“-Tags ein. Hier ist, was Sie wissen müssen:

  • Automatische Einfügung: Seit WordPress-Version 5.1 wird „noopener noreferrer“ automatisch zu allen Links hinzugefügt, die in einem neuen Tab oder Fenster geöffnet werden sollen. Dies stellt sicher, dass auch Website-Besitzer ohne tiefgehende technische Kenntnisse vor häufigen Schwachstellen geschützt sind.

Elementor-Link-Einstellungen

Elementor, der führende WordPress-Website-Builder, bietet intuitive visuelle Steuerungen zur Vereinfachung der Linkverwaltung, einschließlich der Option, Links in neuen Tabs zu öffnen:

  • Benutzerfreundlichkeit: Innerhalb des Elementor-Editors, wenn Sie die Option „In neuem Tab öffnen“ für einen beliebigen Link (Buttons, Text, Bilder) aktivieren, fügt Elementor automatisch „noopener noreferrer“ im Hintergrund ein.
  • Benutzerfreundliche Sicherheit: Diese Integration ermöglicht es Elementor-Benutzern, ein sichereres und benutzerfreundlicheres Web-Erlebnis zu schaffen, ohne HTML-Code manuell bearbeiten zu müssen.

SEO-Überlegungen und Best Practices

„nofollow“ vs. „noreferrer“

Während beide Tags Links beeinflussen, ist es wichtig zu bedenken, dass sie unterschiedliche Zwecke erfüllen:

„nofollow“ (rel=“nofollow“): Dieses Tag weist Suchmaschinen hauptsächlich an, dem Link nicht zu folgen oder „Link Juice“ (Ranking-Power) an die Zielwebsite weiterzugeben. Es wird oft verwendet für:

  • Bezahlte Links oder gesponserte Inhalte
  • Unzuverlässige Websites oder nutzergenerierte Kommentare

„noreferrer“: Konzentriert sich auf Sicherheit, dieses Tag verbirgt Referrer-Informationen zum Schutz der Privatsphäre und der Benutzer vor Exploits.

Auswirkungen auf den Referral-Traffic

Das Verständnis, wie „noreferrer“ Analysen beeinflussen kann, ist der Schlüssel zur Aufrechterhaltung genauer Einblicke in Ihren Website-Traffic:

Traffic-Zuordnung: Da „noreferrer“ die Quell-Website verschleiert, können diese Besuche in Analyseplattformen wie Google Analytics als „Direkt-Traffic“ erscheinen, was es schwieriger macht, zu verfolgen, woher die Klicks stammen.

Lösungen und Workarounds:

  • UTM-Parameter: Sorgfältig gestaltete Links mit UTM-Codes helfen, Tracking-Details auch bei Verwendung von „noreferrer“ zu bewahren.
  • Erweiterte Analyseplattformen: Einige Lösungen können bekannte Referrer-Quellen automatisch erkennen.

Balance zwischen Sicherheit und Funktionalität

Der Schlüssel ist, fundierte Entscheidungen darüber zu treffen, wann Sicherheit über eine detaillierte Traffic-Zuordnung priorisiert werden sollte:

  • Sicherheit priorisieren: Verwenden Sie immer „noopener noreferrer“ bei externen Links, um Ihre Besucher und den Ruf Ihrer Website zu schützen.
  • Strategische Verwendung von „noreferrer“: Wenn granulare Referrer-Daten für bestimmte Links unverzichtbar sind (z.B. detailliertes Kampagnen-Tracking), wägen Sie die potenziellen Risiken ab, bevor Sie das „noreferrer“-Tag entfernen.
  • Interne Links: Da Sie Ihre eigene Website kontrollieren, benötigen Sie normalerweise keine „noopener noreferrer“-Tags für interne Links aus Sicherheitsgründen.

Wann „noopener noreferrer“ verwenden

Externe Links

  • Die goldene Regel: Als bewährte Sicherheitsmaßnahme sollten Sie immer „noopener noreferrer“ auf alle Links anwenden, die zu Websites führen, die Sie nicht besitzen oder kontrollieren. Dies gilt für Links in Ihren Blogbeiträgen, Seitenleisten, Navigation usw.
  • Warum es wichtig ist: Sie können die Sicherheitspraktiken oder Absichten jeder externen Website nicht garantieren. Proaktiver Schutz minimiert das Risiko, dass Ihre Website und Besucher aufgrund von Schwachstellen, die Sie nicht beeinflussen können, kompromittiert werden.

Affiliate-Links

Sicherheit und Analytik: Affiliate-Links, die für Monetarisierungsstrategien notwendig sind, erfordern besondere Aufmerksamkeit:

  • Sicherheit: Schützen Sie sich und Ihre Besucher vor potenzieller Manipulation durch Affiliate-Partner.
  • Verfolgung: Verwenden Sie UTM-Parameter zusammen mit „noreferrer“, um Kampagnendetails zu verfolgen und gleichzeitig die Sicherheit zu priorisieren.

Benutzergenerierte Inhalte

  • Die Bedeutung der Wachsamkeit: Wenn Ihre Website Kommentare, Foren oder jede Form von nutzergenerierten Inhalten zulässt, die Links enthalten, können böswillige Akteure schädliche Links einfügen.
  • Automatischer Schutz: Viele Website-Plattformen können automatisch „noopener noreferrer“ zu nutzergenerierten Links hinzufügen. Überprüfen Sie Ihre Einstellungen und verwenden Sie bei Bedarf Plugins, um diese Sicherheitsebene durchzusetzen.

Nicht vertrauenswürdige Websites

  • Mit Vorsicht vorgehen: Wenn Sie auf eine Website verlinken, bei der Sie sich unsicher sind, selbst wenn es zu Informations-/Vergleichszwecken ist, bietet „noopener noreferrer“ eine zusätzliche Sicherheitsebene.
  • Priorisierung des Rufs Ihrer Website: Der Schutz Ihrer Besucher vor potenziellen Gefahren stärkt das Vertrauen, das sie in Ihre Website haben.

Über „noopener noreferrer“ hinaus

Zusätzliche sicherheitsbezogene Link-Attribute

Während „noopener noreferrer“ die Stars der Link-Sicherheit sind, lohnt es sich, andere Attribute für spezifische Anwendungsfälle zu beachten:

  • rel=“ugc“ Für nutzergenerierte Inhaltslinks signalisiert dieses Tag Suchmaschinen, dass Sie den verlinkten Inhalt nicht unbedingt befürworten.
  • rel=“sponsored“. Es wird für bezahlte oder gesponserte Links verwendet, um Transparenz sowohl für Benutzer als auch für Suchmaschinen zu gewährleisten.

Fazit

In der vernetzten Weblandschaft befähigt Sie das Verständnis scheinbar einfacher Konzepte wie „noopener noreferrer“, eine sicherere und optimierte Online-Erfahrung zu schaffen. Durch die Priorisierung verantwortungsvoller Verlinkungspraktiken schützen Sie Ihre Website, deren Besucher und Ihren Online-Ruf.