Links absichern mit rel=“noopener“

target="_blank" und rel="noopener" © Christoph Freyer

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.

8 Gedanken zu „Links absichern mit rel=“noopener““

  1. 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.

  2. 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

  3. 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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.