Когда читатель переходит по ссылке или браузер загружает картинку с другого сайта, он сообщает, откуда пришёл. Это делает заголовок запроса Referer: в нём лежит адрес вашей страницы. Атрибут referrerpolicy управляет тем, сколько из этого адреса уйдёт: весь адрес, только сайт или ничего. Ниже разобрано, что делает каждое значение, где атрибут работает и чем он отличается от rel="noreferrer".
<a href="https://example.com/" referrerpolicy="origin">Сайт</a>В этой статье
- Атрибут referrerpolicy в HTML: что делает и у каких тегов работает
- Значения атрибута referrerpolicy: что отправляет каждая политика
- Атрибут referrerpolicy у ссылки: как скрыть адрес страницы
- Атрибут referrerpolicy у img, script и link: что уходит при загрузке файлов
- Атрибут referrerpolicy у iframe: что получит встроенная страница
- Атрибут referrerpolicy и rel noreferrer: чем они отличаются
- Атрибут referrerpolicy и политика всей страницы: meta и заголовок
- Как прочитать и изменить атрибут referrerpolicy через JavaScript
- Частые ошибки с атрибутом referrerpolicy
- Шпаргалка по атрибуту referrerpolicy
Атрибут referrerpolicy в HTML: что делает и у каких тегов работает
Заголовок пишется Referer с одной буквой «r»: так когда-то записали в стандарте, и ошибка осталась. Название атрибута и политики пишется правильно, с двумя «r». Если ничего не задавать, браузер сам выберет разумную политику, но часто хочется показать другую: скрыть путь внутренней страницы, не раскрывать адрес с параметрами или, наоборот, передать полный адрес партнёру.
| Тег | Чем управляет referrerpolicy | Пример записи |
|---|---|---|
<a> , <area> | Referer при переходе по ссылке | <a href="..." referrerpolicy="origin"> |
<img>, <script>, <link> | Referer при загрузке картинки, скрипта или стиля | <img src="..." referrerpolicy="no-referrer"> |
<iframe> | Referer при загрузке встроенной страницы | <iframe src="..." referrerpolicy="origin"> |
<form> , <button> | Не поддерживают: у формы для этого есть rel="noreferrer" | <form referrerpolicy="origin"> ничего не изменит |
Правила описаны в разделе стандарта HTML про политики источника перехода .
Значения атрибута referrerpolicy: что отправляет каждая политика
Всего у атрибута восемь значений. Для разбора нужны три понятия. Полный адрес это адрес страницы вместе с путём и параметрами, но без части после #. Адрес сайта это только протокол и домен. Переход с защищённого https на незащищённый http это понижение защиты.
| Значение | Тот же сайт | Другой сайт | Пример записи |
|---|---|---|---|
no-referrer | Ничего | Ничего | referrerpolicy="no-referrer" |
no-referrer-when-downgrade | Полный адрес | Полный адрес, но ничего при понижении до http | referrerpolicy="no-referrer-when-downgrade" |
origin | Адрес сайта | Адрес сайта | referrerpolicy="origin" |
origin-when-cross-origin | Полный адрес | Адрес сайта | referrerpolicy="origin-when-cross-origin" |
same-origin | Полный адрес | Ничего | referrerpolicy="same-origin" |
strict-origin | Адрес сайта | Адрес сайта, но ничего при понижении до http | referrerpolicy="strict-origin" |
strict-origin-when-cross-origin | Полный адрес | Адрес сайта, но ничего при понижении до http | referrerpolicy="strict-origin-when-cross-origin" |
unsafe-url | Полный адрес | Полный адрес | referrerpolicy="unsafe-url" |
Если атрибута нет, браузеры обычно применяют strict-origin-when-cross-origin: внутри сайта уходит полный адрес, на чужой сайт только адрес сайта. Опечатка в значении ошибкой не считается: браузер просто работает как без атрибута. Регистр букв не важен.
Пример: что уйдёт в Referer при каждой политике
Выберите политику и направление ссылки: ниже показан заголовок, который уйдёт. Страница условная. Поведение при понижении до http браузер показывает по стандарту, на странице его не проверить.
Атрибут referrerpolicy у ссылки: как скрыть адрес страницы
Чаще всего referrerpolicy пишут у ссылок на другие сайты. Тогда там не видно, с какой именно страницы пришёл читатель, или видно только сайт целиком. Для ссылок внутри сайта атрибут обычно не нужен.
<a href="https://example.com/"
referrerpolicy="no-referrer">Сайт партнёра</a>Пример: какой Referer получает открытая вкладка
Нажмите каждую ссылку: новая вкладка покажет, что она получила в Referer. Вкладка принадлежит тому же сайту, поэтому «origin» даёт только адрес сайта, «no-referrer» пустоту, а остальные полный адрес.
Атрибут referrerpolicy у img, script и link: что уходит при загрузке файлов
Картинки, скрипты и таблицы стилей тоже посылают Referer при загрузке. Если вы подключаете картинку с чужого сайта, он узнает, на какой странице она показана. Атрибут работает здесь так же, как у ссылки: картинка, скрипт и таблица стилей получают тот же заголовок, что и ссылка с той же политикой.
<img src="https://cdn.example.com/logo.png"
referrerpolicy="no-referrer" alt="Логотип">
<script src="https://cdn.example.com/app.js"
referrerpolicy="origin"></script>Некоторые службы проверяют Referer и отказывают, если его нет. Если картинка перестала загружаться после no-referrer, замените политику на origin.
Атрибут referrerpolicy у iframe: что получит встроенная страница
У тега iframe атрибут управляет заголовком при загрузке встроенной страницы: она получает тот Referer, который вы разрешили. Подробнее о самом теге в статье про iframe . Встроенная страница с политикой origin получает только адрес сайта.
<iframe src="https://example.com/widget"
referrerpolicy="origin"></iframe>Атрибут referrerpolicy и rel noreferrer: чем они отличаются
Значение rel="noreferrer" тоже прячет адрес, но делает больше: кроме заголовка оно закрывает у новой страницы доступ к открывшей её вкладке (window.opener). referrerpolicy управляет только заголовком, зато умеет отправлять и часть адреса. Подробнее о значениях rel в статье про rel .
| Что нужно | Что писать | Пример записи |
|---|---|---|
Скрыть адрес полностью и закрыть opener | rel="noreferrer" | <a href="..." rel="noreferrer"> |
| Передать только адрес сайта | referrerpolicy="origin" | <a href="..." referrerpolicy="origin"> |
Скрыть адрес, не трогая opener | referrerpolicy="no-referrer" | <a href="..." referrerpolicy="no-referrer"> |
Атрибут referrerpolicy и политика всей страницы: meta и заголовок
Политику можно задать для всей страницы сразу, чтобы не писать атрибут у каждой ссылки. Для этого есть два способа: тег meta с именем referrer и заголовок ответа сервера Referrer-Policy. Атрибут у конкретного тега сильнее обоих.
<meta name="referrer" content="origin">Referrer-Policy: origin| Способ | На что действует | Приоритет |
|---|---|---|
Атрибут referrerpolicy | На один тег | Самый высокий |
Тег meta name="referrer" | На всю страницу | Выше заголовка |
Заголовок Referrer-Policy | На всю страницу, задаёт сервер | Ниже тега meta |
| Ничего не задано | Политика браузера по умолчанию | Самый низкий |
Тег meta размещайте в самом начале head, пока браузер не начал загружать файлы.
Пример: какая политика победит
Выбирайте значения в трёх списках: ниже показано, какая политика сработает. Побеждает атрибут, затем meta, затем заголовок.
Как прочитать и изменить атрибут referrerpolicy через JavaScript
В JavaScript у ссылки, картинки и других тегов есть свойство referrerPolicy с заглавной буквой. Оно возвращает значение, приведённое к строчным буквам, а для неизвестного значения или при отсутствии атрибута пустую строку. Сам атрибут при этом остаётся в разметке как был.
const link = document.querySelector("a");
link.referrerPolicy; // "" если атрибута нет
link.referrerPolicy = "no-referrer"; // атрибут появился
link.setAttribute("referrerpolicy", "ORIGIN");
link.referrerPolicy; // "origin"
link.removeAttribute("referrerpolicy");Пример: чтение и запись свойства referrerPolicy
Нажимайте кнопки: таблица показывает свойство, наличие атрибута и его значение в разметке. У значения weird свойство пустое, а атрибут остаётся.
Частые ошибки с атрибутом referrerpolicy
Чаще всего путаются в том, что именно скрывает политика, и ждут от неё больше, чем она умеет.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
no-referrer на всех ссылках подряд | Владельцы чужих сайтов не видят, откуда пришли читатели | Использовать origin, если нужно сохранить хотя бы сайт |
Опечатка: referrerpolicy="no-refferer" | Ошибки нет, работает политика по умолчанию | Проверять запись и значение свойства referrerPolicy |
| Ждать, что атрибут скрывает адрес самой ссылки | Адрес ссылки по-прежнему виден в href | Скрывается только адрес вашей страницы |
no-referrer на ссылках внутри сайта | Сервер, проверяющий Referer, может отклонить запрос | Не задавать атрибут или взять same-origin |
unsafe-url на страницах с параметрами и ключами | Полный адрес вместе с параметрами уйдёт на чужой сайт | Выбрать origin или strict-origin-when-cross-origin |
meta name="referrer" в конце head | Файлы выше него уже могли загрузиться по другой политике | Размещать тег в начале head |
referrerpolicy у form или button | Атрибут не работает | Для формы использовать rel="noreferrer" |
Писать заголовок как Referer-Policy | Заголовок не распознан | Название заголовка Referrer-Policy, с двумя «r» |
Шпаргалка по атрибуту referrerpolicy
Всё главное об атрибуте referrerpolicy в одной таблице.
| Что | Как работает | Пример записи |
|---|---|---|
| Где пишут | У a, area, img, script, link, iframe | <a referrerpolicy="origin"> |
| Что управляет | Содержимым заголовка Referer | Referer: https://site.ru/ |
| Без атрибута | Обычно strict-origin-when-cross-origin | Свой сайт полностью, чужой только сайт |
| Скрыть всё | Заголовок не отправляется | no-referrer |
| Только сайт | Путь и параметры не уходят | origin |
| Полный адрес | Уходит вместе с параметрами, без # | unsafe-url |
| Приоритет | Атрибут, затем meta, затем заголовок сервера | Referrer-Policy: origin |
Отличие от noreferrer | rel="noreferrer" ещё закрывает opener | rel="noreferrer" |
| JavaScript | link.referrerPolicy это строка в нижнем регистре | link.referrerPolicy = "origin" |
