rel=“noopener noreferrer“ – Warum diese zwei Wörter deine Website schützen | OIT GmbH

Kurz & knapp: Wenn du auf deiner Website Links zu anderen Seiten hast, die in einem neuen Tab öffnen (target="_blank"), solltest du IMMER rel="noopener noreferrer" hinzufügen. Warum? Das erklären wir jetzt – ganz ohne Fachchinesisch!

Das Hinzufügen von rel="noopener" ist entscheidend, da es dein Browsingverhalten schützt und die Sicherheit erhöht. Damit verhinderst du, dass externe Seiten dein Verhalten beeinflussen und sicherst deine Daten. Verwende immer rel noopener auf das browsingverhalten für optimale Sicherheit.

Das Problem: Links, die in einem neuen Tab öffnen

Stell dir vor, du hast auf deiner Website einen Link:

<a href="https://example.com" target="_blank">Klick mich</a>

Der Link öffnet in einem neuen Tab – super praktisch! Aber: Ohne die richtigen Sicherheitseinstellungen kann die andere Website jetzt auf DEINE Website zugreifen. 😱

Die zwei Sicherheitslücken

Problem 1: window.opener (Sicherheitslücke)

Was passiert ohne noopener?

Wenn jemand auf deinen Link klickt, bekommt die andere Website Zugriff auf ein JavaScript-Objekt namens window.opener. Damit kann diese fremde Seite:

❌ Deine Website im ursprünglichen Tab umleiten (z.B. auf eine Phishing-Seite)
❌ Informationen über deine Seite auslesen
❌ Im schlimmsten Fall: Schadcode ausführen

Beispiel-Angriff (vereinfacht):

// Die fremde Website kann das machen:
if (window.opener) {
    window.opener.location = 'https://boese-phishing-seite.com';
}

Ergebnis: Der Nutzer kehrt zu deiner Website zurück… aber sieht plötzlich eine gefälschte Login-Seite! 😨

Die Lösung: `rel="noopener"`

<a href="https://example.com" target="_blank" rel="noopener">Sicherer Link</a>

✅ noopener blockiert den Zugriff auf window.opener
✅ Die fremde Seite kann deine Website NICHT mehr manipulieren
✅ Deine Besucher sind geschützt

Problem 2: Referrer-Weitergabe (Datenschutz-Problem)

Was passiert ohne noreferrer?

Wenn jemand auf deinen Link klickt, sendet der Browser automatisch eine Info an die andere Website:

📍 Von welcher URLEin Uniform Resource Locator identifiziert und lokalisiert eine Ressource, beispielsweise eine Webseite, über die zu verwendende Zugriffsmethode und den Ort der Ressource in Computernetzwerken. mehr erfahren der Besucher kommt
📍 Welche Unterseite er besucht hat
📍 Manchmal sogar: URL-Parameter (z.B. Suchbegriffe, Session-IDs)

Beispiel:

Dein Besucher ist auf:
https://oit.digital/blog/geheimes-angebot?kunde=12345

Wenn er jetzt auf einen externen Link klickt, sieht die andere Website:

Referrer: https://oit.digital/blog/geheimes-angebot?kunde=12345

❌ Die fremde Seite weiß jetzt, dass jemand von deinem „geheimen Angebot“ kommt
❌ Die Kunden-ID wird weitergegeben
❌ DSGVO-Problem: Personenbezogene Daten werden ungewollt geteilt

Die Lösung: `rel="noreferrer"`

<a href="https://example.com" target="_blank" rel="noreferrer">Datenschutz-Link</a>

✅ noreferrer verhindert die Weitergabe der Referrer-Info
✅ Die fremde Seite sieht NICHT, von wo der Besucher kommt
✅ Besserer Datenschutz für deine Besucher
✅ DSGVO-konform

Die perfekte Lösung: Beide kombinieren!

<a href="https://example.com" 
   target="_blank" 
   rel="noopener noreferrer">
   Perfekt geschützter Link
</a>

✅ Sicherheit durch noopener
✅ Datenschutz durch noreferrer
✅ SEO-Bonus: Google sieht, dass du auf Sicherheit achtest

Praxis-Beispiele von oit.digital

❌ Vorher (unsicher):

<p>Hier geht es zur Zappelarena: 
   <a href="https://zappelarena.de/osnabrueck/">
      zappelarena.de
   </a>
</p>

✅ Nachher (sicher & optimiert):

<p>Hier geht es zur Zappelarena: 
   <a href="https://zappelarena.de/osnabrueck/" 
      target="_blank" 
      rel="noopener noreferrer"
      title="Besuchen Sie die Zappelarena Osnabrück">
      Zappelarena Osnabrück - Indoor-Spielplatz
   </a>
</p>

Was wurde verbessert?

