HTML-i kasutamine lingi avamiseks uuel vahelehel

Vahekaardid on suurepärased, kas pole? Need võimaldavad meie kõigi multitaskeril žongleerida korraga hulga veebiülesannetega.

Vahelehed on nüüd nii levinud, et lingil klõpsates avaneb see tõenäoliselt uuel vahelehel.

Kui olete kunagi mõelnud, kuidas seda oma linkide abil teha, olete jõudnud õigesse kohta.

Ankurelement

Veebilehele lingi loomiseks peate elemendi (tekst, pilt ja nii edasi) mähkima ankur ( ) elemendisse ja määrama selle hrefatribuudi URL-ile, mille soovite linkida.

Check out freeCodeCamp.

Vaadake freeCodeCampi.

Kui klõpsate ülaltoodud lingil, avab brauser lingi praeguses aknas või vahekaardil. See on igas brauseris vaikekäitumine.

Lingi avamiseks uuel vahelehel peame vaatama ankurelemendi muude atribuutide mõningaid muid atribuute.

Sihtatribuut

See atribuut annab brauserile teada, kuidas linki avada.

Lingi avamiseks uuel vahelehel määrake targetatribuudiks _blank:

Check out freeCodeCamp.

Kui keegi klõpsab lingil, avaneb see uuel vahelehel või võib-olla uues aknas, sõltuvalt inimese brauseri seadetest.

Turvaprobleemid kasutajaga target="_blank"

Soovitan tungivalt alati lisada rel="noreferrer noopener"ankurelemendile alati, kui kasutate targetatribuuti:

Check out freeCodeCamp.

Selle tulemuseks on järgmine väljund:

Vaadake freeCodeCampi.

relAttribuuttisarjoja suhet oma lehele ja lingitud URL. Selle määramine on selleks, noopener noreferreret vältida sellist tüüpi andmepüüki, mida nimetatakse tabnabbinguks.

Mis on tabamine?

Vahekaartide otsimine, mida mõnikord nimetatakse ka vahekaardil tabamiseks, on ekspluateerimine, mis kasutab brauseri vaikekäitumist koos API-ga target="_blank"osalise juurdepääsu saamiseks teie lehele window.object.

Vahekaardi abil võib leht, millele linkite, suunata teie lehe võltsitud sisselogimislehele. Enamikul kasutajatel oleks seda raske märgata, sest keskendutakse just avatud vahelehele - mitte teie lehe algsele vahekaardile.

Siis, kui inimene pöördub tagasi teie lehega vahekaardile, näeb ta selle asemel võltsitud sisselogimislehte ja võib sisestada oma sisselogimisandmed.

Kui soovite rohkem teada saada, kuidas tabamine toimub ja mida halvad näitlejad saavad ära kasutada, vaadake Alex Yumashevi artiklit ja seda OWASPi artiklit.

Kui soovite näha seifitoimiv näide, selle ja selle relatribuudi kohta lisateabe saamiseks vaadake seda lehte ja selle GitHubi repot .

Kokkuvõttes

HTML-i abil on lingi avamine uuel vahelehel lihtne. Teil on vaja lihtsalt kolme olulise atribuudiga ankur ( ) elementi:

  1. hrefAtribuut seatud URL leht, mida soovite link
  2. targetAtribuut seatud _blank, mis räägib brauser avada link uuel vahelehel / akna sõltuvalt brauseri seadetes
  3. relAtribuut seatud noreferrer noopener, et vältida võimalikke pahatahtlikke rünnakuid lehtede link

Jällegi on HTML-i toimiv näide:

Check out freeCodeCamp.

Selle tulemuseks on brauseris järgmine väljund:

Vaadake freeCodeCampi.

Täname veelkord lugemise eest. Head kodeerimist.