Dass angeklickte Links sich in einem neuen Fenster öffnen, ist keine Seltenheit. Durch diese Einstellung führst Du Deine Besucher zu externen Websites, ohne dass sie Deine Seite vollständig verlassen. Das kann sehr sinnvoll sein, aber leider existiert mittlerweile ein Sicherheitsproblem bei der üblichen Handhabung dieser Funktion. Doch auch dies kann gelöst werden.
Links im neuen Browserfenster öffnen
Wenn Du möchtest, dass ein angeklickter Link sich in einem neuen Browserfenster öffnet muss in dem Standard-HTML-Code für den Link etwas ergänzt werden:
<a href="https://wphelp.de">mein Link</a>
Hinzugefügt wird ein sogenanntes Attribut: target="_blank":
<a target="_blank" href="https://wphelp.de">mein Link</a>
Durch dieses Attribut weiß der Browser, dass beim Klick auf den Link ein neues Browserfenster oder ein neuer Tab geöffnet werden soll.
Wenn Du Dich nicht mit HTML-Code beschäftigen magst, kannst du auch einfach den visuellen Editor in WordPress nutzen und diese Funktion einfach per Klick einschalten. Wir zeigen Dir wie das sowohl im Klassischen Editor als auch dem neuen Gutenberg oder Block Editor geht.
Klassischer Editor
Im Klassischen Editor klickt man zunächst in der visuellen Ansicht auf den Link.
Dann erscheint ein kleines Feld (1), das die URL anzeigt mit einem Bleistiftsymbol. Wenn du wiederum auf das Bleistiftsymbol klickst, ändert sich das Feld, so dass Du die URL editieren kannst. Wenn Du nun auf das Zahnradsymbol (2) klickst, erscheint ein größerer Einstellungsbereich in dem sich die Option "Link in einem neuen Tab öffnen" aktivieren lässt.
Zum Schluss musst Du noch den "Aktualisieren" Button in dem Fenster klicken und die Änderung für die gesamte Seite "Speichern" oder "Aktualisieren".
Gutenberg Editor
Im Gutenberg Editor ist der Ablauf sehr ähnlich. Auch hier klickst Du zunächst auf den Link im Editor.
Es erscheint ein kleines Feld (1), das die URL anzeigt mit einem Bleistiftsymbol. Wenn du wiederum auf das Bleistiftsymbol klickst, ändert sich das Feld, so dass Du die URL editieren kannst. Wenn Du nun auf das Symbol mit den drei übereinanderliegenden Punkten (2) klickst, erscheint unterhalb ein weiterer Einstellungsbereich in dem sich die Option "In neuem Tab öffnen" aktivieren lässt (3).
Achtung: Die Änderung wird erst in den Code übernommen, wenn Du abschließend auf das Enter-Symbol links neben den drei übereinanderliegenden Punkten klickst und anschließend die geänderte Seite speicherst bzw. aktualisierst. Klickst Du einfach nur an eine andere Stelle im Editor, verschwindet das Einstellungsfenster einfach und die Änderung wird nicht übernommen.
Es könnte so einfach sein
Sehr lange Zeit brauchtest Du nicht mehr zu dem Thema wissen. Aber leider ergibt sich aus dieser Nutzung von target="_blank" ein Sicherheitsproblem. Deshalb ist seit dem WordPress-Update auf Version 4.7.4 im Frühjahr 2017 zu dem bekannten Attribut noch ein weiteres hinzugekommen.
Das Sicherheitsrisiko "target_blank"
Die einfache Verwendung von target="_blank" öffnet die Möglichkeit für Phishing-Angriffe. Besonders groß ist das Risiko, Opfer eines solchen Phishing-Versuchs zu werden, auf Seiten, die viele von Nutzern generierte Inhalte haben. Facebook ist ein sehr gutes Beispiel dafür. Ein Sicherheitsrisiko ist aber jeder Link, der dieses Attribut ohne Zusätze nutzt.
Jedes Mal, wenn target="_blank" ohne weitere Attribute zum Einsatz kommt, wird im Browser der aufgerufenen neuen Seite eine Referenz zur Ausgangsseite übergeben. Auf diesem Weg kann die neue Seite den Inhalt des Browserfensters der Ausgangsseite manipulieren. Das kann in einigen Fällen gewollt und hilfreich sein, aber es bietet leider auch die Möglichkeit der böswilligen Manipulation.
Beispiel: Du folgst einem Link auf einer Seite wie Facebook zu einer externen Seite. Wenn die aufgerufene Seite entsprechend präpariert wurde, kann, ohne dass Du es bemerkst, die Seite von der Du kommst (Facebook) von Dir unbemerkt verändert werden. Du glaubst später, zu Facebook zurückzukehren, landest aber auf einer ganz anderen Seite, die nur nach Facebook aussieht. Dass jetzt Deine Einloggdaten nochmal abgefragt werden, wundert Dich wahrscheinlich kaum. Schon bist Du ein Phishing-Opfer geworden. Keine Sorge: Facebooklinks sind mittlerweile ebenfalls gegen diese Art der Manipulation abgesichert.
Das Risiko besteht allerdings eher bei Websites, die es vielen verschiedenen Nutzern ermöglichen selbst Links zu veröffentlichen. Trotzdem hat WordPress entschieden das Sicherheitsrisiko für alle zu minimieren.
"noopener noreferrer" lösen das Problem ... eigentlich
Das Sicherheitsproblem lässt sich sehr einfach lösen. Dazu muss neben dem Attribut target="_blank" auch das Attribut rel="noopener" verwendet werden. Auf diese Weise wird dem neuen Fenster der Zugriff auf das aufrufende Browserfenster verweigert.
Deshalb hat WordPress im Frühjahr 2017 mit der Version 4.7.4 eine Funktion ergänzt, die in bestimmten Fällen automatisch für den Zusatz rel="noopener" sorgt:
<a target="_blank" rel="noopener" href="https://wphelp.de">mein Link</a>
Da aber der Firefox Browser bis März 2017 rel="noopener" nicht unterstützte, wurde zusätzlich auch das Attribut "noreferrer" ergänzt:
<a target="_blank" rel="noopener noreferrer" href="https://wphelp.de">mein Link</a>
Wichtig: Zu einer korrekten Verwendung im HTML-Code gehört die Regel, dass es nur ein rel= Attribut pro Link geben soll. D.h. wenn mehrere Befehle ergänzt werden, schreibt man das rel nur einmal und setzt die Angaben getrennt mit Leerzeichen hintereinander in die Klammern:
rel="noopener noreferrer"
Damit ist die Sicherheitslücke auch für ältere Firefoxinstallationen behoben, allerdings können unter Umständen dadurch andere - allerdings weniger sicherheitskritische - Probleme für das Tracking Deiner Website und bei der Verwendung von Affiliateprogrammen entstehen. Falls Dich das interessiert, haben wir das Thema zum Ende dieses Artikels ausführlicher beschrieben.
Verwirrende Updates
Da mittlerweile auch der Firefox Browser die noopener Funktion unterstützt, wurde mit der Veröffentlichung von WordPress 4.8 im Juni 2017 die automatische Ergänzung wieder auf noopener reduziert und damit auf noreferrer verzichtet. Das gilt allerdings nur für den klassischen Editor. Denn erstaunlicherweise erfolgt bei dem mit WordPress 5.0 im Dezember 2018 eingeführten neuen Block oder Gutenberg Editor die automatische Ergänzung wieder mit rel="noopener noreferrer" (Stand Frühjahr 2019).
WordPress ergänzt nicht alle Links
WordPress ergänzt leider nicht alle Links automatisch. Stattdessen werden die Attribute nur in Beiträgen und Seiten automatisch hinzugefügt, die nach der Installation des Updates von Version 4.7.4 im April 2017 erstellt oder bearbeitet wurden. Zudem muss dafür der visuelle Editor von WordPress oder die Link Funktion aus dem Menü des Editors verwendet werden.
Auch Links, die Deine Besucher in den Kommentaren hinterlassen werden nicht automatisch mit rel="noopener" versehen. Darüber hinaus nehmen auch einige Page Builder Plugins diese Änderung nicht vor.
noopener Plugin?
Für Websites, die schon etwas umfangreicher und gut besucht sind, wäre es sehr mühsam alle Links manuell zu überprüfen und ggf. anzupassen. Das kostenfreie Plugin WP External Links ist hier sehr hilfreich.
Mit Hilfe des Plugins lässt sich genau definieren welche Attribute automatisch zugeordnet werden sollen. Dabei können die Einstellungen getrennt für interne und externe Links gesetzt werden und es lassen sich auch Ausnahmen definieren.
Was für Dich zu tun bleibt
Falls Deine WordPress-Installation nicht automatisch die neuen Attribute eingefügt hat, kannst Du dies natürlich selbst angehen. Zuerst solltest Du aber diese Fragen für Dich beantworten, um Dir mitunter viel unnötige Arbeit zu sparen:
- Nutzt Du überhaupt
target="_blank"? Falls nicht, kannst Du einfach alles beim Alten lassen, denn für Dich ändert sich nichts. - Benutzt Du Analyse-Tools? Diese werden ggf. auch dann durcheinander gebracht, wenn Du interne Links in neuen Fenstern öffnest.
- Nutzt Du Affiliate-Programme? Dann solltest Du klären, ob diese Probleme mit "
noreferrer" haben. - Können Fremde Links auf Deiner Seite posten, z. B. in Kommentaren? Solche Links stellen ein höheres Sicherheitsrisiko dar als Links, die Du selbst sorgfältig prüfst, ehe Du sie setzt.
Änderungen manuell oder per Plugin durchführen
Wenn Du die neuen Attribute nutzen willst, musst Du aktiv werden. Am sichersten ist es, jeden Link zu überprüfen, und sich nicht auf eine automatische Änderung zu verlassen. Dies betrifft insbesondere die Kommentarfunktion. Da diese nicht über den Editor läuft, musst Du Links manuell um die neuen Attribute ergänzen.
Einfacher geht es mit dem oben genannten Plugin WP External Links. Es ermöglicht Dir, genau zu definieren, wie interne und externe Links sich verhalten und welche Attribute sie erhalten sollen. Auch Ausnahmen für Affiliate-Links sind möglich.
Das nofollow Problem im Gutenberg Editor
Es gibt ein weiteres Attribut, dass häufig Links beigefügt wird: nofollow. Dies signalisiert Suchmaschinen, dass sie diesem Link nicht folgen sollen. Weitere Infos zu nofollow findest du in dem Artikel "Was bedeutet NoFollow?" aus der SEO-Küche.
Nun gibt es zwei Probleme, die bei der Nutzung des Block oder Gutenberg Editors auftreten können.
nofollow wird überschrieben
WordPress selbst bietet keine Möglichkeit per Klick einem Link nofollow hinzuzufügen. Dazu muss man in die HTML-Ansicht umschalten (das ist auch nur für einen Block möglich) und dann dem Link das rel="nofollow" hinzufügen:
<a rel="nofollow" href="https://wphelp.de">mein Link</a>
Wenn du aber erst nachdem Du das erledigt hast, über den Menübutton die Einstellung "In neuem Tab öffnen" für den Link aktivierst, wird Dein rel="nofollow" durch rel="noopener noreferrer" ersetzt.
Dann musst Du nofollow wieder nachtragen, allerdings auf eine bestimmte Weise. Damit kommen wir zu dem zweiten möglichen Problem.
nofollow: Block enthält unerwarteten oder ungültigen Inhalt
Wenn Du im Gutenberg Editor bei aktivierter "In neuem Tab öffnen" Einstellung einfach rel="nofollow" ergänzt, erscheint plötzlich eine Fehlermeldung an dem Block: "Dieser Block enthält unerwarteten oder ungültigen Inhalt".
Das kommt daher, dass laut HTML-Syntax für jeden Link nur ein rel="..." gesetzt werden kann.
<a rel="noopener noreferrer" rel="nofollow" href="https://wphelp.de">mein Link</a>
... ist also nicht korrekt!
Du löscht in diesem Fall die rel="nofollow" Angabe und trägst nofollow mit zu den anderen Angaben des vorhandenen rel="noopener noreferrer" Attributes:
<a rel="noopener noreferrer nofollow" href="https://wphelp.de">mein Link</a>
Dann beschwert sich Gutenberg auch nicht mehr.
Achtung: Wenn Du den Link erneut bearbeitest und die Einstellung "In neuem Tab öffnen" deaktivierst, wird auch das nofollow gelöscht und Du musst es manuell wieder eintragen!
Tücken bei der Nutzung von noreferrer
An dieser Stelle folgen noch ein paar Informationen zu möglichen Problemen bei der Verwendung von noreferrer.
Update: Wie bereits weiter oben ergänzt, wurde mit dem WordPress Update auf Version 4.8 im Juni 2017 auf die automatische Ergänzung von noreferrer verzichtet, aber leider wieder mit dem Gutenberg Editor ab WordPress 5.0 im Dezember 2018 eingeführt.
Die ergänzende Nutzung von noreferrer löst zwar das Sicherheitsproblem, aber kann unter bestimmten Umständen zu weiteren Problemen führen. Diese sind allerdings nicht sicherheitskritisch.
Denn noreferrer verhindert nicht nur wie noopener, dass das aufrufende Fenster nicht manipuliert werden kann, sondern auch, dass die aufrufende Seite dem neuen Fenster Informationen sendet. Auf solche Informationen greifen z.B. Analyse-Tools wie Google Analytics gerne zu und können dadurch nicht erkennen woher der Besucher kommt. Das gleiche gilt für einige Affiliate-Programme.
D.h. bei Affiliateprogramme, die Provisionen zahlen basierend auf der Information von welcher Website der Besucher kam, kann es dann passieren, dass die Affiliatesoftware den Käufer nicht als Besucher von Deiner Seite zuordnen kann und damit entgeht Dir die eigentlich wohlverdiente Provision.
Die meisten Affiliateprogramme funktionieren glücklicherweise darüber, dass der eigentlichen URL ein Code angehängt wird über den die verlinkte Seite feststellen kann von wem der Verkauf vermittelt wurde. Wenn Du mehr zu diesem Thema wissen möchtest, ist der Artikel "Schadet der WordPress-„noreferrer“ Amazon Affiliates?" von Peer Wandiger empfehlenswert.
