Cum funcționează Internetul?

Tu știi cum funcționează exact Internetul? Dacă nu, atunci acest articol o să te ajute să-l înțelegi mai bine și mai în detaliu, și asta te va ajuta să fii un web developer mai bun.

Dacă mai ții minte, în articolul precedent am făcut o trecere scurtă în revistă a călătoriei unui request de la browserul tău la serverul unde e stocat site-ul viorelmocanu.ro și înapoi. Astăzi vom intra puțin în detaliu, pentru că lucrurile sunt puțin mai complicate decât am explicat articolul și video-ul precedent, și e important să le înțelegi fiindcă îți vor influența job-ul de Front End Developer pentru care te pregătești.

Așa că ia-ți o băutură caldă (sau rece), așează-te comod și hai să-ncepem!

Ce se întâmplă când intri pe un site?

Dacă mai ții minte, articolul trecut îți prezentam schema asta de comunicare între calculatorul tău și serverul de unde accesează un site.

Calculatorul tău, browser-ul tău mai exact, se numește Client iar calculatorul care-ți servește site-ul se numește Server. În variantă simplificată, clientul trimite cererea către server și serverul întoarce răspunsul către client.

În mod realist însă, procesul e mai complicat de atât, și azi vom explora procesul ăsta, pentru că tu ca viitor Web Designer sau Web Developer vei profita de pe urma acestor noțiuni în momentul în care vei vrea să rezolvi niște probleme care sunt strâns legate de job-ul tău.

Ce este un browser?

E probabil cel mai important program de pe calculatorul tău dacă încerci să lucrezi în web development. Dacă nu știi ce browser folosești, intră pe https://www.whatsmybrowser.org/ și vezi informațiile pe care browserul le dă public oricărui site pe care-l vizitezi. Dacă browser-ul nu e Chrome, Firefox sau Edge ci este Opera sau Internet Exploder… ăăă… pardon, Explorer, gândește-te la un upgrade și instalează unul din cele 3 browsere menționate inițial, care sunt net superioare majorității restului browserelor disponibile. Google Chrome, Mozilla Firefox și mai nou, Microsoft Edge, sunt cele 3 cele mai populare browsere în lume și implicit și între developerii web.

Browserul rulează pe calculatorul tău, fie el Mac sau PC, sau pe telefonul tău, fie el Android sau iOS, și îți face legătura cu site-urile de pe Internet. El are tot felul de facilități, inclusiv faptul că dacă tastezi în bara de adresă un site sau o frază, dă search automat folosind motorul de căutare ales (eu personal recomand Google sau DuckDuckGo).

Browserul e centrul de testare a muncii tale și ar trebui să-l tratezi cu respect și să ai grijă de el, și să nu instalezi orice plugin-uri ți se par ție utile. Instalează însă uBlock Origin, care e un ad blocker care te va salva de multe bătăi de cap și scripturi inutile. Nu uita însă să-l dezactivezi pe site-urile pe care lucrezi ca să nu ai probleme. În afară de asta, limitează numărul de plugin-uri pe care le ai în browser, ca să nu-l îngreunezi.

Domeniu vs web server vs website vs webpage vs search engine

Domeniul e numele ușor de ținut minte (în mod ideal) compus preponderent din litere, un punct și un Top Level Domain (sau TLD). Spre exemplu: domeniul youtube.com e compus din youtube, un punct plus TLD-ul, care e com. Uneori, se pune înaintea domeniului și un subdomeniu, cum este www – și iese www.youtube.com (care e echivalent cu youtube.com în general).

