Kako koristiti HTML za otvaranje veze na novoj kartici

Kartice su sjajne, zar ne? Omogućuju multitaskeru u svima nama da istovremeno žonglira s hrpom mrežnih zadataka.

Kartice su sada toliko česte da će se, kad kliknete na vezu, vjerojatno otvoriti u novoj kartici.

Ako ste se ikad pitali kako to učiniti pomoću vlastitih veza, došli ste na pravo mjesto.

Sidreni element

Da biste stvorili vezu na web stranici, morate omotati element (tekst, sliku i tako dalje) u element sidro ( ) i postaviti njegov hrefatribut na URL na koji želite povezati.

Check out freeCodeCamp.

Pogledajte besplatniCodeCamp.

Ako kliknete na gornju vezu, preglednik će je otvoriti u trenutnom prozoru ili na kartici. Ovo je zadano ponašanje u svakom pregledniku.

Da bismo otvorili vezu na novoj kartici, morat ćemo pogledati neke druge atribute ostalih atributa sidrenog elementa.

Ciljani atribut

Ovaj atribut govori pregledniku kako otvoriti vezu.

Da biste otvorili vezu na novoj kartici, samo postavite targetatribut na _blank:

Check out freeCodeCamp.

Sad kad netko klikne na vezu, ona će se otvoriti u novoj kartici, ili možda novom prozoru, ovisno o postavkama preglednika te osobe.

Pitanja sigurnosti sa target="_blank"

Toplo preporučujem da rel="noreferrer noopener"elementu sidro uvijek dodate kad god koristite targetatribut:

Check out freeCodeCamp.

To rezultira sljedećim rezultatima:

Pogledajte besplatniCodeCamp.

relAtribut određuje odnos između svoje stranice i povezani URL. Ako ga postavite noopener noreferrer, sprječava se vrsta krađe identiteta poznata kao tabbabbing.

Što je tabbabbing?

Tabnabbing, koji se ponekad naziva i obrnuto, je exploit koji koristi zadano ponašanje preglednika target="_blank"za dobivanje djelomičnog pristupa vašoj stranici putem window.objectAPI-ja.

Pomoću tabbabbinga stranica na koju povežete može uzrokovati preusmjeravanje stranice na lažnu stranicu za prijavu. Većinu korisnika to bi bilo teško primijetiti jer bi fokus bio na kartici koja se upravo otvorila, a ne na originalnoj kartici s vašom stranicom.

Tada kada se osoba vrati na karticu s vašom stranicom, umjesto toga će vidjeti lažnu stranicu za prijavu i možda će unijeti svoje podatke za prijavu.

Ako ste zainteresirani da saznate više o tome kako tabbabbing funkcionira i što loši glumci mogu učiniti s eksploatacijom, pogledajte članak Alexa Yumasheva i ovaj od OWASP-a.

Ako želite vidjeti sefradni primjer, pogledajte ovu stranicu i njen GitHub repo za više informacija o exploitu i relatributu.

u sažetku

Jednostavno je koristiti HTML za otvaranje veze na novoj kartici. Trebate samo element sidro ( ) s tri važna atributa:

  1. hrefAtribut postavljen na URL stranice koju želite povezati s
  2. targetAtribut postavljen na _blankkoji govori browseru da otvorite link u novoj kartici / prozor, ovisno o postavkama preglednika
  3. relAtribut postavljen na noreferrer noopenerkako bi se spriječilo moguće zlonamjerne napade sa stranica koje vode na

Opet, evo radnog primjera HTML-a:

Check out freeCodeCamp.

Što rezultira sljedećim izlazom u pregledniku:

Pogledajte besplatniCodeCamp.

Još jednom hvala na čitanju. Sretno kodiranje.