Atrybuty rel=”noopener” i rel=”noreferrer”

W tym artykule dowiesz się czym są atrybuty rel=”noopener” oraz rel=”noreferrer” oraz kiedy i w jaki sposób należy je stosować.

rel="noopener" i rel="noreferrer"

Linkowanie to wciąż skuteczna metoda pozycjonowania strony, jednak przede wszystkim jest to sposób na łatwe dzielenie się interesującą treścią w internecie. Dotyczy to również platformy WordPress, która często wykorzystywana jest w formie bloga – prywatnego lub prowadzonego na rzecz przedsiębiorstwa.

Najczęściej znanym atrybutem stosowanym w przypadku linków jest rel=”nofollow”, o którym więcej można przeczytać w naszym artykule Czym są i jak stosować linki follow i nofollow. Jak jednak można wyczytać z tytułu istnieją jeszcze inne atrybuty, o których dzisiaj właśnie napiszemy: noopener oraz noreferrer.

Nofollow vs noreferrer

Pierwszym znacznikiem, który weźmiemy pod lupę będzie rel=noreferrer”. Atrybut ten jest częścią specyfikacji HTML 5, a jego zadaniem jest, aby nie przesyłać informacji na temat odsyłającej witryny po kliknięciu w link. Oznacza to, że pomimo, iż dla zwykłego użytkownika hiperłącze wygląda tak samo to jednak staje się ono niewidoczne dla linkowanej strony internetowej.

Obecnie atrybut noreferrer jest obsługiwany przez co raz więcej przeglądarek wspierających technologię HTML 5.

Kiedy i jak używać?

Stosowanie rel=”noreferrer” ma swoje zalety, ponieważ umożliwia ukrycie nagłówka HTTP, a to zwiększa prywatność w sieci oraz bezpieczeństwo samych użytkowników.

Możemy to zrobić dodając prosty kod do linka w formie HTML:

<a href=”https://siriuspro.pl/” rel=”noreferrer”>Sirius PRO</a>

Takie działanie jednak, jak wskazują ostatnie testy, może powodować m.in. problemy z Google Analytics oraz dawać efekty zbliżony do już wcześniej opisanego atrybutu nofollow, który w 2005 roku został zaprezentowany przez Google (więcej: Wikipedia).

Co jednak istotne, Google póki co nie ustosunkowało się do powyższych doniesień oraz samego atrybutu, dlatego słuszność jego stosowania pozostaje pod znakiem zapytania.

Rel=”noopener”

W przypadku atrybutu noopener jesteśmy jednak pewni, że jego stosowanie to konieczność. Wiąże się to z zagrożeniem jakie powoduje otwieranie linków z atrybutem _blank.

Działanie znacznika _blank jest bardzo proste i polega na przekierowaniu otwartego linka do nowej karty (okna), dzięki czemu nie tracimy aktualnie przeglądanej treści. Jednak w tej całej pięknej idei istnieje błąd, który pozwala na pełną kontrolę nad treścią strony otwierającej przez kliknięte hiperłącze.

Oznacza to, że po kliknięciu w niezabezpieczony link razem z nową kartą otwieramy szkodliwej witrynie możliwość podmiany treści w naszej źródłowej stronie. Co jednak najgorsze, zmiana treści nastąpi w tle pozostając zupełnie niewidoczną dla użytkownika. Ryzyko staje tym bardziej znaczące biorąc pod uwagę fakt, iż opisana sytuacja zadziała również w przypadku, gdy link znajduje się w innej domenie.

Z pomocą tutaj przychodzi właśnie atrybut rel=”noopener”, który wprowadza restrykcje, dla otwierany w tle linków i zabezpiecza użytkownika przed atakiem typu phishing.

Co należy zrobić?

Jeżeli macie aktualną wersję WordPressa to nie musicie nic robić – od wersji 4.7.4 system ten automatycznie dodaje parametr noopener do tworzonych linków.

Jeżeli jednak wasza strona internetowa oparta jest o inny system CMS to do wszystkich linków zalecamy dodanie krótkiego fragmentu:

<a href=”https://siriuspro.pl/” rel=”noopener”>Sirius PRO</a>

Lub unikanie znacznika _blank w kodzie HTML.

W przypadku przeglądarki Firefox, która nie respektuje znacznika noopener zaleca się, aby korzystać z kombinacji obu atrybutów: rel=”noopener noreferrer”.

Podsumowanie

Zainteresowanych odsyłamy do świetnego artykułu na GitHubie, a firmy, które dbają o bezpieczeństwo IT do kontaktu z nami w celu uzyskania naszej wsparcia i doradztwa.