Dacă vrei și tu un domeniu al tău, îl poți cumpăra. Sfatul meu e ca pentru domeniile .ro să folosești exclusiv site-ul RoTLD.ro și pentru restul domeniilor, să folosești un registrar (pentru că așa se numește compania de unde îți cumperi – sau îți înregistrezi – domenii) de încredere, cum e GoDaddy sau NameCheap. Înregistrarea asta e doar o procedură legală, dacă vrei, dar nu produce efecte dacă nu legi domeniul de un Hosting. Hosting-ul este o altă companie (de cele mai multe ori) de unde poți închiria sau cumpăra o bucățică de server unde îți poți stoca – sau „hosta” – site-urile tale. Nu doar unul, ci poate mai multe. Ca să faci legătura dintre hosting și registrar, trebuie ca în registrar să salvezi nameserverele hosting-ului. Hai să vedem cum se face legătura și cum funcționează exact procesul de accesare a unui site folosind browser-ul tău.

Metafora rețetei de pizza (sau epopeea DNS-ului)

Imaginează-ți că încercarea ta de a încărca un site în browser e similară cu încercarea ta de a găti o pizza.

Așa, ziceam de pizza. Presupunem că nu ai ingredientele sau rețeta, știi doar că vrei să faci o pizza. Faptul că îți pui asta în minte și te apuci de acest lucru e echivalent cu a tasta în bara de adresă a browser-ului tău numele site-ului dorit, spre exemplu YouTube.com.

Așa cum am descoperit în cursul precedent, felul cum se identifică dispozitivele între ele pe Internet e prin adresa lor IP (sau șirul de adrese IP prin care se poate ajunge dintr-o parte în alta). Presupunem că tu n-ai mai intrat niciodată pe site-ul YouTube.com, deci sistemul tău de operare sau browserul tău nu au informația asta în cache, adică în memoria lor de scurtă durată. E ca și cum te-ai mutat într-un oraș sau cartier nou și nu știi unde e supermarket-ul cel mai apropiat, de unde să-ți iei ingredientele pentru pizza.

Ce știi când nu cunoști locația unui magazin? Îl cauți pe hartă, nu? Ei bine, procesul ăsta de căutare a locației exacte a magazinului care conține ingredientele pentru pizza e echivalent cu procesul de căutare într-un Domain Name Server, sau DNS. Căutarea asta e ceva mai complexă, și trece prin mai multe etape, de la resolver-ul ISP-ului tău la root-ul domeniului și apoi la serverul Top Level Domain (TLD) al domeniului (în cazul YouTube.com e vorba de root-ul domeniului .com iar în cazul ViorelMocanu.ro spre exemplu, e vorba de root-ul domeniului .ro – adică un server al RoTLD). Acesta din urmă știe „nameserverele” domeniului căutat, spre exemplu: ns1.youtube.com sau ns2.youtube.com, care sunt „autoritatea” care stochează legătura dintre domeniu și IP. Tu când îți cumperi un domeniu și îl hostezi undeva, salvezi în registrar (adică în site-ul unde ai înregistrat domeniul) nameserverele, și registrarul le trimite la serverul TLD pentru stocare.

Serverele DNS ale hosting-ului care găzduiește YouTube.com sau ViorelMocanu.ro sunt cele care știu exact IP-ul la care trebuie să se ducă browserul tău să descarce site-urile respective. DNS-urile sunt servere speciale de pe Internet care sunt de obicei administrate de servicii de hosting și ale căror nameservere corelează domeniul căutat cu IP-ul acelui domeniu, în general.

Asta e călătoria făcută de resolver ca să „rezolve” domeniul YouTube.com care are „soluția” la IP-ul 142.250.185.142. Acum că browserul tău știe că găsește site-ul la adresa respectivă IP, e ca și cum ai fi găsit și tu adresa exactă a magazinului cu ingrediente de pizza pe hartă.

E timpul pentru inevitabila călătorie la magazin să iei ce trebuie. Când cobori în fața blocului, imaginează-ți că strada e conexiunea ta la Internet – toate străzile din lume (cel puțin de pe un continent) sunt interconectate între ele, la fel cum e conexiunea ta la Internet. Așa că te urci în mijlocul tău de locomoție, care în cazul nostru nu e o mașină, bicicletă sau motocicletă, ci protocoul TCP/IP, sau Transmission Control Protocol over Internet Protocol. Asta e metoda de transport preferată pe Internet și ea guvernează practic cum se transmit datele pe Internet, și e responsabilă cu împărțirea informațiilor pe pachete mici de date.

