Noopener и noreferrer: защита ссылок от уязвимостей

hannadev

Когда вы добавляете ссылку, которая открывается в новой вкладке, браузер создаёт соединение между исходной страницей и новой. Эта связь может стать источником серьёзных проблем безопасности, если её не контролировать. Именно поэтому разработчики и владельцы сайтов используют специальные атрибуты — noopener и noreferrer.

Эти атрибуты относятся к значениям параметра rel в HTML-тегах ссылок. Они помогают предотвратить различные атаки, защитить конфиденциальность пользователей и улучшить производительность сайта. Разберёмся, как они работают и почему их использование — это не просто хорошая практика, а необходимость.

Что такое атрибут rel и его значения

rel — это HTML-атрибут тега <a>, который описывает отношение между текущей страницей и страницей по ссылке. Важно понимать, что noopener, noreferrer и nofollow не являются самостоятельными атрибутами или тегами. Это значения атрибута rel, которые можно комбинировать между собой.

Документ, содержащий ссылку, называют «открывающей страницей», а тот, на который она указывает, — «целевой страницей». Когда пользователь нажимает на ссылку с атрибутом target="_blank", браузер создаёт новую вкладку или окно, где загружается целевой документ. Без защиты эта новая страница получает доступ к объекту window.opener — специальной переменной JavaScript, которая ссылается на исходный документ. Этот доступ открывает дверь для потенциальных атак.

Основные значения атрибута rel:

noopener — блокирует доступ к window.opener и защищает от атак
noreferrer — скрывает информацию о реферере и также блокирует доступ к window.opener
nofollow — указывает поисковым системам не передавать вес PageRank по этой ссылке

Noopener: защита от таб-наббинга

Одна из самых опасных уязвимостей, с которой сталкиваются пользователи, — это так называемый «таб-наббинг» (tab nabbing). Представьте ситуацию: вы находитесь на вашем банковском сайте и нажимаете на внешнюю ссылку, которая должна открыться в новой вкладке. Если разработчик сайта не использовал noopener, то открытая страница может выполнить вредоносный JavaScript-код, который изменит содержимое и адрес исходной вкладки. Вы вернётесь к ней и увидите поддельную страницу входа в банк, введёте свои учётные данные, и они попадут прямо к злоумышленнику.

noopener предотвращает эту атаку, разрывая связь между вкладками на уровне браузера. Когда вы добавляете rel="noopener" к ссылке, браузер открывает целевую страницу так, что свойство window.opener в новом окне возвращает значение null. Новая страница не может получить доступ к объекту исходного документа и, следовательно, не может его изменять.

Этот атрибут также решает проблему производительности. Без noopener браузер вынужден хранить ссылку между вкладками в памяти, что может замедлить работу исходной страницы, особенно на слабых устройствах. Когда вы применяете noopener, браузер может оптимизировать процессы и работать эффективнее.

Когда использовать noopener:

Всегда добавляйте его ко всем ссылкам с target="_blank"
Это особенно критично для внешних ссылок (на другие сайты)
Рекомендуется применять его и для внутренних ссылок для единообразия

Noreferrer: конфиденциальность плюс безопасность

noreferrer выполняет две функции одновременно. Во-первых, он блокирует доступ к window.opener точно так же, как noopener. Во-вторых, он скрывает информацию о реферере — источнике перехода пользователя.

Когда пользователь переходит по ссылке, браузер отправляет HTTP-заголовок Referer (заметьте орфографию — в HTTP это слово пишется с одной буквой «е»). Этот заголовок содержит адрес страницы, с которой произошёл переход. Например, если вы находитесь на странице https://mysite.com/article и переходите на внешний сайт, целевой сайт увидит, что трафик пришёл именно с вашей страницы. Это может быть полезно для аналитики, но одновременно это информация о пользователе, которую не всегда хочется раскрывать.

noreferrer удаляет этот заголовок из запроса, не позволяя целевому сайту узнать, откуда пришёл пользователь. Это защищает приватность посетителей вашего сайта. Кроме того, эта функция предотвращает утечку конфиденциальной информации через URL. Если на вашей странице есть параметры в адресе (например, ID пользователя или токен), они не будут раскрыты целевому сайту.

Сравнение функций noopener и noreferrer:

Функция	noopener	noreferrer
Блокирует доступ к window.opener
Скрывает реферальную информацию
Улучшает безопасность
Улучшает конфиденциальность
Влияет на производительность

