Атрибут referrerpolicy тега <area>
Описание
Атрибут referrerpolicy для тега <area> определяет, какая информация о реферере (источнике перехода) будет отправляться при переходе по ссылке из области изображения-карты. Этот атрибут позволяет контролировать передачу метаданных для улучшения конфиденциальности.
<img src="partners.png" usemap="#partnermap" alt="Партнерские ссылки">
<map name="partnermap">
<area shape="rect" coords="0,0,100,50"
href="https://partner.com"
referrerpolicy="no-referrer"
alt="Партнер 1">
<area shape="rect" coords="100,0,200,50"
href="https://another-partner.com"
referrerpolicy="origin"
alt="Партнер 2">
</map>
Особенности работы:
| Значение | Поведение | Когда использовать |
|---|---|---|
| no-referrer | Не отправляет заголовок Referer | Максимальная конфиденциальность |
| origin | Отправляет только домен (без пути) | Базовое отслеживание без деталей |
| strict-origin | Origin, только для HTTPS→HTTPS | Защищенные переходы |
| origin-when-cross-origin | Полный URL для своего домена, только origin для чужих | Стандартный баланс |
| unsafe-url | Всегда полный URL (включая параметры) | Максимальная аналитика |
Рекомендации по использованию:
- Используйте
no-referrerдля внешних партнерских ссылок originподходит для базовой аналитики без деталей- Для внутренних ссылок можно использовать
origin-when-cross-origin - Избегайте
unsafe-urlдля конфиденциальных данных - Сочетайте с политикой CSP для дополнительной безопасности
Пример для разных сценариев:
<map name="securitymap">
<!-- Максимальная приватность -->
<area shape="rect" coords="0,0,100,50"
href="https://external.com"
referrerpolicy="no-referrer">
<!-- Базовый tracking -->
<area shape="rect" coords="100,0,200,50"
href="https://analytics.example.com"
referrerpolicy="origin">
<!-- Внутренние ссылки -->
<area shape="rect" coords="200,0,300,50"
href="/dashboard"
referrerpolicy="strict-origin-when-cross-origin">
</map>
Совместимость с другими технологиями:
<!-- В сочетании с CSP -->
<meta http-equiv="Content-Security-Policy"
content="referrer origin-when-cross-origin">
<!-- Переопределение для конкретной области -->
<area referrerpolicy="no-referrer">
Важные замечания:
- Приоритет над глобальными настройками referrer
- Не влияет на navigator.sendBeacon() или fetch()
- Политики могут блокироваться расширениями браузера
- Тестируйте в разных браузерах
Примечание: Правильная настройка referrerpolicy помогает балансировать между аналитикой и конфиденциальностью пользователей, особенно важно для GDPR-совместимых сайтов.