Odată ajuns la destinație, intri și îți dai seama că nu știi lista de cumpărături pentru ingredientele unei pizza. Când intri în magazin, întrebi pe cineva dacă știe ingredientele pentru pizza – pardon, site-ul YouTube.com. Ești forțat să întrebi într-o limbă ciudată, dar universală numită HTTP (sau HyperText Transfer Protocol) pe care o știu toți angajații magazinelor de ingrediente de pizza (sau de site-uri). Oricum, primești răspunsul rapid (timpul de răspuns depinde de cât de ocupați sunt angajații magazinului cu alți clienți sau cu a-și aduce aminte de site-ul menționat – respectiv de rețeta de pizza pe care o cauți, ca în viața reală). Nu primești lista completă, primești doar locația exactă a fișierului de tip index, adică a HTML-ului care se regăsește la rădăcina site-ului YouTube. În acesta ai și text, dar și o listă completă de ingrediente pentru a recompune toată rețeta căutată la tine în browser.

Spre deosebire de viața reală, ingredientele tale sunt luate gratuit de la magazin și vin singure în propriul lor mijloc de transport: în pachete TCP, de la magazin la tine acasă, pe drumuri diferite (ca să optimizeze timpul de livrare și să evite aglomerațiile). Imaginează-ți că ești ghid turistic pentru un grup de 1000 oameni care vor să viziteze Muzeul Național de Artă plecând din Aeroportul Otopeni într-o duminică seara. E mult mai eficient să-i trimiți cu orice mijloc de transport preferă (taxi, Uber, Bolt, metrou, tren, biciclete, scutere, trotinete electrice, etc) ca să evite cum pot aglomerația și să își optimizeze singuri traseul decât să închiriezi un microbuz imaginar cu 1000 locuri și să-i trimiți pe toți odată. Fix așa ajung și ingredientele la destinație mai eficient dacă sunt împărțite în bucăți mici și trimise pe rute alternative care ajung în același loc dar profită de orice oportunitate să folosească scurtături. Odată ce ingredientele ajung la destinație, browserul folosește rețeta din index.html, pornește cuptorul, asamblează pe rând toate ingredientele pizzei, o coace și ți-o servește. Asta-nseamnă că browserul recompune elementele componente ale site-ului și îl afișează integral. Acum… depinzând de ce site vrei să accesezi, există și niște reguli de securitate de care site-urile ar trebui să țină cont.

Metafora instalatorului (despre siguranța prin SSL)

Să presupunem că nu vrei să accesezi YouTube.com ci un magazin online, și tocmai ai plasat o comandă, urmând să îți bagi datele de card. E un moment sensibil, în care comunicarea dintre client, care e browser-ul tău, și server trebuie să fie cât se poate de securizată, ca să nu pună altcineva mâna pe datele cardului tău.

Pentru securizarea comunicării, există standardul Secure Sockets Layer (SSL) care implementează protocolul HTTPS (HTTP Securizat). Cum te prinzi că un site are HTTPS activ? În stânga barei de adresă poți găsi un lacăt care dacă există și e „închis” înseamnă că ai o conexiune securizată prin HTTPS. Ceea ce e un lucru bun. Hai să vedem de ce. Ai nevoie de HTTPS pentru 3 motive: intimitate, integritate și identificare.

Intimitatea

