Как да използвам 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, понякога наричан обратен tabbabbing, е експлойт, който използва поведението на браузъра по подразбиране, за target="_blank"да получи частичен достъп до вашата страница чрез window.objectAPI.

С табулиране на страница, към която се свързвате, може да доведе до пренасочване на страницата ви към фалшива страница за вход. Това би било трудно за повечето потребители да забележат, защото фокусът ще бъде върху раздела, който току-що се е отворил, а не върху оригиналния раздел с вашата страница.

След това, когато човек превключи обратно в раздела с вашата страница, вместо това той ще види фалшивата страница за вход и може да въведе данните си за вход.

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

Ако искате да видите сейфработен пример, разгледайте тази страница и нейното репо GitHub за повече информация относно експлоата и relатрибута.

в обобщение

Лесно е да използвате HTML, за да отворите връзка в нов раздел. Трябва ви само елемент anchor ( ) с три важни атрибута:

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

Отново тук е работният пример HTML:

Check out freeCodeCamp.

Което води до следния изход в браузъра:

Разгледайте freeCodeCamp.

Още веднъж благодаря за четенето. Щастливо кодиране.