Podcast o Čo sa stane, keď napíšeš adresu do prehliadača

Kapitoly

Telefónny zoznam internetu

Čo je to DNS?

Trojité podanie ruky

Čo je TLS

TLS Handshake

Požiadavka ako list

Čo je v liste?

Odpoveď od servera

Rodokmeň pre kód

Pridanie štýlu

Spojenie svetov

Interaktívna Vizualizácia

Cesta Dát na Sieti

Od Kódu k Pixelom

Keď sa Veci Pokazia

Keď sa veci pokazia

Chybové kódy a certifikáty

Zhrnutie a záver

Přepis

Peter: ...počkať, takže celý internet je v podstate len gigantický, super-rýchly telefónny zoznam? To je neuveriteľné.

Simona: Presne tak, Peter! Je to skvelá analógia. Namiesto hľadania telefónnych čísel pre mená hľadáme IP adresy pre webové stránky.

Peter: Dobre, o tomto som netušil – a myslím, že každý by to mal počuť. Počúvate Studyfi Podcast. Takže, Simona, poďme na to od začiatku. Čo sa presne stane, keď napíšem adresu do prehliadača a stlačím Enter?

Simona: Je to ako odštartovať reťazovú reakciu. Najprv prehliadač analyzuje tú adresu, ktorú si zadal, teda URL. Rozdelí si ju na protokol, napríklad https, a doménové meno, ako www.example.com.

Peter: Jasné, to dáva zmysel. Ale ako vie, kam sa má pripojiť? Počítače predsa používajú čísla, nie mená, však?

Simona: Presne tak! A tu prichádza na rad ten náš „telefónny zoznam“, ktorý sa odborne volá DNS – Domain Name System. Jeho úlohou je preložiť meno webstránky na číselnú IP adresu.

Peter: A ako ten preklad funguje? Je to nejaký jeden obrovský server, kde sú všetky adresy?

Simona: To by bolo veľmi nepraktické. Je to skôr taká štafeta. Prehliadač sa najprv pozrie do vlastnej pamäte, či tam už adresa náhodou nie je. Ak nie, opýta sa svojho „šéfa“, DNS resolvera, ktorého ti pridelil tvoj poskytovateľ internetu.

Peter: Takže môj internetový provider je v tom tiež zapojený. A čo ďalej?

Simona: Ten resolver začne pátrať. Najprv sa opýta jedného z hlavných, koreňových serverov internetu. Ten ho pošle za správcom domén najvyššej úrovne, napríklad pre .sk alebo .com.

Peter: Čiže je to taká hra na horúci zemiak, kde si prehadzujú moju požiadavku?

Simona: V podstate áno! Nakoniec sa dostanú k takzvanému autoritatívnemu serveru, ktorý má presný záznam pre example.com a povie: „Hej, IP adresa je 93.184.216.34.“ Túto adresu potom pošle späť tvojmu prehliadaču.

Peter: Fantastické. Takže teraz máme tú číselnú IP adresu. Čo nasleduje? Už sa môžeme pripojiť?

Simona: Skoro! Teraz si prehliadač a server musia formálne podať ruky. Volá sa to TCP handshake, alebo trojcestné podanie ruky, a zabezpečuje to spoľahlivé spojenie.

Peter: Podanie ruky? To znie priateľsky. Ako to vyzerá?

Simona: Predstav si to takto. Tvoj prehliadač pošle serveru správu, ktorá hovorí: „Ahoj, chcem sa pripojiť!“ To je paket SYN.

Peter: Okej, pozdravil som server.

Simona: Server odpovie: „Ahoj, počujem ťa a súhlasím s pripojením!“ To je paket SYN-ACK. Nakoniec tvoj prehliadač pošle poslednú správu: „Super, potvrdzujem!“ A to je paket ACK.

Peter: Takže SYN, SYN-ACK, ACK. A je to! Spojenie je nadviazané.

Simona: Presne tak! A toto všetko sa deje na špecifickom porte. Pre bežné webstránky je to port 80 a pre zabezpečené, s HTTPS, port 443. Po tomto podaní ruky môže začať samotné posielanie dát.

Peter: Takže, máme TCP spojenie. Ale čo presne je to 's' na konci v 'https' adrese? Je to ako nejaký VIP vstup?

Simona: Skoro! To 's' znamená 'secure' a spúšťa ďalší proces, ktorý sa volá TLS, alebo Transport Layer Security. Je to nástupca staršieho SSL.

Peter: A čo to TLS robí?

Simona: Zabezpečuje tri kľúčové veci. Po prvé, šifrovanie... takže nikto nemôže odpočúvať. Po druhé, integritu, čiže dáta sa cestou nezmenia. A po tretie, autentifikáciu.

Peter: Autentifikáciu? Akože overí, či je webstránka naozaj tá, za ktorú sa vydáva?

Simona: Presne tak! Aby si neposielal svoje údaje nejakému podvodníkovi.

Peter: Znie to ako zložitejší proces než len TCP handshake.

