Полное руководство: открытие HTML-ссылок в новой вкладке

Чтобы HTML-ссылка открывалась в новой вкладке вместо текущей, необходимо добавить атрибут target="_blank" в тег-якорь. Полный код должен выглядеть следующим образом:

<a href="http://your_url_here.html" target="_blank">Ссылка</a>

Это указывает браузеру открывать связанный документ в новой вкладке или окне, а не переходить от текущей страницы.

Содержание

• Как использовать атрибут target
• Понимание различных значений target
• Соображения безопасности при использовании target=“_blank”
• Лучшие практики для внешних ссылок
• Полные примеры
• Альтернативные подходы
• Совместимость с браузерами

Как использовать атрибут target

Атрибут target в HTML указывает, где открывать связанный документ. При установке target="_blank" вы указываете браузеру открывать ссылку в новом контексте просмотра, обычно в новой вкладке или окне [1].

Синтаксис прост:

<a href="https://example.com" target="_blank">Посетить Example</a>

Согласно Mozilla Developer Network, атрибут target работает с элементом <a> для контроля загрузки связанного контента. Поведение по умолчанию (когда target не указан) - открытие ссылки в той же вкладке или окне [3].

Понимание различных значений target

Помимо _blank, существует несколько других значений target, которые можно использовать:

• _self: Открывает ссылку в той же вкладке (поведение по умолчанию)
• _blank: Открывает ссылку в новой вкладке или окне
• _parent: Открывает ссылку в родительском фрейме
• _top: Открывает ссылку в полном теле окна

Для вашей конкретной задачи _blank является правильным выбором. Современные браузеры, такие как Chrome, Firefox, Safari и Edge, по умолчанию будут открывать ссылки с target="_blank" в новых вкладках [5].

Соображения безопасности при использовании target=“_blank”

Использование target="_blank" без надлежащих мер безопасности может создать уязвимости, известные как “обратный tabnabbing” или “tabnabbing”. Это происходит, когда связанная страница может получить доступ к вашей исходной странице через свойство window.opener и потенциально перенаправить пользователей на вредоносные сайты [7].

Как объясняется в документации Chrome Developer, ссылки на кросс-ориджин назначения небезопасны без надлежащих атрибутов безопасности [4].

Риск безопасности

При использовании target="_blank" новая вкладка сохраняет ссылку на исходную страницу через window.opener. Это позволяет новой странице:

• Получать доступ к объекту window исходной страницы
• Потенциально перенаправлять исходную страницу на вредоносный сайт
• Выполнять JavaScript на исходной странице

Лучшие практики для внешних ссылок

Чтобы обеспечить безопасность при использовании target="_blank", всегда следует включать атрибут rel с соответствующими значениями:

Использование rel=“noopener”

<a href="https://example.com" target="_blank" rel="noopener">Посетить Example</a>

Атрибут rel="noopener" предотвращает доступ связанной страницы к вашей странице через window.opener [7]. Согласно Mathias Bynens, rel="noopener" является необходимым для безопасности при открытии внешних ссылок в новых вкладках [6].

Использование rel=“noreferrer”

<a href="https://example.com" target="_blank" rel="noreferrer">Посетить Example</a>

Атрибут rel="noreferrer":

• Предотвращает доступ связанной страницы к вашей странице через window.opener
• Удаляет HTTP-заголовок Referer при нажатии на ссылку
• Предоставляет дополнительную защиту приватности

Комбинирование обоих для максимальной защиты

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Посетить Example</a>

Как объясняет Elementor, комбинирование noopener и noreferrer обеспечивает максимальную безопасность и гибкость [8].

Полные примеры

Вот практические примеры безопасной реализации ссылок, открывающихся в новой вкладке:

Базовая ссылка в новой вкладке

<a href="https://google.com" target="_blank">Открыть Google в новой вкладке</a>

Безопасная внешняя ссылка (Рекомендуется)

<a href="https://github.com" target="_blank" rel="noopener noreferrer">
    Посетить GitHub
</a>

Ссылка на локальный файл в новой вкладке

<a href="/documents/report.pdf" target="_blank" rel="noopener noreferrer">
    Скачать отчет (Новая вкладка)
</a>

Ссылка на email в новой вкладке

<a href="mailto:someone@example.com" target="_blank" rel="noopener noreferrer">
    Отправить email
</a>

Альтернативные подходы

Альтернатива с использованием JavaScript

Также можно добиться открытия в новой вкладке с помощью JavaScript:

<a href="#" onclick="window.open('https://example.com', '_blank', 'noopener noreferrer'); return false;">
    Посетить Example
</a>

Этот подход дает больше контроля, но требует включенного JavaScript.

Метод Window.open()

function openInNewTab(url) {
    window.open(url, '_blank', 'noopener,noreferrer');
}

// Использование
<a href="#" onclick="openInNewTab('https://example.com'); return false;">
    Посетить Example
</a>

Совместимость с браузерами

Атрибут target="_blank" поддерживается всеми современными браузерами:

• Chrome: Полная поддержка
• Firefox: Полная поддержка
• Safari: Полная поддержка
• Edge: Полная поддержка
• Internet Explorer: Частичная поддержка (работает, но может не открываться в новой вкладке последовательно)

Для rel="noopener" и rel="noreferrer":

• Chrome: Поддерживается с 2016 года
• Firefox: Поддерживается с 2016 года
• Safari: Поддерживается с 2016 года
• Edge: Поддерживается с 2016 года

Согласно обсуждениям на Stack Overflow, большинство современных браузеров по умолчанию надежно открывают ссылки с target="_blank" в новых вкладках [5].

Заключение

Чтобы HTML-ссылка открывалась в новой вкладке, просто добавьте target="_blank" в ваш тег-якорь. Для максимальной безопасности всегда включайте rel="noopener noreferrer" для предотвращения потенциальных уязвимостей, таких как обратный tabnabbing.

Ключевые выводы:

1. Используйте target="_blank" для открытия ссылок в новых вкладках
2. Всегда добавляйте rel="noopener noreferrer" для безопасности
3. Этот подход работает во всех современных браузерах
4. Комбинация защищает как от рисков безопасности, так и от рисков для приватности

Ваш финальный код должен выглядеть так:

<a href="http://your_url_here.html" target="_blank" rel="noopener noreferrer">Ссылка</a>

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

Источники

1. How to Use HTML to Open a Link in a New Tab - freeCodeCamp
2. html - Open link in new tab or window - Stack Overflow
3. How To Use The To Make Links & Open Them Where You Want! - html.com
4. Links to cross-origin destinations are unsafe - Chrome Developers
5. hyperlink - How to open link in a new tab in HTML? - Stack Overflow
6. About rel=noopener - Mathias Bynens
7. How to Make Links Open in a New Window or Tab - thesitewizard.com
8. What Does The rel=“noopener noreferrer” Tag Mean? - Elementor