Sådan bruges HTML til at åbne et link i en ny fane

Fanerne er gode, ikke? De giver multitasker i os alle mulighed for at jonglere med en masse onlineopgaver på samme tid.

Faner er så almindelige nu, at når du klikker på et link, vil det sandsynligvis åbnes i en ny fane.

Hvis du nogensinde har spekuleret på, hvordan du gør det med dine egne links, er du kommet til det rigtige sted.

Ankerelementet

For at oprette et link på en webside skal du pakke et element (tekst, et billede osv.) I et anker ( ) -element og indstille dets hrefattribut til den URL, du vil linke til.

Check out freeCodeCamp.

Tjek freeCodeCamp.

Hvis du klikker på linket ovenfor, åbner browseren linket i det aktuelle vindue eller fane. Dette er standardadfærden i hver browser.

For at åbne et link i en ny fane skal vi se på nogle af de andre attributter for ankerelementets andre attributter.

Målattributten

Denne attribut fortæller browseren, hvordan man åbner linket.

For at åbne et link i en ny fane skal du blot indstille targetattributten til _blank:

Check out freeCodeCamp.

Når nogen nu klikker på linket, åbnes det i en ny fane eller muligvis et nyt vindue afhængigt af personens browserindstillinger.

Sikkerhedshensyn med target="_blank"

Jeg anbefaler på det kraftigste, at du altid føjer rel="noreferrer noopener"til ankerelementet, når du bruger targetattributten:

Check out freeCodeCamp.

Dette resulterer i følgende output:

Tjek freeCodeCamp.

Den relattribut sætter forholdet mellem din side og den tilknyttede webadresse. At indstille det til noopener noreferrerer at forhindre en type phishing, der kaldes tabnabbing.

Hvad er tabnabbing?

Tabnabbing, undertiden kaldet omvendt tabnabbing, er en udnyttelse, der bruger browserens standardadfærd med target="_blank"at få deladgang til din side gennem window.objectAPI'en.

Med tabnabbing kan en side, som du linker til, få din side til at omdirigere til en falsk login-side. Dette ville være svært for de fleste brugere at bemærke, fordi fokus ville være på den fane, der lige blev åbnet - ikke den originale fane med din side.

Så når en person skifter tilbage til fanen med din side, ville de se den falske login-side i stedet og muligvis indtaste deres loginoplysninger.

Hvis du er interesseret i at lære mere om, hvordan tabnabbing fungerer, og hvad dårlige skuespillere kan gøre med udnyttelsen, skal du tjekke Alex Yumashevs artikel og denne af OWASP.

Hvis du gerne vil se et pengeskabarbejde eksempel, tjek denne side og dens GitHub repo for mere information om udnyttelsen og relattributten.

Sammenfattende

Det er let at bruge HTML til at åbne et link i en ny fane. Du har bare brug for et anker ( ) -element med tre vigtige attributter:

  1. Den hrefattribut sæt til webadressen på den side, du vil linke til
  2. Den targetattribut sat til _blank, som fortæller browseren at åbne linket i en ny fane / vindue, afhængigt af browserens indstillinger
  3. Den relindstillede attribut til noreferrer noopenerat forhindre mulige ondsindede angreb fra de sider, du linker til

Igen er her arbejdseksemplet HTML:

Check out freeCodeCamp.

Hvilket resulterer i følgende output i browseren:

Tjek freeCodeCamp.

Tak igen for læsningen. Glad kodning.