Когда внешним ссылкам нужны атрибуты noopener и noreferrer, а когда нет

Что делают эти два атрибута

Атрибут noopener, добавленный к ссылке, открывающейся в новой вкладке, отключает связь между страницей, с которой вы ушли, и страницей, куда пришли. Без него новая вкладка получает доступ к объекту window.opener, то есть к объекту окна исходной страницы. Это означает, что скрипт на стороннем сайте теоретически может узнать адрес исходной страницы, переписать её содержимое или даже перенаправить пользователя обратно на вредоносный адрес.

Атрибут noreferrer работает иначе: он запрещает браузеру передавать заголовок Referer при переходе. Заголовок Referer сообщает принимающему серверу, с какой страницы пришёл посетитель. Для владельца сайта это может быть нежелательно, если ссылка ведёт на страницу с чувствительным контекстом, например на форму входа в личный кабинет или на платёжный шлюз.

Когда атрибуты действительно нужны

Основная ситуация, когда noopener полезен, связана со ссылками, открывающимися в новой вкладке, на сайты, которым вы не доверяете полностью. Если пользователь кликнул по ссылке на сторонний сервис и тот сервис содержит уязвимый или вредоносный скрипт, наличие window.opener даёт этому скрипту рычаг воздействия на исходную страницу. Для владельца сайта это означает риск того, что посетитель, вернувшись в исходную вкладку, окажется не там, где ожидал.

noreferrer имеет смысл там, где контекст перехода сам по себе несёт информацию. Например, если ссылка ведёт на страницу входа в чужой сервис и в адресе исходной страницы есть параметры, которые вы не хотите передавать третьим лицам. В таких случаях атрибут закрывает один из каналов утечки.

Когда атрибуты избыточны

Ссылки на собственные страницы, на страницы дочерних проектов или на официальные ресурсы, которые вы контролируете, обычно не требуют этих атрибутов. Если вы открываете в новой вкладке страницу на своём же домене, риск взаимодействия через window.opener минимален, а заголовок Referer между страницами одного сайта не несёт чувствительной информации.

Также избыточны атрибуты на ссылках, которые открываются в той же вкладке, без параметра target="_blank". Атрибут noopener по определению работает только при переходе в новое окно или вкладку. Добавлять его к обычным ссылкам не имеет смысла.

Как проверить текущее поведение

Откройте ссылку, которая вас интересует, в новой вкладке. На странице, куда вы перешли, запустите консоль разработчика и введите window.opener. Если атрибут noopener присутствует, результат будет null. Если атрибута нет, вы увидите объект окна исходной страницы, и это подтверждает, что связь между вкладками установлена.

Чтобы проверить noreferrer, откройте исходную страницу в режиме отладки сети, перейдите по ссылке и посмотрите, передаётся ли заголовок Referer в запросе к принимающему серверу. При наличии атрибута заголовок будет пустым или отсутствовать.

Практический чек-лист для владельца сайта

Пройдитесь по всем внешним ссылкам на сайте и отметьте те, которые открываются в новой вкладке. Для каждой такой ссылки определите, кому принадлежит принимающий сайт и насколько он доверен. Ссылки на сторонние формы входа, платёжные страницы, сервисы, где пользователь вводит личные данные, являются приоритетом для добавления noopener и, при необходимости, noreferrer.

Ссылки, ведущие на собственные ресурсы или на официальные партнёрские сайты с понятной политикой безопасности, можно оставить без атрибутов, если вы не видите конкретной причины передавать контекст перехода. Читаемость кода тоже имеет значение: избыточное дублирование атрибутов на сотнях ссылок усложняет поддержку.