Das Attribut: Rel Noopener

Das Attribut rel noopener ist eine wichtige Sicherheitsmaßnahme in der Webentwicklung. Es verhindert konkret, dass die Zielwebseite, die durch einen Link in einem neuen Tab geöffnet wird, Zugriff auf die ursprüngliche Webseite erhält. So können unerwünschte Änderungen oder Aktionen für den Nutzer verhindert werden.

Was ist rel="noopener" und wozu dient es?

Das Attribut "rel noopener" ist ein Sicherheitsmerkmal, das in vielen HTML-Links verwendet wird, um die Interaktion zwischen der aktuellen Webseite und einer anderen Seite, die sich in einem neuen Tab öffnet, zu durchbrechen. Wird einem Link "rel noopener" hinzugefügt, ist der Browser daran gehindert, auf das ursprüngliche Dokument zuzugreifen, welches den Link enthält, nachdem der Link geöffnet wurde. Besonders wichtig ist der Zusatz, da die Zielseite andernfalls Zugang zur window-opener-Eigenschaft der Ursprungsseite hätte. Hierdurch erhält sie über JavaScript Zugriff auf die Quelle und kann Manipulationen wie das Stehlen von Cookies durchführen.

Was ist der Unterschied zwischen rel="noopener" und rel="noreferrer"?

Wichtig: rel noopener wird häufig in Verbindung mit rel=noreferrer genutzt, da beide zusammen ein "Komplettpaket" für Datenschutz und Sicherheit bieten. Auch die Referrer-Informationen, also der Ursprung des Links, sind dann beim Öffnen des Links blockiert.

In welchen Szenarien sollte rel="noopener" verwendet werden?

Das Attribut rel noopener zu nutzen, macht in der Praxis Sinn, um die eigene Webseite bei der Verwendung von externen Verlinkungen (Trustlinks) zu schützen. Es schließt Sicherheitslücken und verhindert, dass Menschen mit bösen Absichten über JavaScript an sensible Informationen gelangen. Bei internen Verlinkungen macht es keinen Sinn, das Attribut hinzuzufügen, da innerhalb der gleichen URL navigiert wird. Anbei zwei sinnvolle Anwendungsgebiete für rel=noopener:

• Verlinkung auf soziale Netzwerke: Hier macht rel noopener Sinn, da Big-Tech-Konzerne ein Interesse daran haben, möglichst viele nutzerbezogene Daten zu sammeln. Das Setzen des Attributes verhindert, dass eine Webseite auf die Eigenschaften oder Informationen einer Seite zugreifen kann, welche auf sie verlinkt hat.
• E-Commerce-Webseiten mit externem Zahlungsdienstleister: Wenn ein Shop einen externen Zahlungsdienstleister wie Klarna oder PayPal verlinkt, sollte er rel noopener verwenden. Die Zahlungsseite hat dann garantiert keinen Zugriff auf das ursprüngliche Shop-Fenster, um Phishing oder andere schadhafte Interaktionen zu betreiben.

Tipp: Grundlegend kann rel noopener bei beinahe allen externen Links auf einer Seite genutzt werden, da sich das Attribut nicht negativ auf das Ranking und die Indexierung der Seite auswirkt. Das geht aus den Informationen von Google zu den Rankingfaktoren hervor.

Beispiel aus der Praxis

Stellen wir uns vor, Webseite A enthält einen Link, der auf die Webseite B führt. Wenn ein Nutzer nun auf diesen Link klickt, öffnet sich Webseite B in einem neuen Browsertab. Ohne das Attribut "rel noopener" hätte die Webseite B durch die window-opener-Eigenschaft Zugriff auf Webseite A. Webseite B könnte auf dieser jetzt beispielsweise JavaScript ausführen, das auf Webseite A zugreift und Informationen stiehlt oder schädliche Aktionen im Quellcode durchführt.

Das Linkattribut "rel noopener" kann also im Vorfeld von Webseite A eingefügt werden, um die Verbindung zwischen A und B zu unterbrechen. Die Webseite B hat keinen Zugriff auf die ursprüngliche Webseite, die den Link enthält. Dadurch wird die Webseite vor potenziellen Sicherheitslücken geschützt, die B ausnutzen könnte. Wichtig ist, dass die Quelle des Links, also Webseite A, dennoch sichtbar ist, lediglich können keine Änderungen vorgenommen werden.

