Filele sunt grozave, nu-i așa? Acestea permit multitaskerului dintre noi toți să jongleze o grămadă de sarcini online în același timp.

Filele sunt atât de frecvente acum că, atunci când faceți clic pe un link, este probabil să se deschidă într-o filă nouă.

Dacă te-ai întrebat vreodată cum să faci asta cu propriile tale legături, ai ajuns în locul potrivit.

Elementul de ancorare

Pentru a crea un link pe o pagină web, trebuie să înfășurați un element (text, o imagine și așa mai departe) într-o ancoră (<a>) element și setați-l href atributul adresei URL la care doriți să conectați.

<p>Check out <a href="https://www.freecodecamp.org/">Routech</a>.</p>

Verificați Routech.

Dacă faceți clic pe linkul de mai sus, browserul va deschide linkul în fereastra sau fila curentă. Acesta este comportamentul implicit în fiecare browser.

Pentru a deschide un link într-o filă nouă, va trebui să ne uităm la unele dintre celelalte atribute ale celorlalte atribute ale elementului de ancorare.

Atributul țintă

Acest atribut îi spune browserului cum să deschidă linkul.

Pentru a deschide un link într-o filă nouă, trebuie doar să setați target atribuit lui _blank:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">Routech</a>.</p>

Acum, când cineva face clic pe link, acesta se va deschide într-o filă nouă sau, eventual, într-o fereastră nouă, în funcție de setările browserului persoanei respective.

Preocupări de securitate cu target="_blank"

Vă recomand cu tărie să adăugați întotdeauna rel="noreferrer noopener" la elementul de ancorare ori de câte ori utilizați target atribut:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">Routech</a>.</p>

Acest lucru are ca rezultat următoarea ieșire:

Verificați Routech.

rel atributul setează relația dintre pagina dvs. și adresa URL conectată. Setarea la noopener noreferrer este de a preveni un tip de phishing cunoscut sub numele de tabnabing.

Ce este tabnabbing?

Tabnabbing, uneori numit tabnabbing invers, este un exploit care folosește comportamentul implicit al browserului cu target="_blank" pentru a obține acces parțial la pagina dvs. prin intermediul window.object API.

Cu tabnabbing, o pagină la care vă conectați ar putea determina redirecționarea paginii dvs. către o pagină de autentificare falsă. Acest lucru ar fi greu de observat pentru majoritatea utilizatorilor, deoarece accentul ar fi pe fila care tocmai s-a deschis – nu pe fila originală cu pagina dvs.

Apoi, atunci când o persoană revine la fila cu pagina dvs., va vedea în schimb pagina de autentificare falsă și ar putea introduce detaliile de autentificare.

Dacă sunteți interesat să aflați mai multe despre cum funcționează tabnabbing și ce pot face actorii răi cu exploit-ul, verificați Articolul lui Alex Yumashev iar acesta de OWASP.

Dacă doriți să vedeți un sigur exemplu de lucru, verificați acest lucru pagină si este Repo GitHub pentru mai multe informații despre exploit și rel atribut.

În concluzie

Este ușor de utilizat HTML pentru a deschide un link într-o filă nouă. Ai nevoie doar de o ancoră (<a>) element cu trei atribute importante:

  1. href atributul setat la adresa URL a paginii pe care doriți să o conectați
  2. target atribut setat la _blank, care spune browserului să deschidă linkul într-o filă / fereastră nouă, în funcție de setările browserului
  3. rel atribut setat la noreferrer noopener pentru a preveni posibilele atacuri rău intenționate din paginile către care vă conectați

Din nou, iată exemplul de lucru HTML:

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">Routech</a>.</p>

Ceea ce duce la următoarea ieșire în browser:

Verificați Routech.

Mulțumesc din nou pentru lectură. Codificare fericită.