Links zu ursprungsübergreifenden Zielen sind unsicher

Wenn Sie mit dem Attribut target="_blank" eine Verknüpfung zu einer Seite auf einer anderen Website erstellen, können Sie Leistungs- und Sicherheitsprobleme auf Ihrer Website haben:

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

rel="noopener" oder rel="noreferrer" werden hinzugefügt target="_blank"-Links, um diese Probleme zu vermeiden.

Wie die Prüfung des ursprungsübergreifenden Ziels von Lighthouse fehlschlägt

Lighthouse kennzeichnet unsichere Links zu ursprungsübergreifenden Zielen:

Lighthouse-Prüfung zeigt unsichere Links zu ursprungsübergreifenden Zielen

In Lighthouse werden Links folgendermaßen als unsicher eingestuft:

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

Da Lighthouse Links von selben Hosts filtert, Es gibt einen Grenzfall, den Sie kennen sollten, wenn Sie an einer großen Website arbeiten: wenn eine Seite einen target="_blank"-Link zu einer anderen Seite auf deiner Website ohne rel="noopener" enthält, dennoch treffen die Auswirkungen dieser Prüfung auf die Leistung zu. Diese Links werden jedoch nicht mehr in den Lighthouse-Ergebnissen angezeigt.

Websiteleistung verbessern und Sicherheitslücken vermeiden

rel="noopener" oder rel="noreferrer" hinzufügen zu jedem Link in Ihrem Lighthouse-Bericht. Wenn Sie target="_blank" verwenden, 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 um auf die Property window.opener zuzugreifen und in einem separaten Prozess ausgeführt wird.
  • rel="noreferrer" hat denselben Effekt verhindert aber auch, dass der Referer-Header an die neue Seite gesendet werden. Siehe Linktyp "noreferrer".

Weitere Informationen .

Ressourcen