Co to jest noopener?

Noopener to wartość atrybutu rel stosowana w linkach HTML otwierających nowe okno lub kartę przeglądarki (target="_blank"). Jego zadaniem jest zablokowanie dostępu nowej karty do obiektu window.opener strony macierzystej. Choć brzmi technicznie, chodzi o prostą kwestię bezpieczeństwa: bez rel="noopener" strona otwierana przez link może przejąć kontrolę nad kartą, z której użytkownik kliknął – co stanowi realną lukę bezpieczeństwa.

Dlaczego noopener jest ważny?

Gdy link otwiera nową kartę bez atrybutu noopener, przeglądarka udostępnia nowej stronie dostęp do obiektu window.opener – czyli referencji do okna, z którego link został kliknięty. Złośliwa lub przejęta strona może wykorzystać ten dostęp do zmiany lokalizacji karty macierzystej (np. przekierować ją na stronę phishingową). Użytkownik wraca do „oryginalnej” karty, która wygląda jak ta, z której wyszedł – ale jest już podmieniona. Dodanie rel="noopener" całkowicie eliminuje tę możliwość, odcinając dostęp do obiektu opener.

Noopener a Noreferrer – jaka różnica?

Te dwa atrybuty często stosuje się razem: rel="noopener noreferrer". Noreferrer robi dwie rzeczy: blokuje dostęp do window.opener (tak jak noopener) i dodatkowo ukrywa informację o stronie odsyłającej – nowa strona nie wie, skąd przyszedł użytkownik. Z perspektywy bezpieczeństwa noopener jest wystarczający; noreferrer dodaje warstwę prywatności i jest przydatny, gdy nie chcemy ujawniać źródła ruchu (np. w analizie w Google Analytics 4 taki ruch może pojawić się jako „direct” zamiast referral).

Kiedy stosować rel=”noopener”?

Atrybut noopener należy stosować zawsze, gdy link otwiera nową kartę lub okno (target="_blank"). Dotyczy to linków zewnętrznych prowadzących do innych witryn, linków do dokumentów (PDF, pliki do pobrania) otwieranych w nowej karcie, a także – co mniej oczywiste – linków wewnętrznych otwieranych w nowym oknie. Nowoczesne przeglądarki (Chrome od wersji 88, Firefox, Safari) automatycznie stosują zachowanie podobne do noopener dla linków z target=”_blank”, ale dodanie atrybutu ręcznie pozostaje dobrą praktyką i zapewnia kompatybilność ze starszymi przeglądarkami.

Noopener a SEO

Bezpośredniego wpływu na pozycje w wyszukiwarce noopener nie ma – to kwestia bezpieczeństwa, nie rankingowa. Pośrednio jednak bezpieczeństwo strony jest elementem ocenianym przez Google w ramach technical SEO. Strony z oczywistymi lukami bezpieczeństwa mogą być oznaczane jako niebezpieczne w wynikach wyszukiwania. Audit bezpieczeństwa (w tym sprawdzenie atrybutów rel na linkach) jest częścią kompleksowego audytu SEO.

Jak szybko dodać noopener do wszystkich linków?

Na stronach WordPress wtyczki SEO jak Yoast SEO pozwalają automatycznie dodawać atrybuty noopener i noreferrer do wszystkich linków zewnętrznych w treści. W edytorze Gutenberg można to ustawić dla każdego linku indywidualnie w panelu linku. Dla stron budowanych ręcznie lub na innych CMS-ach można użyć krótkiego kodu JavaScript automatycznie dodającego brakujące atrybuty do wszystkich linków z target=”_blank”. W nowym kodzie HTML warto wyrobić nawyk dodawania rel="noopener noreferrer" za każdym razem, gdy używa się target="_blank".

FAQ – noopener