Hvordan bruke HTML for å åpne en lenke i en ny fane

Faner er gode, ikke sant? De tillater multitasker i oss alle å sjonglere med en haug med onlineoppgaver samtidig.

Faner er så vanlige nå at når du klikker på en lenke, vil det sannsynligvis åpnes i en ny fane.

Hvis du noen gang har lurt på hvordan du gjør det med dine egne lenker, har du kommet til rett sted.

Ankerelementet

For å opprette en lenke på en webside, må du pakke et element (tekst, et bilde og så videre) i et anker ( ) -element og sette hrefattributtet til URL-en du vil koble til.

Check out freeCodeCamp.

Sjekk ut freeCodeCamp.

Hvis du klikker på lenken ovenfor, vil nettleseren åpne lenken i det gjeldende vinduet eller fanen. Dette er standard oppførsel i hver nettleser.

For å åpne en lenke i en ny fane, må vi se på noen av de andre attributtene til ankerelementets andre attributter.

Målattributtet

Denne attributtet forteller nettleseren hvordan du åpner lenken.

For å åpne en lenke i en ny fane, sett bare targetattributtet til _blank:

Check out freeCodeCamp.

Nå når noen klikker på lenken, vil den åpne seg i en ny fane, eller muligens et nytt vindu, avhengig av personens nettleserinnstillinger.

Sikkerhetsproblemer med target="_blank"

Jeg anbefaler på det sterkeste at du alltid legger rel="noreferrer noopener"til ankerelementet når du bruker targetattributtet:

Check out freeCodeCamp.

Dette resulterer i følgende utdata:

Sjekk ut freeCodeCamp.

Den relegenskap setter forholdet mellom siden og den koblede URL. Å sette det til noopener noreferrerer å forhindre en type nettfisking som kalles tabnabbing.

Hva er tabnabbing?

Tabnabbing, noen ganger kalt revers tabnabbing, er en utnyttelse som bruker nettleserens standardadferd for target="_blank"å få delvis tilgang til siden din via window.objectAPI.

Med tabnabbing kan en side du lenker til føre til at siden din omdirigeres til en falsk påloggingsside. Dette ville være vanskelig for de fleste brukere å legge merke til fordi fokuset ville være på fanen som nettopp åpnet - ikke den originale fanen med siden din.

Så når en person bytter tilbake til fanen med siden din, vil de se den falske påloggingssiden i stedet og kan skrive inn påloggingsinformasjonen.

Hvis du er interessert i å lære mer om hvordan tabnabbing fungerer og hva dårlige skuespillere kan gjøre med utnyttelsen, kan du sjekke Alex Yumashevs artikkel og denne av OWASP.

Hvis du vil se en safearbeidseksempel, sjekk ut denne siden og GitHub-repoen for mer informasjon om utnyttelsen og relattributtet.

oppsummert

Det er enkelt å bruke HTML for å åpne en lenke i en ny fane. Du trenger bare et anker ( ) -element med tre viktige attributter:

  1. Den hrefattributtet satt til nettadressen til siden du vil lenke til
  2. Den targetattributtet satt til _blank, som forteller nettleseren til å åpne lenken i en ny fane / vindu, avhengig av nettleserens innstillinger
  3. Den relattributtet satt til noreferrer noopenerå forhindre mulige skadelige angrep fra sidene du lenker til

Igjen, her er arbeidseksempelet HTML:

Check out freeCodeCamp.

Hvilket resulterer i følgende utdata i nettleseren:

Sjekk ut freeCodeCamp.

Takk igjen for at du leser. God koding.