Was ist noopener?
noopener ist ein Wert fuer das rel-Attribut von HTML-Links. Es veraendert, was passiert, wenn ein Nutzer einen Link oeffnet, der in einem neuen Tab erscheint.
Wenn Sie <a href="..." target="_blank"> schreiben, erhaelt die Zielseite ueber window.opener einen Rueckverweis auf die Seite, die sie geoeffnet hat. rel="noopener" entfernt diesen Rueckverweis, sodass die neue Seite nicht in den Ausgangstab zurueckgreifen kann.
Warum es wichtig ist
Tabnabbing. Ohne noopener kann die Zielseite per JavaScript window.opener.location = "https://phishing.example/" ausfuehren und Ihren Ausgangstab heimlich auf eine gefaelschte Login-Seite umleiten. Der Nutzer klickt einen Link, wechselt den Tab, kommt zurueck und sieht etwas, das aussieht wie die urspruengliche Seite und nach einem erneuten Login fragt. Das ist ein realer Angriff, und die Loesung ist ein einziges Attribut.
Performance. Mit noopener kann der neue Tab in einem eigenen Prozess laufen. Ohne noopener teilen sich beide Tabs einen Prozess, und ein aufwendiges Script im neuen Tab kann Ihre Seite blockieren. Auf aelteren oder schwaecheren Geraeten ist der Unterschied spuerbar.
Default in modernen Browsern. Seit 2021 behandeln Chrome, Firefox und Safari target="_blank" automatisch so, als waere noopener gesetzt. Den Sicherheitsteil bekommen Sie also ohnehin geschenkt. Trotzdem sollten Sie das Attribut explizit setzen:
- Aeltere Browser und eingebettete WebViews wenden den Default nicht zuverlaessig an
- Statische Code-Pruefungen (ESLint-Plugins, Accessibility-Linter) bemaengeln das Fehlen
- Es macht die Absicht fuer den naechsten Leser des HTML klar
Wie es in der Praxis funktioniert
<a href="https://example.com/" target="_blank" rel="noopener">
Beispiel
</a>
Die Zielseite sieht jetzt window.opener === null und kann den Ausgangstab nicht manipulieren.
noopener wird haeufig zusammen mit noreferrer als rel="noopener noreferrer" gesetzt. Die beiden loesen unterschiedliche Probleme: noopener blockiert den Zugriff auf window.opener, noreferrer entfernt zusaetzlich den Referer-Header. noreferrer impliziert in modernen Browsern bereits noopener, aber beide gemeinsam zu schreiben ist Konvention - die Absicht steht dann sichtbar im Markup und das Verhalten bleibt in aelteren Browsern und eingebetteten WebViews korrekt.
Haeufige Fehler:
noopeneran dynamisch per JavaScript erzeugtentarget="_blank"-Links vergessen (das statische Markup ist sauber, die JS-eingefuegten Links nicht)rel="opener"verwenden (das hebt den Default wieder auf und ist fast immer falsch)noopeneran interne Same-Origin-Links setzen, wo es keinen Sicherheitsnutzen hat und nur Rauschen ist
So handhabt webentity das
In einer webentity-Codebase wird jeder target="_blank"-Link mit rel="noopener noreferrer" ausgeliefert. Die Konvention gilt ueberall - Navigation, Footer, Vergleichstabellen, Case Studies, Audit Reports - sodass ein fehlendes rel-Attribut im Review sofort auffaellt und es nie in Produktion schafft.
Das Ergebnis: keine Tabnabbing-Flaeche, die spaeter aufgeraeumt werden muss, und kein nachgelagerter Security-Scan-Befund aus einem automatisierten Audit.