Использование target=_blank в HTML5: плюсы и минусы

Быстрый ответ

Атрибут target="_blank" поддерживается в HTML5. Рекомендуем использовать его совместно с rel="noopener noreferrer", чтобы обезопасить пользователей от угроз, таких как фишинг и перехват управления вкладками.

Пример:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Пример сайта</a>

Нюансы использования target="_blank"

Применяйте target="_blank" осознанно. Его задача — увеличение удобства взаимодействия пользователя (UX) и повышение эффективности процессов работы.

Учёт особенностей работы

• Навигация на мобильных устройствах: использование target="_blank" может сбивать с толку историю браузера на мобильных устройствах, что неблагоприятно сказывается на UX.
• Работа с PDF: Современные браузеры обычно открывают PDF-файлы в текущей вкладке. Уважайте пользовательские предпочтения, не нарушая их обычных действий.
• Выбор пользователя: Разумное применение target="_blank" позволяет пользователям самим определять, как взаимодействовать с вашим контентом.

Подробнее об этом расскажет наш спикер на видео

Роль JavaScript и интерактивных элементов

JavaScript позволяет более точно контролировать открытие новых вкладок, тем самым улучшая UX. Всплывающие подсказки могут быть полезны для предоставления дополнительной информации без отвлечения внимания пользователя.

function openLink(url) {
  // "_blank" — как номер в гостинице, а "noopener noreferrer" — как табличка "Не беспокоить"✋
  window.open(url, '_blank', 'noopener noreferrer');
}

Однако не забывайте, что использование JavaScript требует обдуманного подхода, учитывающего особенности работы различных операционных систем, не только Windows.

Визуализация

Представьте target="_blank" в виде виртуального моста, который переносит пользователя со страницы вашего сайта в новое пространство, открывая его в другой вкладке:

Ваш сайт (🏠):
  – [Читать далее (🚪→🌌)]

target="_blank" действует как портал в неведомое пространство.

🏠🚪→🌌: Суть `target="_blank"` состоит в том, что пользователи могут изучать новое (🌌), не покидая ваш сайт (🏠).

Важно обеспечить безопасность пользователей, используя rel="noopener noreferrer"

Замок безопасности:
  [🚪 + 🔒(rel="noopener noreferrer")] → Обеспечивает защиту пользователя во время путешествия в "неизвестность".

Вопросы безопасности и контрмеры

Применение target="_blank" без указания rel="noopener noreferrer" может создать условия для атак, таких как эксплуатация уязвимости window.opener API. Это может позволить новой вкладке контролировать исходную страницу, что создает угрозу фишинговых атак.

Защитные меры

• rel="noopener": Предотвращает доступ новой вкладки к объекту window.opener.
• rel="noreferrer": Обеспечивает непередачу реферальных данных новой странице — важная мера защиты от доступа к window.opener.
• Проверка ссылок: Регулярно просматривайте ссылки на предмет безопасности. Это поможет предотвратить компрометацию вашего сайта.

Признанные практики в контексте

• Предпросмотр изображений: Сайты-галереи могут использовать target="_blank" для удобства просмотра изображений без закрытия основной страницы.
• Ссылки на внешние ресурсы: target="_blank" удобен для перехода между вашим контентом и внешними ресурсами.
• Конкретный контекст: Учитывайте обстоятельства каждого типичного случая. Оцените, будет ли target="_blank" полезен или приведёт к неудобствам.

Полезные материалы

1. HTML-стандарт для элемента "ссылка" — официальная спецификация элементов ссылок.
2. Документация MDN по элементу Anchor — подробное руководство и примеры использования.
3. Руководство по атрибуту target в HTML — доступное руководство по использованию target="_blank".
4. HTML-стандарт аудитории гиперссылок — техники аудита гиперссылок в сети.
5. Когда стоит использовать target="_blank — обсуждение сценариев использования target="_blank".
6. Самая недооцененная уязвимость — анализ безопасности в контексте использования target="_blank".
7. Поддержка браузерами атрибута rel='noopener noreferrer' — информация о совместимости браузеров с атрибутом rel.