Како користити ХТМЛ за отварање везе на новој картици

Картице су сјајне, зар не? Омогућавају мултитаскеру у свима нама да истовремено жонглира гомилом мрежних задатака.

Картице су сада толико честе да ће се, када кликнете на везу, вероватно отворити у новој картици.

Ако сте се икада запитали како то учинити помоћу сопствених веза, дошли сте на право место.

Сидрени елемент

Да бисте креирали везу на веб страници, потребно је да умотате елемент (текст, слику и тако даље) у елемент сидро ( ) и поставите његов hrefатрибут на УРЛ на који желите да повежете.

Check out freeCodeCamp.

Погледајте бесплатниЦодеЦамп.

Ако кликнете на горњу везу, прегледач ће је отворити у тренутном прозору или на картици. Ово је подразумевано понашање у сваком прегледачу.

Да бисмо отворили везу на новој картици, мораћемо да погледамо неке друге атрибуте осталих атрибута сидреног елемента.

Циљни атрибут

Овај атрибут говори прегледачу како да отвори везу.

Да бисте отворили везу на новој картици, само поставите targetатрибут на _blank:

Check out freeCodeCamp.

Сада када неко кликне на везу, она ће се отворити на новој картици или, можда, у новом прозору, у зависности од подешавања прегледача особе.

Питања безбедности са target="_blank"

Топло препоручујем да rel="noreferrer noopener"елементу сидро увек додате кад год користите targetатрибут:

Check out freeCodeCamp.

То резултира следећим резултатима:

Погледајте бесплатниЦодеЦамп.

relАтрибут одређује однос између ваше странице и на УРЛ. Ако га поставите noopener noreferrer, спречава се врста крађе идентитета позната као табабирање.

Шта је таббаббинг?

Табнаббинг, који се понекад назива и обрнуто, је експлоатација која користи подразумевано понашање прегледача target="_blank"да би делимично приступила вашој страници путем window.objectАПИ-ја.

Помоћу таббаббинга страница на коју повежете може довести до преусмеравања странице на лажну страницу за пријављивање. Већини корисника ово би било тешко да примети, јер би фокус био на картици која се управо отворила, а не на оригиналној картици са вашом страницом.

Тада када се особа врати на картицу са вашом страницом, уместо тога ће видети лажну страницу за пријављивање и можда ће унети своје податке за пријављивање.

Ако сте заинтересовани да сазнате више о томе како функционише табабирање и шта лоши глумци могу учинити са експлоатацијом, погледајте чланак Алека Иумасхева и овај од ОВАСП-а.

Ако желите да видите сефПример за рад, погледајте ову страницу и њен ГитХуб репо за више информација о екплоит-у и relатрибуту.

Укратко

Једноставно је користити ХТМЛ за отварање везе на новој картици. Треба вам само елемент сидро ( ) са три важна атрибута:

  1. hrefАтрибут скуп на УРЛ странице коју желите да линк да
  2. targetАтрибут сет на _blank, који говори бровсеру да отворите линк у новом табу / прозору, у зависности од подешавања прегледача
  3. relАтрибут скуп да noreferrer noopenerсе спречи евентуалне штетне нападе са страницама које везују на

Опет, ево радног примера ХТМЛ-а:

Check out freeCodeCamp.

Што резултира следећим излазом у прегледачу:

Погледајте бесплатниЦодеЦамп.

Хвала још једном на читању. Срећно кодирање.