Gdy dodasz link do strony w innej witrynie za pomocą atrybutu target="_blank",
możesz narazić witrynę na problemy z wydajnością i bezpieczeństwem:
- Druga strona może uruchomić ten sam proces co Twoja. Jeśli inna strona zawiera dużo kodu JavaScript, może to wpłynąć na wydajność Twojej strony.
- Druga strona może uzyskać dostęp do obiektu
windowza pomocą właściwościwindow.opener. Może to umożliwić innej stronie przekierowanie Twojej strony pod złośliwy adres URL.
Dodaję: rel="noopener" lub rel="noreferrer"
do Twoich linków target="_blank" pozwala uniknąć tych problemów.
Jak nie uda się przeprowadzić kontroli miejsc docelowych z innych domen w Lighthouse
Lighthouse oznacza niebezpieczne linki do miejsc docelowych z innych domen:
Lighthouse używa tego procesu do identyfikowania linków jako niebezpiecznych:
- Zbierz wszystkie tagi (
<a>), które zawierają atrybuttarget="_blank"ale nie atrybutyrel="noopener"anirel="noreferrer". - Odfiltruj wszystkie linki prowadzące do tego samego hosta.
Lighthouse odfiltrowuje linki tego samego hosta,
Jest taki przypadek, o którym musisz pamiętać, jeśli pracujesz nad dużą witryną:
jeśli jedna strona zawiera link target="_blank" prowadzący do innej strony w Twojej witrynie bez użycia tagu rel="noopener",
wpływ tego audytu na wydajność nadal będzie mieć zastosowanie.
W wynikach Lighthouse nie zobaczysz jednak tych linków.
Jak zwiększyć wydajność witryny i zapobiegać lukom w zabezpieczeniach
Dodaj rel="noopener" lub rel="noreferrer"
do każdego linku wykrytego w raporcie Lighthouse.
Ogólnie rzecz biorąc, gdy używasz target="_blank", zawsze
dodaj element rel="noopener" lub rel="noreferrer":
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>
rel="noopener"uniemożliwia nowej stronie aby uzyskać dostęp do właściwościwindow.opener, zapewnia jej działanie w oddzielnym procesie.rel="noreferrer"ma taki sam efekt ale zapobiega także wyświetlaniu nagłówkaRefererprzed wysłaniem na nową stronę. Patrz Typ linku „noreferrer”.
Zapoznaj się z artykułem na temat bezpiecznego udostępniania zasobów z innych domen. post , gdzie znajdziesz więcej informacji.