Tworzysz stronę internetową i potrzebujesz pomocy?

Ostatnio stworzyłem dla znajomego pewną wtyczkę do WordPressa, która w momencie wystąpienia pewnych, z góry określonych warunków dokonywała automatycznej modyfikacji linków znajdujących się na stronie (konkretnie w artykule/wpisie), według ustalonych założeń. Przy tej okazji kolega zauważył, że w niektórych linkach pojawia się atrybut „noopener”. Zresztą nie tylko on (atrybut, nie kolega).

Link bez otwieracza, czyli rel=”noopener”

WordPress od wersji 4.7.4 do niektórych linków tworzonych w postach i na stronach dodaje atrybut „noopener”, czyli… brak otwieracza. Przynajmniej jakby chcieć to tłumaczyć bezpośrednio/dosłownie. Atrybut ten jednak z otwieraczem do kapsli nie ma nic wspólnego, a po prostu dodatkowo chroni osobę odwiedzającą naszą stronę, gdy ta kliknie link do złośliwej strony. Oczywiście celowo byśmy do niej nie linkowali, ale domeny co chwilę zmieniają swojego właściciela, więc równie może z tym być.

Domyślnie linki – nie tylko w WordPressie – otwierają się w tym samym oknie (w tej samej karcie), w którym znajduje się strona z linkiem. Taki link wygląda np. tak:

<a href="https://webinsider.pl/">Zapraszamy na Webinsider.pl</a>

W tym przypadku nie został dodany ani atrybut „rel”, ani tym bardziej jego parametr „noopener”. Sytuacja się zmienia, gdy podczas dodawania linku zaznaczymy, że ma on otworzyć się w nowym oknie (karcie):

<a href="https://webinsider.pl/" target="_blank" rel="noopener">Zapraszamy na Webinsider.pl</a>

W tym przypadku mamy atrybut „target” o wartości „_blank”, co określa, że link ma zostać otwarty w nowym oknie (w nowej karcie). Ale oprócz tego mamy jeszcze atrybut „rel” o wartości „noopener”. I nie jest to przypadek, że te dwie pary działają obecnie w duecie.

Strony internetowe są coraz bardziej rozbudowane, pełne kodu JavaScript, który z jednej strony sprawia, że na takich stronach możemy robić coraz więcej, niczym w normalnych programach uruchamianych na komputerze. Ale z drugiej strony, oznacza to większe ryzyko związane m.in. z bezpieczeństwem.

W pewnym momencie zorientowano się, że korzystając z „window.opener.document” w połączeniu z otwieraniem linków w nowym oknie można za pomocą docelowej strony zmienić zawartość strony, na której znajdował się link. Taka zmiana nie dotyczy bezpośrednio strony na serwerze, a „tylko” strony wyświetlanej w przeglądarce danego użytkownika. I tak w uproszczeniu narodził się „noopener”, który ma przed czymś takim chronić.

Choć nie wiem, czy lepszym wyjściem nie byłoby dodawanie do linków czegoś podobnego w sytuacji, gdy chcemy umożliwić taka zmianę, bo jest to zdecydowanie sytuacja rzadziej spotykana (bardziej specyficzna) niż zwykły link, nawet jeśli otwierany w nowym oknie (nowej karcie).

Do kompletu: „noreferrer” i „nofollow”

Skoro o WordPressie wspomniałem, to – jeśli pamięć mnie nie myli – wraz z „noopener” do linków zawitał jeszcze „noreferrer” (kwestia Firefoxa, który – w tamtym okresie – nie wspierał „noopener”), co od razu wywołało liczne burze, zwłaszcza na stronach związanych z pozycjonowaniem (SEO). Zaczęły pojawiać się głosy, że linki tak oznaczone mogą być złe dla SEO, bo nie będą „przekazywać mocy” do linkowanej strony. Co raczej nie miało(by) znaczenia dla strony linkującej, a dla strony linkowanej. Ostatecznie chyba nikt tego nie udowodnił, ale z WordPressa zniknęło automatyczne dodawanie „noreferrer” do linków.

Zamieszanie (łagodnie mówiąc/pisząc) wzięło się z tego, że niektórzy skojarzyli „noreferrer” z „nofollow”, co w połączeniu ze swoistą niewiarą osób zajmujących się pozycjonowaniem w zapewnienia Google musiało wywołać gorące dyskusje. A wiadomo, że SEO zapleczami stoi, a zaplecza linkami…

W każdym razie:

  • noopener – strona do której linkujemy, nie może mieć wpływu na zawartość nasze strony (okna/karty ze stroną, na której znajduje się link), czyli nie może podmieniać jej zawartości
  • noreferrer – brak przekazywania do docelowej strony adresu strony odsyłającej/linkującej (nagłówek HTTP), czyli strona docelowa nie wie, z jakiej strony do niej przyszliśmy, skąd nastąpiło odesłanie
  • nofollow – tak oznaczamy link do strony, której nie chcemy „przekazać mocy” naszej strony, co jest zalecane przez Google m.in. w przypadku linków płatnych, np. w artykułach sponsorowanych (odwrotnością dla tego parametru jest „dofollow”)

Nie są to jedyne wartości, jakie może przyjąć atrybut „rel” linku, ale pozostałe raczej nie mają znaczenia w kontekście tego artykułu.

(!) Zgłoś błąd na stronie | Lub postaw nam kawę :-)
LUTy dla D-Cinelike (DJI Mini 3 Pro, DJI Avata, OSMO Pocket) od MiniFly
Wdrożenie Omnibusa w sklepie na WooCommerce
Jak (legalnie) latać dronem w Kategorii Otwartej
Tworzysz stronę internetową i potrzebujesz pomocy?
Patryk
Tworzysz stronę internetową i potrzebujesz pomocy?