Kako uporabiti HTML za odpiranje povezave na novem zavihku

Zavihki so odlični, kajne? Omogočajo večopravilnost v vseh nas, da hkrati žonglira s kopico spletnih opravil.

Zavihki so zdaj tako pogosti, da se bo, ko kliknete povezavo, verjetno odprlo v novem zavihku.

Če ste se kdaj vprašali, kako to narediti s svojimi povezavami, ste prišli na pravo mesto.

Sidrni element

Če želite ustvariti povezavo na spletni strani, morate element (besedilo, sliko itd.) Zaviti v element sidro ( ) in nastaviti njegov hrefatribut na URL, na katerega želite povezati.

Check out freeCodeCamp.

Oglejte si freeCodeCamp.

Če kliknete zgornjo povezavo, jo bo brskalnik odprl v trenutnem oknu ali zavihku. To je privzeto vedenje v vsakem brskalniku.

Če želite odpreti povezavo v novem zavihku, si moramo ogledati nekatere druge atribute drugih atributov sidrnega elementa.

Ciljni atribut

Ta atribut brskalniku pove, kako odpre povezavo.

Če želite odpreti povezavo na novem zavihku, samo nastavite targetatribut na _blank:

Check out freeCodeCamp.

Zdaj, ko nekdo klikne povezavo, se odpre v novem zavihku ali morda v novem oknu, odvisno od nastavitev brskalnika osebe.

Varnostni problemi z target="_blank"

Močno priporočam, da rel="noreferrer noopener"elementu sidra vedno dodate, kadar koli uporabite targetatribut:

Check out freeCodeCamp.

Rezultat tega je naslednji rezultat:

Oglejte si freeCodeCamp.

relAtribut določa razmerje med vašo stran in povezane URL. Če jo nastavite, noopener noreferrerje preprečiti vrsto lažnega predstavljanja, znanega kot zavijanje z zavihki.

Kaj je tabnabbing?

Tabnabbing, včasih imenovan tudi povratni tabnabbing, je podvig, ki uporablja privzeto vedenje brskalnika target="_blank"za pridobitev delnega dostopa do vaše strani prek window.objectAPI-ja.

S tabnabbingom lahko stran, na katero se povežete, preusmeri stran na lažno prijavno stran. To bi večina uporabnikov težko opazila, ker bi se osredotočili na zavihek, ki se je pravkar odprl - in ne na prvotni zavihek z vašo stranjo.

Potem, ko oseba preklopi nazaj na zavihek z vašo stranjo, bo namesto tega videla ponarejeno stran za prijavo in morda vnesla svoje podatke za prijavo.

Če vas zanima več o tem, kako deluje tabnabbing in kaj lahko slabi igralci naredijo z izkoriščanjem, si oglejte članek Alexa Yumasheva in tega, ki ga je napisal OWASP.

Če bi radi videli sefdelovni primer, za več informacij o izkoriščanju in relatributu si oglejte to stran in njeno poročilo GitHub .

V povzetku

HTML lahko enostavno odprete tako, da odprete povezavo v novem zavihku. Potrebujete le element sidro ( ) s tremi pomembnimi atributi:

  1. hrefAtribut nastavljen na URL strani, ki jo želite povezavo
  2. targetAtribut nastavljen na _blank, ki pove brskalniku, da odprete povezavo v novem zavihku / oknu, odvisno od nastavitev brskalnika
  3. relNiz atribut, da noreferrer noopenerbi preprečili morebitne zlonamerne napade od strani, ki jih povezujejo na

Še enkrat, tukaj je delovni primer HTML:

Check out freeCodeCamp.

Kar ima za posledico naslednji izhod v brskalniku:

Oglejte si freeCodeCamp.

Še enkrat hvala za branje. Veselo kodiranje.