✅ target="_blank" – öffnet in neuem Tab
✅ rel="noopener noreferrer" – schützt vor Angriffen
✅ title – hilft Screenreadern
✅ Beschreibender Linktext statt nackter URLEin Uniform Resource Locator identifiziert und lokalisiert eine Ressource, beispielsweise eine Webseite, über die zu verwendende Zugriffsmethode und den Ort der Ressource in Computernetzwerken. mehr erfahren (SEO SEO steht im deutschen für Suchmaschinenoptimierung und wird aus dem englischen abgeleitet: search engine optimization
Es geht bei SEO um die organische Optimierung des Rankings, nicht um bezahlte Werbung. mehr erfahren!)

Wie finde ich unsichere Links auf meiner Website?

Methode 1: Browser-Entwicklertools

Öffne deine Website
Drücke F12 (Entwicklertools)
Console öffnen
Folgenden Code eingeben:

// Alle Links finden, die target="_blank" haben, aber kein rel="noopener"
document.querySelectorAll('a[target="_blank"]:not([rel*="noopener"])')
    .forEach(link => console.log(link.href));

Methode 2: WordPress-Plugin

Für WordPress-Nutzer: Moderne WordPress-Versionen fügen noopener automatisch hinzu. Prüfe es mit dem Plugin „Link Checker“.

Methode 3: Screaming Frog SEO Spider

Profi-Tool für große Websites:

Screaming Frog herunterladen
Website crawlen
Filter: „External Links“ → „target=_blank“
Nach „rel“ Attribut sortieren

Browser-Unterstützung

Gute Nachrichten: Alle modernen Browser unterstützen rel="noopener noreferrer":

✅ Chrome 49+ (ab 2016)
✅ Firefox 52+ (ab 2017)
✅ Safari 12.2+ (ab 2019)
✅ Edge 79+ (ab 2020)
⚠️ Internet Explorer: Nicht unterstützt (aber: wer nutzt das noch?)

Häufige Fragen (FAQ)

Brauche ich das auch für interne Links?

Nein! Nur für externe Links (zu anderen Domains).

<!-- NICHT nötig: -->
<a href="/impressum" target="_blank">Impressum</a>

<!-- NÖTIG: -->
<a href="https://andere-website.de" target="_blank" rel="noopener noreferrer">
   Andere Website
</a>

Was ist mit nofollow?

nofollow ist etwas anderes:

noopener noreferrer = Sicherheit & Datenschutz
nofollow = SEO SEO steht im deutschen für Suchmaschinenoptimierung und wird aus dem englischen abgeleitet: search engine optimization
Es geht bei SEO um die organische Optimierung des Rankings, nicht um bezahlte Werbung. mehr erfahren (sagt Google: „Folge diesem Link nicht“)

Du kannst alle kombinieren:

<a href="https://example.com" 
   target="_blank" 
   rel="noopener noreferrer nofollow">
   Gesponserte Links
</a>

Macht das meine Website langsamer?

Nein! Im Gegenteil: noopener kann die Performance sogar verbessern, weil der neue Tab unabhängig läuft.

Kann ich noreferrer weglassen?

Technisch: Ja (Sicherheit ist durch noopener gewährleistet).
Aber: Für Datenschutz (DSGVO) solltest du noreferrer trotzdem nutzen!

Checkliste: Sichere Links auf deiner Website

✓ Link-Sicherheits-Checkliste

☐ Alle externen Links mit target="_blank" haben rel="noopener noreferrer"
☐ Linktext ist beschreibend (nicht „hier klicken“ oder nackte URLEin Uniform Resource Locator identifiziert und lokalisiert eine Ressource, beispielsweise eine Webseite, über die zu verwendende Zugriffsmethode und den Ort der Ressource in Computernetzwerken. mehr erfahren)
☐ title-Attribut für Barrierefreiheit hinzugefügt
☐ Interne Links funktionieren ohne Fehler
☐ Gesponserte/Werbe-Links haben zusätzlich nofollow
☐ HTTPS statt HTTP (wo möglich)

Zusammenfassung

Perfekter Link-Code (Copy & Paste)

<a href="https://externe-website.de" 
   target="_blank" 
   rel="noopener noreferrer"
   title="Beschreibung der Zielseite">
   Beschreibender Linktext
</a>

Brauchst du Hilfe bei der Umsetzung?

Die OIT GmbH aus Osnabrück hilft dir gerne dabei, deine Website sicher und DSGVO-konform zu machen:

✅ SEO-Audit: Wir finden alle unsicheren Links
✅ WordPress-Wartung: Automatische Überprüfung & Fix
✅ Security-Check: Komplette Website-Sicherheit

Attribut	Zweck	Schützt vor
`noopener`	Sicherheit	window.opener-Attacken
`noreferrer`	Datenschutz	Ungewollter Referrer-Weitergabe
`nofollow`	SEO SEO steht im deutschen für Suchmaschinenoptimierung und wird aus dem englischen abgeleitet: search engine optimization Es geht bei SEO um die organische Optimierung des Rankings, nicht um bezahlte Werbung. mehr erfahren	PageRank-Weitergabe

rel=“noopener noreferrer“ – Warum diese zwei Wörter deine Website schützen