Вкладки чудові, чи не так? Вони дозволяють багатозадачності в усіх нас одночасно жонглювати купою онлайн-завдань.
Вкладки настільки поширені зараз, що при натисканні на посилання, швидше за все, воно відкриється в новій вкладці.
Якщо ви коли-небудь задавались питанням, як це зробити за допомогою власних посилань, ви потрапили в потрібне місце.
Якірний елемент
Щоб створити посилання на веб-сторінці, вам потрібно обернути елемент (текст, малюнок тощо ) елементом 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це запобігти такому типу фішингу, відомому як вкладки.
Що таке вкладки?
Вкладення вкладок, яке іноді називають зворотним вкладанням вкладок, - це досвід, який використовує поведінку браузера за замовчуванням, target="_blank"щоб отримати частковий доступ до вашої сторінки за допомогою window.objectAPI.
За допомогою вкладки вкладка сторінка, на яку ви посилаєтесь, може призвести до перенаправлення сторінки на фальшиву сторінку входу. Більшості користувачів це буде важко помітити, оскільки фокус буде на щойно відкритій вкладці, а не на оригінальній вкладці з вашою сторінкою.
Потім, коли людина повернеться на вкладку з вашою сторінкою, вона побачить замість цього підроблену сторінку входу та може ввести свої дані для входу.
Якщо вам цікаво дізнатись більше про те, як працюють вкладки та що погані актори можуть зробити з подвигом, перегляньте статтю Алекса Юмашева та цю, написану OWASP.
Якщо ви хочете побачити сейфробочий приклад, ознайомтеся з цією сторінкою та її репозитарієм GitHub для отримання додаткової інформації про експлойт та relатрибут.
Підсумовуючи
За допомогою HTML легко відкрити посилання на новій вкладці. Вам просто потрібен елемент anchor ( ) з трьома важливими атрибутами:
hrefНабір атрибутів в URL сторінки , яку ви хочете , щоб посилання- Встановлено
targetатрибут_blank, який повідомляє браузеру відкрити посилання в новій вкладці / вікні, залежно від налаштувань браузера relНабір атрибутів дляnoreferrer noopenerзапобігання можливих шкідливих атак зі сторінок , що посилаються на
Знову ж, ось робочий приклад HTML:
Check out freeCodeCamp.
Що призводить до наступного виводу в браузері:
Перевірте freeCodeCamp.
Ще раз спасибі за читання. Щасливого кодування.