Защо се използва rel noreferrer noopener – външни връзки, нов прозорец


Последно обновена 22.05.2017

Отскоро забелязваме автоматичното появяване на атрибут rel=“noreferrer noopener“ в публикациите си след като използваме атрибут target=“_blank“, за да отворим сайт, към който даваме линк, в нов таб или прозорец. Необходим ли е и защо ?

Пример с част от моя публикация:

Защо се използва rel noreferrer, noopener - външни връзки, нов прозорец 2

 

Уязвимият target=“_blank“

Target =“_ blanк“ винаги е бил с подценявана уязвимост. Проблемът не е нов и си е все актуален. Много хора не се сещат за него. Да си призная, също не съм се замисляла за това.

Ако имаш линк към друга страница, документ, сайт, трябва да се използва rel="noopener", ако се отваря в нов прозорец.

 
<a href= http://example.com“   target=_blank“  rel= noopener“> example site </a>

Без това, новата страница може да има частичен достъп до твоя прозорец чрез js свойството window.opener.

Моделът на сигурност на уеб не позволява четенето на твоята страница, но някои стари приложни програмни интерфейси (API) могат да сърфират в страницата ти с различен url, използвайки window.opener.location = newURL.

Миналата година се появи и стана много популярна в определени среди една статия на Mathias Bynens – front-end уеб разработчик (JavaScript, HTML, CSS, HTTP, сигурност). Тя беше последвана от много разглеждания на повдигнатия въпрос за сигурността при използване на target=“_blank“.

По-голямата част от браузерите са мултипроцесорни, с изключение на Firefox, който също минава в мултипроцесорен вид от 48 версия. Всеки процес има субпроцеси (thread), между които един, който наричаме главен. В него се извършва анализ, изчисляване на стил, оформление, оцветяване и неработни JavaScript. Това означава, че JavaScript работещи върху един домейн, работят на различен на прозореца или таба подпроцес (thread) и товарят и страницата, от която идва линка. Заради синхронния достъп тип крос-прозорец, DOM (Document Object Model – форма на представяне на структурирани обекти, като модел, ориентиран към обектите) дава възможност чрез window.opener на табове или прозорци, отворени чрез target="_blank", да приключват в същия процес и субпроцес на подадения линк. Същото важи за iframe и прозорците, отворени чрез window.open.

Какво означава това обяснено с пример:

Например току-що отвореният таб може да промени window.opener.location към phishing страница. Или да изпълни някои JavaScript в отварящата се страница по свое усмотрение. А твоите потребители, които ти имат доверие, не подозират.

Пример на атака – Създаваш една фалшива и вирусна страница с хубави снимки, шеги или др. Споделяш я на Facebook (там линковете се отварят с  _blank стойност) и всеки път, когато някой кликне на линка, изпълнява

window.opener.location = "https://fakewebsite/facebook.com/PHISHING-PAGE.html";

и пренасочва към страница, която изисква от потребителя да въведе отново паролата си. (by Alex. CEO, founder)

Такива атаки са обратен phishing tabnabbing атаки.

Noopener и noreferrer стойности на атрибута rel

Noopener

Атрибутът със съответната стойност rel="noopener" преустановява window.opener, т.е. няма никакъв достъп до този тип крос-прозорец. rel=“noopener“ ни дава ефективност и сигурност.

Браузерите на основата на Chromium – Chrome и Opera са оптимизирани за това и отварят нова страница в собствения процес и затова са с по-голяма производителност.

За браузери, които не поддържат  rel=“noopener“ използваме  rel=“noopener noreferrer“. Firefox го поддържа от 52 версия от 7.03.2017.

Noreferrer

През 2013 HTML5 въвежда ключовата дума noreferrer за атрибута rel на тага <a>. Атрибутът rel описва отношението между текущия документ и url на направлението. Може да се използва, само когато се използва атрибута href. Стойността noreferrer казва на браузера, че не трябва да събира или запомня информация за HTTP референта, когато се следва връзката-линка. Или с други думи, потребителите могат да кликнат върху линка, но целевият сайт не вижда, че те идват от твоя сайт.

via GIPHY

Да обобщим:

Разрешения на проблема с уязвимостта

Възможните разрешения на уязвимостта на target=“_blank“ са

