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
window
za 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:
![Audyt Lighthouse pokazujący niebezpieczne linki do miejsc docelowych z innych domen](https://developer.chrome.com/static/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/image/lighthouse-audit-showing-b1f47b11d85bc.png?authuser=19&hl=pl)
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łówkaReferer
przed 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.