Când trimiți datele de card de la browserul de acasă către serverul magazinului online, există oameni care pot să se „interpună” între tine și server, în diverse locuri: în router-ul tău, în ISP sau în alte locuri susceptibile de pe drum. Faptul că sunt acolo înseamnă că au acces la informațiile care circulă pe acolo. Nu se întâmplă des, dar când se întâmplă și site-ul pe care ești implementează HTTP dar nu HTTPS, toate datele trimise de tine sunt trimise „în clar”, deci oricine le interceptează le poate citi direct. Asta înseamnă că-ți vede numărul cardului, data de expirare și CVV-ul și îți poate apoi folosi cardul să cumpere lucruri pe banii tăi. Dacă în schimb e HTTPS-ul activ, comunicarea dintre browserul tău și server sunt criptate, adică sunt codificate cu o cheie de decodificare pe care o au doar browser-ul și serverul cu care comunici. Asta-nseamnă că oricine se interpune și copiază datele trimise va vedea un cod secret în loc de datele cardului tău, și n-o să poată decodifica informația.

Integritatea

Alt exemplu: dacă vrei să-i trimiți un mail șefului tău și folosești un client de mail fără HTTPS, cineva se poate interpune între tine și serverul de mail, poate citi mesajul de la tine și îl poate SCHIMBA fără ca tu să știi, denaturând astfel mail-ul. Cine știe ce primește atunci șeful tău în loc de mail-ul pe care i l-ai scris tu. Dacă ai fi avut HTTPS, chiar dacă hackerul malițios ar fi vrut să schimbe mesajul, n-ar fi putut pentru că orice modificare a mesajului criptat original declanșează o alertă în sistem și mesajul nu mai e citit la destinație dacă e denaturat, ceea ce îți previne ție niște dureri de cap. Exemplul ăsta de atac se numește „omul din mijloc” sau în engleză „man in the middle”.

Identificarea

Ultimul exemplu: dacă folosești HTTPS, serverul te poate identifica cu certitudine și poate spune 100% sigur că tu ai făcut o anumită acțiune. Toate mesajele trimise de browserul tău conectat prin HTTPS la un server sunt semnate cu o semnătură securizată care îți identifică unic browserul. Dar și invers: poți identifica și tu 100% sigur că site-ul pe care ești e cel pe care-l vrei. Asta-ți garantează faptul că nu poți confunda un site cu altul, cum se practică în atacuri de tip phishing în care hackerii malițioși fac un site care seamănă cu pagina ta uzuală de internet banking spre exemplu, ca să-ți ia datele de conectare și să-ți fure banii. Dacă un site NU folosește HTTPS, treaba asta e văzută de browser și de tine foarte simplu, datorită lipsei lacătului din stânga domeniului. Mai mult, dacă un site are certificat SSL și pretinde că e alt site, certificatul e invalid și browserul te avertizează de acest lucru afișând un lacăt roșu, deschis. Dacă dai click pe lacăt, poți vedea detalii legate de certificat, cine l-a emis, cine l-a validat și când a fost emis, etc.

Deci așa te protejezi în timp ce accesezi site-uri pe Internet.

Recapitulare și temă

Azi am învățat despre HTTP și HTTPS, despre browsere, domenii, servere, hosting-uri și DNS-uri.

Ăsta e momentul perfect să îți dau o temă pentru acasă. Răspunde-mi în comentarii la întrebările următoare:

• Ce este un client?
• Ce este un server?
• Ce este un website?
• Ce este un browser?
• Ce este o cerere DNS?
• Ce browser folosești acum?
• Cu cuvintele tale, explică ce se întâmplă când accesezi site-ul google.com.

Tocmai am terminat a treia lecție din cursul de Front End Development în Română. Dacă sunt lucruri pe care nu le-ai înțeles și vrei să îmi adresezi o întrebare, scrie mai jos în comentarii și îți răspund cât pot de repede!

În cazul în care ți-a plăcut acest articol și video, dă un Share tuturor prietenilor tăi care ar putea învăța ceva nou din lecția de azi. Dacă nu ești încă abonat la canalul de YouTube și vrei să primești video-urile mele viitoare, apasă aici pe Subscribe, clopoțel și alege Toate Notificările, ca să primești tot ce urmează să public în viitor.

Vrei să te angajezi în domeniu ca urmare a parcurgerii cursului ăsta? Găsești toate lecțiile din curs chiar aici »