Kā izmantot HTML, lai atvērtu saiti jaunā cilnē

Cilnes ir lieliskas, vai ne? Tie ļauj daudzuzdevumu veicējam mums visiem vienlaikus žonglēt ar virkni tiešsaistes uzdevumu.

Cilnes tagad ir tik izplatītas, ka, noklikšķinot uz saites, visticamāk, tās tiks atvērtas jaunā cilnē.

Ja kādreiz esat domājis, kā to izdarīt, izmantojot savas saites, esat nonācis īstajā vietā.

Enkura elements

Lai izveidotu saiti tīmekļa lapā, jums jāiesaiņo elements (teksts, attēls un tā tālāk) enkura ( ) elementā un jāiestata tā hrefatribūts vietrādim URL, uz kuru vēlaties izveidot saiti.

Check out freeCodeCamp.

Apskatiet freeCodeCamp.

Noklikšķinot uz iepriekš redzamās saites, pārlūkprogramma atvērs saiti pašreizējā logā vai cilnē. Tā ir noklusējuma darbība katrā pārlūkprogrammā.

Lai atvērtu saiti jaunā cilnē, mums jāaplūko daži citi enkura elementa citu atribūtu atribūti.

Mērķa atribūts

Šis atribūts pārlūkam norāda, kā atvērt saiti.

Lai atvērtu saiti jaunā cilnē, vienkārši iestatiet targetatribūtu uz _blank:

Check out freeCodeCamp.

Tagad, kad kāds noklikšķina uz saites, tā tiks atvērta jaunā cilnē vai, iespējams, jaunā logā atkarībā no personas pārlūkprogrammas iestatījumiem.

Drošības problēmas ar target="_blank"

Es ļoti iesaku vienmēr pievienot rel="noreferrer noopener"enkura elementam, kad lietojat targetatribūtu:

Check out freeCodeCamp.

Tā rezultātā ir šāda izeja:

Apskatiet freeCodeCamp.

relAtribūts nosaka attiecības starp savu lapu un ar to saistīto URL. Tā iestatīšana noopener noreferrerir novērst pikšķerēšanas veidu, kas pazīstams kā tabnošana.

Kas ir tabnabbing?

Tabnabbing, ko dažreiz sauc par reverse tabnabbing, ir izmantot, kas izmanto pārlūka noklusējuma darbību, target="_blank"lai daļēji piekļūtu jūsu lapai, izmantojot window.objectAPI.

Izmantojot tabnabbingu, lapa, uz kuru jūs izveidojat saiti, var novirzīt jūsu lapu uz viltotu pieteikšanās lapu. Lielākajai daļai lietotāju to būtu grūti pamanīt, jo galvenā uzmanība būtu pievērsta tikko atvērtajai cilnei, nevis sākotnējai cilnei ar jūsu lapu.

Tad, kad persona pārslēdzas atpakaļ uz cilni ar jūsu lapu, tā vietā tiek parādīta viltus pieteikšanās lapa un var ievadīt savu pieteikšanās informāciju.

Ja jūs interesē uzzināt vairāk par to, kā darbojas tabnabbings, un ko sliktie aktieri var darīt ar ekspluatāciju, skatiet Alex Yumashev rakstu un šo OWASP rakstu.

Ja vēlaties redzēt seifudarba piemērs, skatiet šo lapu un tās GitHub repo, lai iegūtu vairāk informācijas par izmantošanu un relatribūtu.

Kopsavilkumā

Lai atvērtu saiti jaunā cilnē, ir viegli izmantot HTML. Jums vienkārši nepieciešams enkura ( ) elements ar trim svarīgiem atribūtiem:

  1. hrefAtribūts komplekts uz lapas URL, kuru vēlaties saiti
  2. targetAtribūts iestatīts _blank, kas stāsta pārlūku, lai atvērtu saiti jaunā cilnē / logā, atkarībā no pārlūkprogrammas iestatījumos
  3. relAtribūts iestatīts noreferrer noopener, lai novērstu iespējamo ļaunprātīgu uzbrukumu no lapām saites uz

Atkal, šeit ir HTML piemērs:

Check out freeCodeCamp.

Rezultātā pārlūkprogrammā tiek parādīta šāda izeja:

Apskatiet freeCodeCamp.

Vēlreiz paldies par lasīšanu. Laimīgu kodēšanu.