rel="noopener"
Wie jedes Jahr nutzte ich auch den heurigen Jahreswechsel als Anlass meine Websites bezüglich Verbesserungen durchzusehen. Bei dieser Gelegenheit bin ich auf ein interessantes Sicherheitselement gestoßen: rel="noopener".
Aber von Anfang an: Ich habe ein neues Projekt dazu benutzt, die schon lange fällige Umstellung von http auf https vorzunehmen. Dadurch hat sich meine routinemäßige, jährliche Fragestellung diesmal so formuliert:
- Sind wirklich alle Links von http auf https geändert?
- Ist die Umleitung von http auf https in der .htaccess-Datei eingetragen?
- Was lässt sich an der Website zusätzlich optimieren?
- Kann ich auf einfache Weise die Geschwindigkeit erhöhen?
- Wo sind augenfällige Sicherheitslücken?
- Gibt es veraltete Code-Elemente?
Nach der Erledigung aller Angelegenheiten die mit https zu tun haben, begann ich mit der geplanten Geschwindigkeitsoptimierung. Bei den ersten Tests, die ich mit Lighthouse durchführte um Hinweise auf Performancepotential zu bekommen, erhielt ich den Hinweis, dass rel="noopener" nicht vorhanden wäre.
Und schon stellte sich mir die Frage: Was ist das? Also habe ich die von Lighthouse angebotene Hilfe befragt. Sofort war mein Interresse geweckt und ich beschloss mich damit etwas näher zu bechäftigen. Die gute alte Tante Google wurde zu Rate gezogen und lieferte zahlreiche informative Resultate.
Die meisten Websites sind sehr leicht verwundbar
Bin ich bis dahin blind für die einfachsten Sicherheitsaspekte durchs Web-Leben gewandert? Nach kurzer Recherche habe ich festgestellt, dass ich nicht schlimmer oder besser bin als der Großteil, was aber nichts entschuldigt.
Aber wer denkt schon, dass ein Link, der auf eine andere Website verweist, ein Sicherheitsrisiko sein kann. Ja, jetzt mögen mich viele steinigen und sagen, dass das bereits alles kalter Kaffee und doch schon lange bekannt sei. So wie an mir, ist es aber scheinbar auch bis dato an vielen anderen einfach vorbei gegangen. Deshalb versuche ich nun dieses wirklich leicht zu behebende Sicherheitslücke weiter bekannt zu machen. Wer möchte schon, dass die von einem liebevoll gemachte Website zum Sicherheitsrisiko für Besucher wird.
target="_blank" als Gefahrenquelle
Man glaubt es kaum, aber das simple target="_blank" kann gefärlich sein. Warum kann das Öffnen eines externen Links in einem neuen Tab oder Fenster zum Sicherheitsproblem werden? Jetzt kommt wieder die alte Streitfrage der beiden Lager, ob man den Seitenfluss durch das Öffnen neuer Tabs unterbrechen darf. Aber darum geht es hier gar nicht. Vielmehr ist die Tatsache gemeint, dass beim Öffnen eines neuen Tabs oder Fensters sehr leicht Code eingeschleust oder gar ausgeführt werden kann.
Durch das Öffnen eines neuen Fensters oder Tabs wird vom Browser der Befehl window.opener ausgeführt. Zu diesem Zeitpunkt erhält das neue Fenster Zugriff auf das Quellfenster. Und genau hier kann ganz einfach mit dem JavaScript-Befehl window.open.location = newURL die Zielanfrage umgeleitet und sogar der bestehende Fensterinhalt geändert werden.
Beseitigen der Sicherheitslücke
Diese Sicherheitslücke kann aber sehr leicht geschlossen werden.
Nur wenn target="_blank" alleine steht, kann es zur Gefahrenquelle werden. Setzt man nun ein einfaches rel="noopener" hinzu, entschärft man diese Gefahr. Der geschützte Link sieht nun folgendermaßen aus:
<a href="https://andereseite.com" target="_blank" rel="noopener">…</a>Mit dieser Ergänzung ist target="_blank" nicht mehr „böse“.
Das war’s! So einfach sichert man seine ausgehenden Links ab.
Wie setzt man das jetzt in die Praxis um?
Bei statischen Websites lässt sich das schnell und einfach auch im Nachhinein bewerkstelligen:
Man nimmt einfach seinen Lieblingstexteditor, sucht alle ausgehenden Links die target="_blank" enthalten und fügt dort rel="noopener" hinzu. Noch einfacher und schneller geht es natürlich mit dem Befehl „suchen und ersetzen durch …“.
Bei CMS-Systemen wird das schon ein bisschen diffiziler. Da gibt es die Möglichkeit mit JavaScript oder php einzugreifen. Außerdem sollte man dabei auch sichergehen, dass alle künftigen Links mit rel="noopener" versehen werden. Beim oft umfangreichen WordPress, um nur das häufigste System zu nennen, kann man sich auch die Arbeit von einem Plugin wie Add Target Fixer abnehmen lassen. Es ergänzt automatisch alle zutreffenden Links mit dem Zusatz. Das macht sich vor allem dann besonders bezahlt, wenn man auch eine Kommentarfunktion nutzt.
Weiterführende Links
Eine wirklich anschauliche Erklärung wie window.open missbraucht werden kann ist bei Mathias Bynens Github-Seite zu finden. Weiters erklärt MDN im Kapitel Link types die Funktionsweise von rel="noopener".
Update
5.11.2017: Für alle Nutzer von WordPress hat sich seit der Erstellung dieses Beitrages einiges geändert: seit Version 4.7.4, die Ende April 2017 erschienen ist, fügt WordPress automatisch das Attribut rel="noopener" zu Links die mit target="_blank" versehen sind hinzu. Die Sicherheit wurde somit erhöht und man kann, soweit es verwendet wurde, ein somit nutzlos gewordenes Plugin deinstallieren.
Wer allerdings eine statische Website betreibt, sollte weiterhin nicht vergessen rel="noopener" händisch einzufügen.
Vielen Dank für den tollen und hilfreichen Leitfaden zu diesem Thema, er ist großartig und ich habe diesen Artikel wirklich genossen!
Toller und hilfreicher Artikel, vielen Dank für die Tipps!
Grüße, Julia
Things have changed by now, luckily 🙂
Check out Mathias 2021 update: https://mathiasbynens.github.io/rel-noopener/
Greez
Danke für den Artikel!
Es gibt aber noch weitere Attribute "preload", "prerender", "preconnect", "dns-prefetch", die Inhalte von externen Links/Domains pro-aktiv aufrufen und cachen. Gibt es quasi Anti-Attribute, die das Gegenteil bewirken?
Bei den gesuchten Antworten handelt es sich nicht um Absicherungen bei der Website-Erstellung. Das ist eine ganz andere Baustelle. Die Frage betrifft eher Maßnahmen im Browser: es ist beispielsweise möglich prefetch im Browser manuell zu deaktivieren.
Hey!
Sehr interessanter Beitrag! Ich habe solche Links durch Zufall gesehen und wusste nichts damit anzufangen. Du hast vermutlich recht, die meisten kennen dieses Attribut nicht und wissen nichts über diese Sicherheitslücke. Danke! 🙂
Viele Grüße
LH
Vielen Dank für den Post sehr hilfreich! Ich habe allerdings noch nicht ganz verstanden, inwieweit das Target Blank Attribut ohne "noopener"-Attribut zu einem Sicherheitsrisiko werden kann. Wie würde so etwas denn in der Praxis aussehen? Damit das Target Blank gefährlich wird, müsste die Seite doch zunächst gehackt werden oder nicht?
Bitte sei mir nicht böse, aber ich werde das hier nicht nochmals erklären, da es Teil meines Artikels ist. Bitte lies Dir den Text nochmals durch – Gegen Ende meines Artikels findest Du einen Link zu Mathias Bynens Seite – das ist meiner Meinung nach die beste und anschaulichste Erklärung.
wie sieht denn dies bei Affiliate-Geschichten aus? z.B. Amazon? Wird ein noopener Link richtig getrackt?
kann ich denn in WordPress auch für einzelne Links, noopener entfernen?
vielen Dank
Jürgen
1) Das hat mit Affiliate-Links und Tracking nichts zu tun.
2)
noopenerließe sich nur händisch wieder entfernen, außer Du schreibst Dir ein Script dafür. Aber ernsthaft, macht diese Idee für Dich wirklich Sinn? 🙂Hallo Christoph,
du hast einen sehr guten Artikel geschrieben. Ich mir dennoch nicht im Klaren, ob ich noopener wirklich immer brauche. Wenn ich es richtig sehe, geschieht nur dann etwas Unerwünschtes bei der Verwendung von target="_blank", wenn die aufgerufene Seite entsprechende Dinge vorgesehen hat. Wenn ich also eine Seite aufrufe, bei der ich sicher bin, dass sie derartiges nicht tut, weil es zum Beispiel eine eigene Seite von mir ist, besteht doch keinerlei Gefahr. Oder habe ich etwas übersehen?
Liebe Grüße
Richtig, Peter, Du hast nichts übersehen. Bei links innerhalb der eigenen Seite wirst Du das Attribut
rel="noopener"nicht brauchen. Es geht dabei um Ziele (Seiten) von denen Du nicht hundertprozentig sicher bist ob sie beim Öffnen in einem neuen Fenster oder Tab safe sind. Außerdem wirst Du innerhalb der eigenen Website wahrscheinlich nicht mittarget="_blank"verlinken, da nur dabei umgeleitet werden kann.Vielen Dank für den Blogpost. Immer wenn ich die genaue Syntax brauche führt mich Google zuverlässig hierher. Zu recht, wie ich finde. Viele Grüße!
Super erklärt, vielen Dank.
Allerdings kommt mir da gleich eine neue Frage auf den Schirm....sollte man generell vermeiden, daß sich Links in einem neuen Fenster öffnen?
Bisher habe ich immer darauf geachtet dass sie es tun, weil ich die Leser nicht von meiner Seite wegschicken wollte.
Also jetzt alle umstellen??
Gilt das auch für interne Links?
Lg
Ob man Links in einem neuen Fenster oder Tab öffnet ist reine Geschmackssache. Ich bevorzuge ausgehende Links in einem neuen Fenster/Tab zu öffnen – aber das ist einfach eine Vorliebe, die vom eigenen Surfverhalten kommt. Aber das sollte jeder für sich entscheiden.
Das Attribut
rel="noopener"macht nur für externe Links Sinn, da man von denen nicht weiß ob sie kompromitiert sind.Vielen Danke für die wirklich sehr gute Beschreibung!
Das [target="_blank"] halte ich im Grunde auch nur in sehr seltenen Fällen für sinnvoll und die Erweiterung mit [rel="noopener"] ist wenigstens kurz und bündig. Da unsere Homepage auch gerade überarbeitet wird, hat mir dies für die ToDo Liste weitergeholfen. Vielen Dank für die gute arbeit!
Hallo,
Wie sieht es dann in neuen Tab mit Google Analytics aus? Ich möchte ja das dieser Code ausgeführt wird damit ich sehen kann wie viele Besucher es auf meiner Homepage gibt oder muss ich mir da keine sorgen machen?
LG, J Herbrich
Da brauchst Du Dir keien Sorgen machen. Das Attribut
rel="noopener"beeinträchtigt die Zählung in keiner Weise. Es verhindert nur, dass beim Öffnen eines neuen Tabs oder Fensters die Besucher auf eine andere Seite als von Dir angegeben, umgeleitet werden können.Ahso ok, also in Grunde genommen blockiert es windowsd.location oder wie?
LG, J Herbrich
Ja, rel=“noopener” verhindert
windows.opener.locationund damit die Umleitung auf eine andere Seite als angegeben.Habe auch erst vor kurzem davon gehört, obwohl ich mich schon lange mit Webdesign beschäftige.
Deshalb, danke für die guten Tipps und die einfache und tolle Erläuterung.
Immer was Neues. Bin über die Suche: rel nofollow noopener
auf deine Seite gekommen. Ich gebrauche target="_blank" zwar nicht mehr, denn das soll der Leser selbst entscheiden dürfen, aber früher hatte ich es auch mal drin.
Danke für die Info.
Man lernt nie aus!
Vielen Dank, werde dies bei mir auf jeden Fall auch demnächst einbauen ...
Das ist ja mal ein informativer, sorgfältig mit Liebe zum Detail geschriebener Artikel. Vielen Dank!
Danke für die kompakte Zusammenfassung des Themas. Eine Frage ist für mich aber offen geblieben: Wie verhält sich das dann mit Affiliates/Pingbacks? Wenn ich auf ein anderes Blog oder eine andere Seite verlinke will ich im Zweifel dort im Tracking auftauchen. Müsste das davon nicht unterbunden werden?
Meines Wissens hat das bei noopener keinen Einfluss. Allerdings tritt bei nofollow, das oft gemeinsam verwendet wird, dieser Nebeneffekt auf.
Hallo Chirstoph,
Ich ware gerade dabei meine Backlinks zu checken und hierbei bin ich auf meiner Seite auf solch einen Tag (rel="noopener") gestoßen. Vorweg, target="_blank" nutze ich generell nicht, da ich es in Bezug auf die User Experience für überflüssig halte. Wenn der User ein neuen Tab öffnen will, tut er das. Trotzdem war dein Blog das erste Suchresultat und deine Inhalte waren es Wert bis zu ende gelesen zu werden.
Danke für die Erleuchtung
LG Armin
PS. der Tipp mit ersetzen war genial. So ging es soo schnell, mit brackets mit einem Klick für alle html dokumente und fertig. ((-;
Danke dir! Ich bin heute bei einem fremden Quellcode auf diesese Attribut gestoßen und wusste nicht, was es bedeutet. Bei google gesucht und auf dich gestoßen. (-; vielen Dank!
viel Text um ne Kleinigkeit. Aber trotzdem danke 😉
Danke für die Ausführliche Erläuterung
Danke, das kam direkt auf die Todo für meinen Blog! 🙂
Super erklärt, hatte gerade selber überlegt einen Beitrag über das Thema zu schreiben aber nach dem ich den Beitrag gelesen habe ist das wohl nicht mehr nötig. Super und TOP ausführlich.
Danke für die kürze der erläuterung.
Vielen Dank für die Beschreibung!
Das kannte ich bisher noch nicht bin dem jetzt aber grad begegnet.
Super Erklärung, ich sehe diesen rel nämlich sehr oft im Moment da ich sehr sehr viel auf Vimeo unterwegs bin und die nutzen das auch immer.
Nun weiß ich was es ist und werde es auch in meine Website umsetzen, schadet ja nicht den Linkjuice o.ä
Danke,
Philip
Vielen Dank für diese ausführliche Erklärung. Ich war gerade fast schon am verzweifeln, weil ich das rel=noopener Attribut nicht verstanden habe. Zum Glück bin ich auf diesen Beitrag gestoßen.