Links zu ursprungsübergreifenden Zielen sind unsicher

Wenn du mithilfe des target="_blank"-Attributs auf eine Seite einer anderen Website verlinkst, kann dies Leistungs- und Sicherheitsprobleme auf deiner Website verursachen:

  • Die andere Seite wird möglicherweise mit demselben Prozess ausgeführt wie Ihre Seite. Wenn auf der anderen Seite viel JavaScript ausgeführt wird, kann dies die Leistung Ihrer Seite verschlechtern.
  • Die andere Seite kann mit der window.opener-Eigenschaft auf das window-Objekt zugreifen. Dies kann dazu führen, dass die andere Seite Ihre Seite an eine schädliche URL weiterleitet.

Wenn Sie Ihren target="_blank"-Links rel="noopener" oder rel="noreferrer" hinzufügen, können Sie diese Probleme vermeiden.

So schlägt die Prüfung für ursprungsübergreifende Lighthouse-Ziele fehl

Lighthouse kennzeichnet unsichere Links zu ursprungsübergreifenden Zielen:

Lighthouse-Prüfung mit unsicheren Links zu ursprungsübergreifenden Zielen

Lighthouse verwendet das folgende Verfahren, um Links als unsicher zu kennzeichnen:

  1. Erfassen Sie alle <a>-Tags, die das Attribut target="_blank", aber nicht das Attribut rel="noopener" oder rel="noreferrer" enthalten.
  2. Filtern Sie Links desselben Hosts heraus.

Da Lighthouse Links desselben Hosts herausfiltert, gibt es einen Grenzfall, den Sie beachten sollten, wenn Sie an einer großen Website arbeiten: Wenn eine Seite einen target="_blank"-Link zu einer anderen Seite auf Ihrer Website enthält, ohne rel="noopener" zu verwenden, gelten die Auswirkungen dieser Prüfung auf die Leistung. Diese Links werden jedoch nicht in Ihren Lighthouse-Ergebnissen angezeigt.

So kannst du die Leistung deiner Website verbessern und Sicherheitslücken vermeiden

Fügen Sie jedem Link in Ihrem Lighthouse-Bericht rel="noopener" oder rel="noreferrer" hinzu. Wenn Sie target="_blank" verwenden, sollten Sie im Allgemeinen immer rel="noopener" oder rel="noreferrer" hinzufügen:

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</a>
  • rel="noopener" verhindert, dass die neue Seite auf das window.opener-Attribut zugreifen kann, und sorgt dafür, dass sie in einem separaten Prozess ausgeführt wird.
  • rel="noreferrer" hat den gleichen Effekt, verhindert aber auch, dass der Referer-Header an die neue Seite gesendet wird. Weitere Informationen finden Sie unter Linktyp "noreferrer".

Weitere Informationen findest du im Beitrag Cross-origin-Ressourcen sicher teilen.

Ressourcen