Simona: Je, ale je to rýchle. Volá sa to TLS handshake. Klient a server si najprv vymenia 'Hello' správy, kde sa dohodnú na verzii a šifrách.

Peter: Takže si potrasú rukami a dohodnú sa na tajnom jazyku.

Simona: Dá sa to tak povedať! Potom server pošle svoj digitálny certifikát, ktorý je ako jeho občiansky preukaz. Klient si ho overí.

Peter: A keď je všetko v poriadku?

Simona: Klient vytvorí tajný kľúč, zašifruje ho verejným kľúčom servera a pošle mu ho. Odvtedy je všetka komunikácia šifrovaná. Hotovo.

Peter: Super! Takže teraz máme bezpečný, šifrovaný tunel. Čo sa deje ďalej? Môžeme konečne poslať tú HTTP požiadavku?

Peter: Takže to celé funguje ako taká digitálna pošta. A srdcom tohto procesu je, predpokladám, HTTP.

Simona: Presne tak, Peter! Poďme sa ponoriť priamo do toho, ako táto komunikácia vlastne vyzerá.

Peter: Dobre, takže HTTP. Čo to presne znamená?

Simona: Je to Hypertext Transfer Protocol. Ale najlepšie si to predstaviť ako posielanie listu na server. Každá tvoja požiadavka je jeden samostatný list.

Peter: A server má zlú pamäť?

Simona: Presne! HTTP je bezstavový protokol. To znamená, že server si nepamätá tvoje predchádzajúce požiadavky. Každý 'list' je pre neho úplne nový.

Peter: Fajn, a čo v takom liste, teda v požiadavke, vlastne je?

Simona: Skladá sa z niekoľkých častí. Prvá je metóda – tá povie serveru, čo od neho chceme. Najčastejšie GET na získanie dát, alebo POST na odoslanie.

Peter: Čiže GET je 'daj mi stránku' a POST je 'tu máš vyplnený formulár'?

Simona: Perfektne zhrnuté! Potom tam je cesta k súboru, verzia protokolu a dôležité hlavičky. Tie obsahujú info napríklad o tvojom prehliadači alebo jazyku.

Peter: Dobre, odošleme požiadavku. Čo sa stane potom? Server odpíše?

Simona: Áno, pošle HTTP odpoveď. A v nej je najdôležitejší stavový kód. To je to slávne trojciferné číslo.

Peter: Ako napríklad 200 OK pre úspech? Alebo ešte slávnejšie... 404 Not Found?

Simona: Presne tak! 404 znamená, že server hľadal, ale nenašiel. Potom sú tu ďalšie, napríklad 500 značí chybu na strane servera.

Peter: A ak je všetko v poriadku, v odpovedi dostanem samotný obsah, napríklad HTML kód stránky.

Simona: Presne tak. V tele odpovede je presne to, čo sme si pýtali. Celý ten proces je vlastne veľmi rýchly a efektívny dialóg.

Peter: Fantastické. A keď už máme ten HTML kód, prichádza na rad prehliadač, aby ho pre nás 'namaľoval'. Poďme sa pozrieť, ako to robí.

Peter: Dobre, takže server nám poslal kopu HTML kódu. A čo teraz? Ako sa z toho stane webová stránka, ktorú vidím na obrazovke?

Simona: Skvelá otázka! Teraz prichádza na rad kúzlo prehliadača, ktorému hovoríme vykresľovanie. Najprv musí spracovať, alebo „parsovať“, ten HTML kód.

Peter: Parsovať? To znie zložito.

Simona: Vôbec nie. Predstav si, že prehliadač si ten kód číta a stavia z neho logickú štruktúru. Nazýva sa DOM, alebo Document Object Model. Je to v podstate taký rodokmeň pre všetky elementy na stránke.

Peter: Rodokmeň pre kód? Dobre, to si viem predstaviť. Takže vie, čo kam patrí.

Simona: Presne tak. Ale samotná štruktúra je dosť nudná, však? Chýbajú jej farby a štýl.

Peter: Jasné, takže teraz prichádza na rad CSS!

Simona: Áno! Súčasne s HTML prehliadač parsuje aj CSS a vytvára ďalší model — CSSOM. Ten obsahuje všetky informácie o štýle — farby, veľkosti, pozície...

Peter: Čiže máme strom pre štruktúru a strom pre štýl. A čo ďalej?

Simona: Teraz ich prehliadač spojí dokopy a vytvorí takzvaný Render Tree, alebo strom vykresľovania.

Peter: A v čom je tento tretí strom iný?

Simona: Kľúčové je, že obsahuje len tie elementy, ktoré budú na stránke naozaj viditeľné. Tie skryté jednoducho ignoruje, aby bol efektívny.

Peter: Aha, takže je to vlastne finálny plán pred samotným maľovaním na obrazovku.

Simona: Presne tak! A keď je tento plán hotový, môže sa začať kresliť. Ale do tohto procesu ešte často vstupuje jeden veľmi dôležitý hráč...

