Ako používať HTML na otvorenie odkazu na novej karte

Karty sú skvelé, však? Umožňujú multitaskeru v nás všetkých žonglovať s hromadou online úloh súčasne.

Karty sú teraz také bežné, že keď kliknete na odkaz, je pravdepodobné, že sa otvoria na novej karte.

Ak ste niekedy premýšľali, ako to urobiť pomocou vlastných odkazov, ste na správnom mieste.

Kotviaci prvok

Ak chcete vytvoriť odkaz na webovú stránku, musíte zabaliť prvok (text, obrázok atď. ) Do prvku anchor ( ) a nastaviť jeho hrefatribút na adresu URL, na ktorú chcete vytvoriť odkaz.

Check out freeCodeCamp.

Vyskúšajte freeCodeCamp.

Ak kliknete na odkaz vyššie, prehľadávač ho otvorí v aktuálnom okne alebo na karte. Toto je predvolené správanie v každom prehliadači.

Ak chcete otvoriť odkaz na novej karte, budeme sa musieť pozrieť na niektoré z ďalších atribútov ďalších atribútov kotviaceho prvku.

Cieľový atribút

Tento atribút informuje prehliadač o tom, ako otvoriť odkaz.

Ak chcete otvoriť odkaz na novej karte, stačí nastaviť targetatribút na _blank:

Check out freeCodeCamp.

Keď teraz niekto klikne na odkaz, otvorí sa na novej karte alebo prípadne v novom okne v závislosti od nastavení prehliadača danej osoby.

Obavy o bezpečnosť s target="_blank"

Dôrazne odporúčam, aby ste vždy pridali rel="noreferrer noopener"do kotviaceho prvku vždy, keď použijete targetatribút:

Check out freeCodeCamp.

Výsledkom je nasledujúci výstup:

Vyskúšajte freeCodeCamp.

relAtribút určuje vzťah medzi vašou stránkou a prepojeného URL. Nastavením tejto možnosti noopener noreferrerje zabrániť typu phishingu, ktorý sa nazýva tabnabbing.

Čo je to tababbing?

Tababbing, niekedy nazývaný aj reverzný tabnabbing, je exploit, ktorý využíva predvolené správanie prehliadača target="_blank"na získanie čiastočného prístupu na vašu stránku prostredníctvom window.objectAPI.

Vďaka tabnabbingu by stránka, na ktorú odkazujete, mohla spôsobiť jej presmerovanie na falošnú prihlasovaciu stránku. To by si väčšina používateľov ťažko všimla, pretože by sa zamerali na práve otvorenú kartu - nie na pôvodnú kartu s vašou stránkou.

Keď sa potom osoba prepne späť na kartu s vašou stránkou, zobrazí sa jej falošná prihlasovacia stránka a môže zadať svoje prihlasovacie údaje.

Ak sa chcete dozvedieť viac o tom, ako funguje tabnabbing a čo môžu zlí herci urobiť s vykorisťovaním, prečítajte si článok Alexa Yumasheva a tento článok od OWASP.

Ak chcete vidieť trezorpracovný príklad, pozrite sa na túto stránku a jej repozitár GitHub, kde nájdete viac informácií o exploit a relatribúte.

V súhrne

Na otvorenie odkazu na novej karte je jednoduché použiť HTML. Potrebujete iba element anchor ( ) s tromi dôležitými atribútmi:

  1. hrefAtribút nastavený na adresu URL stránky, ktorú chcete prepojiť
  2. targetAtribút nastavený na hodnotu _blank, ktorá hovorí prehliadači, aby otvoriť odkaz v novom paneli / okne, v závislosti od nastavenia prehliadača
  3. relSet atribút noreferrer noopener, aby sa zabránilo možným škodlivým útokom zo stránok, ktoré odkazujú na

Opäť je tu funkčný príklad HTML:

Check out freeCodeCamp.

Výsledkom čoho je nasledujúci výstup v prehľadávači:

Vyskúšajte freeCodeCamp.

Ešte raz ďakujem za prečítanie. Šťastné programovanie.