Когда использовать noreferrer:

Когда нужно защитить конфиденциальность пользователей
Когда вы ссылаетесь на конкурентов или чувствительные ресурсы
Когда в URL исходной страницы могут быть личные данные
Часто применяется вместе с noopener как комбинация rel="noopener noreferrer"

Практическое применение и примеры кода

В HTML всё просто: вы добавляете атрибут rel к тегу <a> с нужными значениями. Вот как это выглядит на практике:

<!-- Только безопасность -->
<a href="https://example.com" target="_blank" rel="noopener">Ссылка</a>

<!-- Безопасность + конфиденциальность -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Ссылка</a>

<!-- Если нужно также скрыть вес ссылки от поисковых систем -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">Ссылка</a>

Один из популярных примеров — платные ссылки или ссылки на рекламные партнёров. Для таких ссылок стоит использовать комбинацию rel="nofollow noopener noreferrer". nofollow указывает поисковым системам, что вы не передаёте авторитет этой ссылке, noopener и noreferrer обеспечивают безопасность и конфиденциальность.

Современные системы управления контентом, такие как WordPress, автоматически добавляют эти атрибуты. Начиная с версии 4.7.4, когда вы выбираете опцию «Открыть в новой вкладке» при добавлении ссылки, WordPress автоматически генерирует код с rel="noopener noreferrer". Вам не нужно помнить об этом — система позаботится сама.

Примеры использования в разных сценариях:

Внешние ссылки на новую вкладку: rel="noopener noreferrer"
Ссылки на платные партнёров: rel="nofollow noopener noreferrer"
Внутренние ссылки: можно опустить, но применение не помешает
Ссылки на UGC (пользовательский контент): rel="ugc noopener noreferrer"

Поведение современных браузеров

Хорошая новость заключается в том, что технологии развиваются, и браузеры становятся умнее. Большинство современных браузеров — Chrome, Firefox, Safari и другие — автоматически применяют поведение noopener к ссылкам с target="_blank", даже если вы забудете его указать явно.

Однако это не означает, что можно перестать использовать эти атрибуты. Во-первых, остаются пользователи на старых версиях браузеров, которые не поддерживают автоматическую защиту. Во-вторых, явное указание атрибутов — это сигнал разработчикам и инструментам аналитики, что вы сознательно применяете эту защиту. В-третьих, для noreferrer автоматического применения нет — его нужно указывать явно, если вам нужна приватность.

Поэтому лучший подход — всегда явно добавлять эти атрибуты в своём коде. Это занимает всего несколько символов, но обеспечивает надёжную защиту независимо от версии браузера пользователя.

Значение для SEO и веб-стратегии

nofollow — третий важный атрибут, часто используемый вместе с noopener и noreferrer. Хотя он решает другую проблему, он часто комбинируется с остальными двумя. nofollow указывает поисковым системам (Google, Yandex и другим) не передавать авторитет сайта (PageRank) по этой ссылке.

Это полезно при ссылках на платные партнёров, спонсируемые материалы, или просто когда вы не хотите «рекомендовать» целевой сайт поисковым системам. Например, если вы пишете обзор конкурента, вы можете оставить ссылку информативной для пользователей, но скрыть её от алгоритмов Google через nofollow.

Как это работает с точки зрения SEO:

Ссылка без атрибутов — это обычная ссылка, которая передаёт вес и авторитет
С nofollow — Google не учитывает эту ссылку при ранжировании целевого сайта
С sponsored — атрибут для явно спонсируемых ссылок (более информативен для алгоритмов)
С ugc — для ссылок в пользовательском контенте (комментарии, отзывы)

Таким образом, noopener, noreferrer и nofollow решают три разные задачи: безопасность, конфиденциальность и SEO-стратегия. Часто они используются вместе для комплексного решения.

Что нужно помнить о защите ссылок

Главное правило простое: если у вас есть ссылка с target="_blank", на ней должны быть атрибуты rel="noopener noreferrer". Это стандартная практика современной веб-разработки, и её должен соблюдать каждый, кто создаёт веб-контент.

Оставить это без внимания — значит оставить потенциальную брешь в безопасности. Злоумышленники постоянно ищут такие места для атак, и почему бы не закрыть эту дверь заранее? Кроме того, заботиться о безопасности пользователей — это проявление профессионализма и уважения к аудитории вашего сайта.