Wichtig: rel noopener sollte nicht verwendet werden, wenn ein Link gewollt ist, der Zugriff auf das ursprüngliche Fenster oder den Tab haben soll. Zum Beispiel, weil die Zielseite interaktive Funktionen hat, die mit der Ursprungsseite kommunizieren müssen. Bei Webanwendungen oder eingebetteten Inhalten ist rel noopener also eher kontraproduktiv.

Welche Sicherheitsrisiken entstehen ohne rel="noopener" bei target="_blank"?

Wenn du target="_blank" ohne rel="noopener" verwendest, entsteht das „Window Opener“-Sicherheitsrisiko:

• Das neu geöffnete Tab erhält über window.opener vollen Zugriff auf das Originalfenster.
• Ein bösartiger Link könnte per JavaScript z. B.:
  • die Ursprungsseite manipulieren (z. B. Login-Formulare austauschen → Phishing),
  • die Seite umleiten (window.opener.location = 'https://fake-login.com'),
  • Informationen auslesen (z. B. URLs oder DOM-Inhalte),
  • Clickjacking oder UI-Redressing durchführen.

Dieses Angriffsszenario nennt man Tabnapping.

Vorteile für Nutzer durch noopener-Links

Auch die User Experience profitiert von rel noopener bei Links, denn durch die Verhinderung des Zugriffs bleiben persönliche Daten sicher und das ursprüngliche Fenster kann kein Ziel von Phishing-Angriffen oder schadhafter Manipulation werden. Dies schützt die Privatsphäre und die sensiblen Daten der User und verhindert potenziell gefährliche Interaktionen. Die Nutzererfahrung bleibt außerdem dauerhaft stabil, da die ursprüngliche Seite nicht durch die Aktionen der Zielseite beeinträchtigt wird.

noreferrer: Die Herkunft eines Links verschleiern

Das Attribut "rel=noreferrer" ist ein spezielles HTML-Element für Links, das die Herkunft des Besuchers verschleiert. Normalerweise kann der Betreiber einer verlinkten Website sehen, woher seine Besucher kommen. "rel=noreferrer" unterdrückt diese Information. Damit ist dieses Linkattribut eine beliebte und ideale Ergänzung für rel noopener, da durch die Kombination der beiden Attribute alle Sicherheitslücken geschlossen werden. In der Praxis gibt es kaum Gründe, dieses Attribut zu verwenden. Es wurde entwickelt, um in bestimmten Situationen die Privatsphäre zu schützen, aber konkrete Anwendungsfälle sind selten. Aus Sicht der Suchmaschinenoptimierung (SEO) sind beide Linkattribute unbedenklich, denn Suchmaschinen berücksichtigen sie nicht als Rankingfaktoren einer Webseite.

Die Verwendung von rel=noreferrer kann sogar kontraproduktiv sein, besonders im Bereich des Affiliate-Marketings. Dort ist es wichtig, dass die Herkunft der Besucher nachvollziehbar bleibt, um Provisionen korrekt zuzuordnen. Insgesamt ist "rel=noreferrer" ein Tool, das zwar existiert, aber in den meisten Fällen nicht benötigt wird. Es sollte mit Bedacht eingesetzt werden, da es den normalen Informationsfluss zwischen verlinkten Websites unterbricht, der für einen gesunden Traffic allerdings erforderlich ist.

Was ist der Unterschied zwischen rel=noopener und rel=nofollow?

Die beiden HTML-Attribute rel=nofollow und rel noopener haben unterschiedliche Anwendungsgebiete und Funktionen, obwohl sie beide im Linkbuilding angewendet werden. Um die Auswirkungen auf die eigene Webseite zu kennen, haben wir die wichtigsten Unterschiede kurz zusammengefasst.

