Как использовать HTML для открытия ссылки в новой вкладке

Вкладки - это здорово, не правда ли? Они позволяют каждому из нас, кто выполняет несколько задач одновременно, выполнять несколько онлайн-задач.

Вкладки сейчас настолько распространены, что, когда вы нажимаете на ссылку, вполне вероятно, что она откроется в новой вкладке.

Если вы когда-нибудь задумывались, как это сделать с помощью собственных ссылок, вы попали в нужное место.

Якорный элемент

Чтобы создать ссылку на веб-странице, вам необходимо обернуть элемент (текст, изображение и т. Д. ) В элемент anchor ( ) и установить для его hrefатрибута URL-адрес, на который вы хотите создать ссылку.

Check out freeCodeCamp.

Проверьте freeCodeCamp.

Если вы нажмете на ссылку выше, браузер откроет ссылку в текущем окне или вкладке. Это поведение по умолчанию в каждом браузере.

Чтобы открыть ссылку на новой вкладке, нам нужно взглянуть на некоторые другие атрибуты других атрибутов элемента привязки.

Целевой атрибут

Этот атрибут сообщает браузеру, как открыть ссылку.

Чтобы открыть ссылку в новой вкладке, просто установите для targetатрибута значение _blank:

Check out freeCodeCamp.

Теперь, когда кто-то нажимает на ссылку, она открывается в новой вкладке или, возможно, в новом окне в зависимости от настроек браузера пользователя.

Проблемы безопасности с target="_blank"

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

Check out freeCodeCamp.

Это приводит к следующему выводу:

Проверьте freeCodeCamp.

relАтрибут устанавливает связь между вашей страницей и связанным URL. Установка этого значения noopener noreferrerпредотвращает фишинг, известный как табнабинг.

Что такое табнаббинг?

Tabnabbing, иногда называемый обратным tabnabbing, - это эксплойт, который использует поведение браузера по умолчанию target="_blank"для получения частичного доступа к вашей странице через window.objectAPI.

При использовании tabnabbing страница, на которую вы ссылаетесь, может привести к перенаправлению вашей страницы на поддельную страницу входа. Большинству пользователей будет сложно это заметить, потому что фокус будет на только что открытой вкладке, а не на исходной вкладке с вашей страницей.

Затем, когда человек переключается обратно на вкладку с вашей страницей, он вместо этого увидит поддельную страницу входа и может ввести свои данные для входа.

Если вам интересно узнать больше о том, как работает табнабинг и что злоумышленники могут сделать с эксплойтом, ознакомьтесь со статьей Алекса Юмашева и этой статьей OWASP.

Если вы хотите увидеть сейфрабочий пример, проверьте эту страницу и ее репозиторий GitHub для получения дополнительной информации об эксплойте и relатрибуте.

В итоге

Чтобы открыть ссылку в новой вкладке, легко использовать HTML. Вам просто нужен элемент anchor ( ) с тремя важными атрибутами:

  1. hrefНабор атрибутов в URL страницы , которую вы хотите , чтобы ссылки
  2. targetАтрибут установлен _blank, который сообщает браузер , чтобы открыть ссылку в новой вкладке / окне, в зависимости от настроек браузера
  3. relНабор атрибутов для noreferrer noopenerпредотвращения возможных вредоносных атак со страниц , ссылающихся на

Опять же, вот рабочий пример HTML:

Check out freeCodeCamp.

Это приводит к следующему выводу в браузере:

Проверьте freeCodeCamp.

Еще раз спасибо за чтение. Удачного кодирования.