При открытии ссылки в новой вкладке через атрибут target="_blank", браузер делает несколько не самых желанных для нас действий, от которых и спасают атрибуты noopener и noreferrer
Атрибут noopener предотвращает доступ новой вкладки к объекту window.opener.
Почему это важно? Без этого атрибута, сайт, открытый в новой вкладке, может получить доступ к оригинальной вкладке и потенциально выполнить вредоносный код, что представляет угрозу безопасности.
window.opener содержит слепок объекта window для страницы, с которой был открыт сайт. Информация в таком объекте всё же сильно ограничена — новая вкладка не может получить доступ, например, к переменным с прошлой страницы, зато может осуществлять навигацию по старой вкладке, что открывает огромные возможности для фишинга.
Представим, что вы находитесь на каком-нибудь some-bank.com и переходите на другой сайт с вредоносным кодом без noopener.
Тогда новая вкладка может получить доступ к pathname откуда вы перешли и к API навигации по старой вкладке, и, уже абсолютно невидимо для вас, средиректить старую вкладку с some-bank.com на some-bauk.com (подмена символа в слове bank).
Вернувшись на старую вкладку, вы увидите тот же сайт, но проблема в том, что он уже подменён на фишинг-страницу. Входите через эту страницу в личный кабинет банка и все данные улетают злоумышленникам.
Такая атака, кстати, называется tabnabbing
Атрибут noreferrer выполняет сразу две функции:
- Предотвращает доступ к window.opener, как и noopener
- Удаляет HTTP-заголовок Referer при переходе по ссылке, что скрывает источник перехода
text1Referer: https://some-bank.com/login 2
Для нас это просто дополнительная защита, которая запрещает ещё один способ просмотреть url, с которого открыта страница
Обычно эти атрибуты используют в паре. noreferrer как бы включает в себя noopener, а значит вроде бы можно использовать только его, но на практике так никто не делает. Связано это попросту с тем, что каждый браузер Referrer-Policy раньше реализовал по своему, да и так просто спокойнее что ли
Статья была полезной?
Читайте также:
— 2 минуты
Как реагировать на изменения объекта
В JavaScript обычные объекты не умеют уведомлять о своих изменениях, однако...
— 1 минута
CSS для печати страниц
Несколько лет назад я делал пет-проект — конструктор резюме. Кейс был такой...
— 1 минута
Как скачать файл с сайта
У тега ссылки <a> есть очень удобный атрибут download, который позволяет ск...