Оригінальна публікація: How to Use HTML to Open a Link in a New Tab

Вкладки чудові, чи не так? Вони дозволяють виконувати багато завдань одночасно.

Зараз вкладки настільки поширені, що коли ви натискаєте посилання, воно, ймовірно, відкриється в новій вкладці.

Якщо ви коли-небудь вдавалися в питання, як це зробити зі своїм посиланням, то ви у правильному місці.

Елемент прив’язки

Щоб створити посилання на вебсторінці, вам потрібно обернути елемент (текст, зображення тощо) в елемент прив’язки (<a>) та встановити його атрибут href як адресу, на яку ви хочете зробити посилання.

<p>Відвідайте <a href="https://www.freecodecamp.org/ukrainian">freeCodeCamp</a>.</p>

Відвідайте freeCodeCamp.

Якщо ви натиснете на посилання вище, браузер відкриє посилання в поточному вікні або вкладці. Це поведінка за замовчуванням в кожному браузері.

Щоб відкрити посилання в новій вкладці, нам потрібно буде переглянути інші атрибути елемента прив’язки.

Атрибут Target

Цей атрибут каже браузеру, як відкрити посилання.

Щоб відкрити посилання в новій вкладці, просто встановіть атрибут target  на _blank:

<p>Відвідайте <a href="https://www.freecodecamp.org/ukrainian" target="_blank">freeCodeCamp</a>.</p>

Тепер, коли хтось клацає на посилання, воно відкривається в новій вкладці або, можливо, у новому вікні (залежно від налаштувань браузера).

Проблеми безпеки через target="_blank"

Я наполегливо рекомендую вам додавати rel="noreferrer noopener" до елемента прив’язки кожного разу, коли ви використовуєте атрибут target:

<p>Відвідайте <a href="https://www.freecodecamp.org/ukrainian" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Це призводить до наступного виводу:

Відвідайте freeCodeCamp.

Атрибут rel встановлює зв’язок між вашою сторінкою та приєднаною адресою. Значення noopener noreferrer запобігає типу фішингу, відомому як табнабінг (захоплення вкладки).

Що таке табнабінг?

Табнабінг — це експлойт, який використовує стандартну поведінку браузера з target="_blank" для отримання часткового доступу до сторінки через API window.object.

Табнабінг може спрямувати вас на підроблену сторінку. Більшості користувачів це буде важко помітити, оскільки фокус буде на вкладці, яка щойно відкрилася, а не на початковій вкладці з вашою сторінкою.

Потім людина повертається на вкладку з вашою сторінкою, натомість бачить підроблену сторінку та може ввести свої дані для входу.

Підсумки

За допомогою HTML легко відкрити посилання в новій вкладці. Вам просто потрібен елемент прив’язки (<a>) з трьома важливими атрибутами:

  1. Атрибут href, встановлений на потрібну адресу
  2. Атрибут target, встановлений на _blank, що вказує браузеру відкривати посилання в новій вкладці/вікні, залежно від налаштувань браузера
  3. Атрибут rel, встановлений на noreferrer noopener, щоб запобігти можливим зловмисним атакам

Знову ж таки, ось повний робочий приклад:

<p>Відвідайте <a href="https://www.freecodecamp.org/ukrainian" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

Що призводить до такого виводу в браузері:

Відвідайте freeCodeCamp.

Ще раз дякую, що прочитали. Щасливого програмування.