Dodając link do strony w innej witrynie za pomocą atrybutu target="_blank"
, możesz narazić ją na problemy z wydajnością i bezpieczeństwem:
- Druga strona może działać w tym samym procesie co Twoja strona. Jeśli druga strona zawiera dużo kodu JavaScript, jej wydajność może się pogorszyć.
- Druga strona może uzyskać dostęp do obiektu
window
za pomocą właściwościwindow.opener
. Dzięki temu druga strona może przekierować Twoją stronę pod złośliwy adres URL.
Dodanie rel="noopener"
lub rel="noreferrer"
do linków target="_blank"
pozwala uniknąć tych problemów.
Co się dzieje z kontrolą miejsca docelowego w innych domenach w Lighthouse
Lighthouse zgłasza niebezpieczne linki do miejsc docelowych w innych domenach:
Lighthouse rozpoznaje linki jako niebezpieczne za pomocą tego procesu:
- Zbierz wszystkie tagi
<a>
, które zawierają atrybuttarget="_blank"
, ale nie zawierają atrybutówrel="noopener"
anirel="noreferrer"
. - Odfiltruj wszystkie linki prowadzące do tego samego hosta.
Narzędzie Lighthouse odfiltrowuje linki z tego samego hosta, więc jeśli pracujesz nad dużą witryną, pamiętaj o drugim przypadku: gdy jedna strona zawiera link target="_blank"
do innej strony w Twojej witrynie bez użycia rel="noopener"
, nadal masz wpływ na wydajność tego audytu.
Te linki nie będą jednak widoczne w wynikach dotyczących narzędzia Lighthouse.
Jak poprawić wydajność witryny i zapobiec lukom w zabezpieczeniach
Dodaj rel="noopener"
lub rel="noreferrer"
do każdego linku wskazanego w raporcie Lighthouse.
Ogólnie rzecz biorąc, gdy używasz właściwości target="_blank"
, zawsze dodawaj rel="noopener"
lub rel="noreferrer"
:
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>
rel="noopener"
uniemożliwia nowej stronie dostęp do usługiwindow.opener
i zapewnia jej działanie w ramach osobnego procesu.- Tag
rel="noreferrer"
działa tak samo, ale zapobiega też wysłaniu nagłówkaReferer
do nowej strony. Patrz Typ linku „noreferrer”.
Więcej informacji znajdziesz w poście na temat bezpiecznego udostępniania zasobów z innych domen.