Kaip naudoti HTML norint atidaryti nuorodą naujame skirtuke

Skirtukai yra puikūs, ar ne? Jie leidžia visų mūsų užduotims vienu metu žongliruoti krūva internetinių užduočių.

Skirtukai dabar yra tokie įprasti, kad, spustelėjus nuorodą, tikėtina, kad jie bus atidaryti naujame skirtuke.

Jei kada susimąstėte, kaip tai padaryti naudojant savo nuorodas, patekote į reikiamą vietą.

Inkaro elementas

Norėdami sukurti nuorodą tinklalapyje, turite apvynioti elementą (tekstą, paveikslėlį ir pan.) Inkaro ( ) elemente ir nustatyti jo hrefatributą URL, prie kurio norite susieti.

Check out freeCodeCamp.

Patikrinkite freeCodeCamp.

Jei spustelėsite aukščiau esančią nuorodą, naršyklė atidarys nuorodą dabartiniame lange arba skirtuke. Tai yra numatytasis elgesys kiekvienoje naršyklėje.

Norėdami atidaryti nuorodą naujame skirtuke, turėsime pažvelgti į kai kuriuos kitus inkaro elemento kitų atributų atributus.

Tikslinis atributas

Šis atributas nurodo naršyklei, kaip atidaryti nuorodą.

Norėdami atidaryti nuorodą naujame skirtuke, tiesiog nustatykite targetatributą į _blank:

Check out freeCodeCamp.

Dabar, kai kas nors spustelės nuorodą, ji atsidarys naujame skirtuke arba galbūt naujame lange, atsižvelgiant į asmens naršyklės nustatymus.

Su saugumu susiję klausimai target="_blank"

Primygtinai rekomenduoju visada pridėti rel="noreferrer noopener"prie inkaro elemento, kai naudojate targetatributą:

Check out freeCodeCamp.

Rezultatas yra toks:

Patikrinkite freeCodeCamp.

Šis relatributas nustato jūsų puslapio ir susieto URL santykį. Jį nustatant noopener noreferrer, siekiama užkirsti kelią sukčiavimui, vadinamam tabnabbingu.

Kas yra tabas?

Skirtukas, kartais vadinamas atvirkštiniu, yra išnaudojimas, kuris naudoja numatytąjį naršyklės elgesį, target="_blank"kad gautų dalinę prieigą prie jūsų puslapio per window.objectAPI.

Pasirinkus skirtuką, puslapis, į kurį susiejate, gali nukreipti jūsų puslapį į padirbtą prisijungimo puslapį. Daugumai vartotojų tai būtų sunku pastebėti, nes pagrindinis dėmesys bus skiriamas ką tik atsidariusiam skirtukui, o ne originaliam skirtukui su jūsų puslapiu.

Tada, kai asmuo grįžta į skirtuką su jūsų puslapiu, jis pamatys suklastotą prisijungimo puslapį ir gali įvesti savo prisijungimo duomenis.

Jei norite sužinoti daugiau apie tai, kaip veikia tabo klojimas ir ką blogi aktoriai gali padaryti išnaudojimu, peržiūrėkite Alexo Yumashevo straipsnį ir šį OWASP straipsnį.

Jei norite pamatyti seifądarbinį pavyzdį, peržiūrėkite šį puslapį ir jo „GitHub“ rinkinį, kad gautumėte daugiau informacijos apie išnaudojimą ir relatributą.

Apibendrinant

Norint atidaryti nuorodą naujame skirtuke, lengva naudoti HTML. Jums tiesiog reikia inkaro ( ) elemento su trimis svarbiais atributais:

  1. hrefAtributas rinkinys puslapio URL, kurį norite susieti su
  2. targetAtributas nustatyti _blank, kuris pasakoja naršyklę atidaryti nuorodą naujame skirtuke / Langų, priklausomai nuo naršyklės nustatymus
  3. relAtributas rinkinys noreferrer noopenerišvengti galimų kenkėjiškų atakų iš puslapių, nuoroda į

Vėlgi, čia yra veikiantis HTML pavyzdys:

Check out freeCodeCamp.

Dėl to naršyklėje pateikiama tokia išvestis:

Patikrinkite freeCodeCamp.

Dar kartą ačiū, kad skaitėte. Laimingo kodavimo.