1. Добавяне на rel=“noopener noreferrer“, когато използваме target=“_blank“(Доколкото разбирам rel=“noopener noreferrer“ е прибавен към редактора на WordPress, появява се автоматично.)
2. Да се махне атрибута за отваряне в нов таб или прозорец, оставяйки на потребителя да реши. Той може да си отвори линка в нова страница, чрез комманди като “CTRL+Click”, или “Click” с централния бутон на мишката или с десен бутон и „Отвори в нов таб“
3. Откриване на всички линкове към външни страници чрез своя междинна страница на която трябва да има код: window.opener = null;
4. Откриване на линкове на нова страница чрез js: var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = targetUrl;
5. Прихваща всички кликове на външния линк в нова страница в момента на прехвърляне и създава iframe скрито – github.com/danielstjules/blankshield – js плъгин, който по описание решава проблема.
6. Използване в краен случай на плъгина WP External Links (nofollow new tab seo).

Решение срещу автоматичното поставяне на rel = „noopener noreferrer“

Тъй като вече разбираме, че редакторите на WordPress и Joomla поне, отскоро добавят автоматично rel=“noopener noreferrer“ при поставяне на target=“_blank“ в линка към нова страница, можем да се запитаме, ами ако не искаме?… Например, ако се използват CDN (content delivery network или content distribution network) файлове, откриващи се в нов прозорец или таб, като pdf файловете примерно. CDN търси референта и не може да го открие, заради noreferrer. В този случай открих посочено решение , ето и тук примера с js кода.

За сегашната ситуация обобщаваме информацията, която имаме:

1. Добавен е нов код rel=“noopener noreferrer“, за да се избегне phishing.

2. Промяната на съществуващите вече линкове с target=“_blank“ трябва да бъде направена от ползвателя – собственик на сайта/блога или от уебмайстора.

3. Трябва да се документира по някакъв начин и използването на  allow_unsafe_link_target:true   параметъра в случай на нужда за нулиране на noreferrer.

 

Ново: Вече има плъгин, който премахва добавянето на „noopener“ и „noreferrer“:  No noopener noreferrer – Don’t add rel=“noopener noreferrer“

Има ли връзка между  „nofollow“ и „noreferrer“ от гледна точка на SEO

Друго, което забелязах при автоматичната промяна на кода на новите публикациите е rel=“noopener noreferrer nofollow“. Като ключовата дума nofollow естествено бях сложила аз чрез rel=“nofollow“.  Можем да кажем като извод

Всяка излизаща външна връзка, която е с target=“_blank“ трябва да има и rel=“noopener noreferrer“ и като опция „nofollow“ – rel=“noopener noreferrer nofollow“ за по-добро SEO.

Логично някой би поставил въпроса каква е връзката между линкове  „nofollow“ и „noreferrer“ от гледна точка на SEO ?

Rel=“nofollow“ казва на търсачката да не предава стойност (juice) на страницата, към която препращаш. Търсачката може да проследи линка къде отива, но не му дава стойност. Т.е. не му предава PageRank или TrustRank.

Nofollow е създаден поначало, за да се бори срещу спама в коментарите – ако на линка, който спамерът сложи към сайта си, се постави nofollow, то за спамещия вече ще е безмислено постването натам и насам с глупави коментари и линкове.

Rel=“noreferrer“ казва на браузера да не изпраща информация на сървъра за препращащия домейн. Така поне е на теория.

Би трябвало да бъде така: кликваш на линка, браузерът ти изпраща искане на сървъра, който управлява споменатия сайт. Заедно с това изпраща и допълнителна информация като типа на браузер и страницата, от която излиза линка – „referer“. „Noreferrer“ е точно, за да каже на браузера да не изпраща тази информация. Би трябвало да е така…

Както се вижда rel=“noreferrer“ няма никакво отношение към SEO.

Източници

Опасный target=“_blank““ на Богдан Рыхаль;

„External links: new window, noreferrer, noopener?“ ;

„Usare link che si aprono in nuova finestra senza metterli in sicurezza“

„The performance benefits of rel=noopener“

Removing rel=“noopener noreferrer“

 

Съдържание
Защо се използва rel noreferrer noopener  - външни връзки, нов прозорец
Име на публикацията
Защо се използва rel noreferrer noopener - външни връзки, нов прозорец
Описание
Автоматично появяване на атрибут rel="noreferrer noopener" в публикациите ни след като използваме атрибут target="_blank". Какво е и защо го има?
Автор
Име на сайта
Ivytechnoweb.net
Лого на сайта

Тагове:

Коментари