rel=nofollow ist wichtig für die Suchmaschinenoptimierung (SEO), da es den Webcrawlern einer Suchmaschine signalisiert, dass ein Link nicht in die individuelle Ranking-Bewertung der Zielseite einfließen soll. Das Attribut wird in der Regel dann verwendet, wenn ein bezahlter Link, eine Werbung oder unnatürliche Verlinkungen das Suchmaschinenranking in den SERPs nicht beeinflussen sollen. Google fordert dies auch ein: Link, die bezahlte Werbung verlinken, sollen in "nofollow" gesetzt werden, um Manipulationen durch Verlinkungen zu vermeiden. Ein Dofollow-Link dagegen wird verwendet, wenn die Verlinkung in das Ranking einbezogen werden soll, also etwa bei Trustlinks.

rel noopener dagegen hat keinerlei Einfluss auf das Ranking einer Seite in den Suchergebnissen, es dient hauptsächlich als Sicherheitsmaßnahme, um zu verhindern, dass die Zielseite auf das ursprüngliche Fenster zugreift und schädliche Interaktionen vornimmt. Damit ist das Attribut ein wichtiger Schutz vor Phishing-Angriffen und Cross-Site-Scripting (XSS), ohne dass es dadurch die Position der Seite in den Suchergebnissen negativ beeinflusst.

Einfach gesagt: rel=nofollow beeinflusst die SEO, während rel=noopener Sicherheitsrisiken durch externe Links verhindert, ohne sich dabei auf die Suchmaschinenplatzierung auszuwirken.

Kombination von HTML-Attributen möglich

Es ist immer möglich, rel noopener mit anderen HTML-Attributen wie rel=noreferrer oder rel=nofollow zu kombinieren, um sowohl Sicherheits- als auch SEO-Ziele zu erreichen. Beispielsweise sorgt "rel noopener noreferrer" dafür, dass die Zielseite weder auf die Ursprungsseite zugreifen kann, noch Informationen über die Herkunft des Links erhält. Diese Kombination bietet eine hohe Sicherheit und ein hohes Maß an Datenschutz. Wenn du das Attribut nofollow vorne hinzufügst, wird der jeweilige Link zudem nicht im Ranking berücksichtigt.

Ist rel="noopener" auch für interne oder nur für externe Links relevant?

Auch interne Links können betroffen sein, obwohl das Risiko geringer ist.

💡 Warum trotzdem relevant:

• Angreifer können über XSS oder manipulierte interne Inhalte interne Links in Schadverhalten umleiten.
• In Organisationen mit Subdomains oder Multi-Tenant-Systemen kann ein interner Link zu einer anderen „potenziell gefährlichen“ Seite führen.

Best Practice: Immer rel="noopener" bei target="_blank setzen – unabhängig davon, ob intern oder extern.
Es ist kostenlos in der Umsetzung, hat keine Nebenwirkungen, aber erhöht sicherheitsrelevanten Schutz erheblich.

Implementierung und Fazit zu rel=noopener

Die Implementierung von rel noopener ist einfach und erfolgt nur durch das Hinzufügen des Attributs zu Links, die in einem neuen Tab oder Fenster geöffnet werden (externe Links). Das geht schnell und unkompliziert im Backend eines jeden Content-Management-Systems (CMS). In der Praxis sieht ein noopener-Link also wie folgt aus:

<a href="URL" target="_blank" rel="noopener">Link</a>

Das Attribut schützt vor Sicherheitslücken und kann in Kombination mit target=blank dazu beitragen, das Risiko von Phising und XSS zu minimieren. Zusammenfassend lässt sich so sagen, dass rel noopener eine wichtige Sicherheitsmaßnahme ist, die Nutzer vor potenziellen Bedrohungen schützt, ohne die SEO oder Funktionalität einer Webseite zu beeinträchtigen.

Weblinks

Allgemeines zum Datenschutz bei externen Links

Linkhaftung für Unternehmen

Barrierefreiheit in WordPress: Links hinzufügen

Dennis Benjak

Dennis Benjak

Dennis ist zertifizierter Online-Marketing Manager mit dem Schwerpunkt Suchmaschinenoptimierung. Seit 2018 hat er erfolgreich SEO-Projekte für unterschiedlichste Kunden aus dem DACH-Raum gemanagt. Neben seiner operativen Tätigkeit gibt er interne und externe Schulungen rund um SEO-Strategien und digitale Sichtbarkeit. Zudem war er maßgeblich am Aufbau einer Outreach-Plattform für Linkbuilding beteiligt und bringt fundiertes Praxiswissen in den Bereichen On- und Offpage-Optimierung mit.