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 daswindow
-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](https://developer.chrome.com/static/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/image/lighthouse-audit-showing-b1f47b11d85bc.png?authuser=6&hl=de)
Lighthouse verwendet das folgende Verfahren, um Links als unsicher zu kennzeichnen:
- Erfassen Sie alle
<a>
-Tags, die das Attributtarget="_blank"
, aber nicht das Attributrel="noopener"
oderrel="noreferrer"
enthalten. - 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 daswindow.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 derReferer
-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.