Peter: ...takže ten Render Tree je vlastne finálny plán pred samotným maľovaním na obrazovku. Ale toto je stále dosť teoretické. Dá sa tento celý proces vidieť aj v praxi?

Simona: Skvelá otázka, Peter! A odpoveď je áno. Práve preto sme pre študentov pripravili interaktívnu simuláciu, kde si môžu celú túto cestu doslova preklikať od začiatku do konca.

Peter: Super! Takže už žiadne suché diagramy a teória.

Simona: Presne tak. Je to ako sledovať krátky film o tom, čo sa deje „pod kapotou“ prehliadača, keď zadáš webovú adresu a stlačíš Enter.

Peter: Dobre, takže spustím simuláciu a zadám URL. Čo uvidím ako prvé?

Simona: Najprv animácia ukáže DNS dotaz. Krásne uvidíš, ako sa prehliadač pýta lokálnej cache, potom DNS resolvera a postupne prechádza cez root a TLD servery, až kým nenájde tú správnu IP adresu.

Peter: A hneď potom sa pripája na server?

Simona: Áno, nasleduje vizualizácia TCP handshake. To je taký digitálny „potras rukou“ medzi tvojím počítačom a serverom. Vymenia si tri správy: SYN, SYN-ACK a ACK.

Peter: Znie to ako nejaká tajná šifra na nadviazanie kontaktu.

Simona: Trochu aj je! A ak je to HTTPS stránka, uvidíš aj komplexnejší TLS handshake, kde si vymieňajú certifikáty a generujú šifrovacie kľúče. To je tá časť, ktorá zaisťuje bezpečnosť.

Peter: Okej, spojenie je nadviazané a zabezpečené. Čo sa deje ďalej?

Simona: Simulácia ti potom ukáže odoslanie HTTP požiadavky a prijatie odpovede so samotným HTML kódom. A tu začína tá vizuálna mágia.

Peter: Mágia?

Simona: Uvidíš, ako prehliadač postupne parsuje HTML a CSS, vytvára z nich DOM a CSSOM, spája ich do Render Tree a nakoniec... kúsok po kúsku vykresľuje stránku na obrazovku.

Peter: Takže doslova uvidím, ako sa tie pixely objavujú a formátujú?

Simona: Presne tak. Je to najlepší spôsob, ako pochopiť, prečo sa niekedy stránka načíta tak zvláštne a postupne.

Peter: A čo keď niečo nejde podľa plánu? Dá sa v tej simulácii aj niečo naschvál pokaziť?

Simona: Samozrejme! Experimentovanie je kľúčové. Môžeš napríklad simulovať pomalý DNS server a uvidíš, ako dlho trvá, kým sa vôbec začne niečo diať.

Peter: Takže v priamom prenose uvidím príčinu tej obávanej chyby „Server nenájdený“?

Simona: Presne. Alebo môžeš zablokovať port a sledovať, ako zlyhá TCP handshake. Pomáha to pochopiť príčiny a následky rôznych sieťových problémov v bezpečnom prostredí.

Peter: To je geniálne. Namiesto učenia sa o chybách si ich môžeme sami vytvoriť a pozorovať. Keď už teda rozumieme, ako sa stránka stavia a čo sa môže pokaziť, poďme sa pozrieť na to, ako celý tento proces zrýchliť.

Peter: Dobre, takže teraz vieme, ako by to malo ideálne fungovať. Ale poďme sa pozrieť na realitu. Čo sa najčastejšie kazí?

Simona: Skvelá otázka! Problémy môžu nastať kdekoľvek. Niekedy sa ti ani nepodarí pripojiť, napríklad kvôli firewallu alebo preťaženému serveru, ktorý odmieta spojenia.

Peter: A čo tie strašidelné varovania o nezabezpečenom pripojení, ktoré občas vidím?

Simona: To sú zvyčajne chyby TLS certifikátu. Buď je neplatný, vypršaný, alebo vydaný nedôveryhodnou autoritou. Prehliadač ťa tak chráni.

Peter: Rozumiem. A čo keď sa pripojím, ale vidím len chybu 404 Not Found?

Simona: To je HTTP stavový kód. Hovorí ti, že server ťa síce počul, ale hľadanú stránku nenašiel. Podobne 500 je chyba na serveri a 403 znamená, že nemáš prístup.

Peter: A keď sa stránka načíta, ale vyzerá úplne rozbitá?

Simona: To sú chyby priamo v kóde. Zlý HTML alebo CSS spôsobí nesprávne vykreslenie, alebo pomalý JavaScript zablokuje načítanie celej stránky.

Peter: Takže, aby sme to zhrnuli... problémy môžu byť v sieti, v certifikátoch, na serveri alebo priamo v kóde stránky. Je toho dosť.

Simona: Presne tak. Je to komplexný ekosystém a každá časť môže mať svoje muchy.

Peter: Simona, opäť raz skvelé a jasné vysvetlenie. Ďakujem ti. A ďakujeme aj vám, naši poslucháči. Toto bola posledná téma našej série o fungovaní webu. Počujeme sa nabudúce!

Simona: Majte sa dobre!