Podcast na Co se stane, když napíšeš adresu do prohlížeče

Kapitoly

Víc než jen kliknutí

Internetový telefonní seznam

Slušné vychování na síti

Objednávka a doručení

Skládání webového puzzle

Trojcestný handshake

Zabezpečení pomocí TLS

HTTP požadavek a odpověď

Nejčastější mýty o webu

Simulace v praxi

Závěrečné shrnutí

Přepis

Tomáš: Většina lidí si myslí, že když napíšete adresu webu a zmáčknete Enter, váš počítač se prostě... přímo spojí s tou stránkou. Jako přímý telefonát.

Lucie: Ale ve skutečnosti je to spíš jako poslat detektiva přes půl světa, aby našel tajné telefonní číslo. Pak navázat super formální, tříkrokový rozhovor jenom proto, abyste si řekli „ahoj“, a teprve potom se zeptat na to, co vlastně chcete.

Tomáš: Tak to zní o dost komplikovaněji. A přesně na tenhle zákulisní tanec dat se dnes podíváme. Posloucháte Studyfi Podcast.

Lucie: Přesně tak. Jmenuju se Lucie a jsem tu, abychom si tenhle proces rozebrali krok za krokem. A nebojte, je to jednodušší, než to zní.

Tomáš: Dobře, takže kde ten náš „detektiv“ začíná? Řekněme, že chci jít na... třeba www.example.com.

Lucie: První věc, kterou tvůj prohlížeč musí udělat, je zjistit, kde ten web fyzicky bydlí. Prohlížeče totiž nerozumí jménům jako example.com, ale potřebují číselnou IP adresu. Něco jako 93.184.216.34.

Tomáš: A k tomu slouží DNS, že? Slyšel jsem to, ale nikdy jsem úplně nepochopil, co to je.

Lucie: Přesně. DNS, neboli Domain Name System, je v podstatě obrovský telefonní seznam celého internetu. Když zadáš adresu, prohlížeč se nejdřív podívá do vlastní paměti, jestli tam tu IP adresu už náhodou nemá z minula.

Tomáš: To dává smysl, aby se neptal pokaždé znovu.

Lucie: Přesně. Pokud ji nenajde, zeptá se takzvaného lokálního DNS serveru, což je obvykle server tvého poskytovatele internetu. A tady začíná ta detektivka. Pokud ani tenhle server adresu nezná, rozběhne se řetězec dotazů.

Tomáš: Jako v nějakém špionážním filmu?

Lucie: Skoro. Zeptá se hlavního, „kořenového“ serveru. Ten mu řekne: „Já nevím přesně, ale na domény .com se zeptej tady.“ Tak se zeptá tam. Ten další server mu řekne: „Aha, na example.com se zeptej támhletoho autoritativního serveru.“

Tomáš: A ten už to konečně ví?

Lucie: Ten už to musí vědět! Odpoví tou správnou IP adresou, prohlížeč si ji uloží a konečně ví, kam má „zavolat“.

Tomáš: Dobře, takže máme číslo. Co teď? Prostě zavolám a začnu křičet, co chci?

Lucie: To by moc dobře nefungovalo. Teď přichází na řadu to slušné vychování, o kterém jsem mluvila. Jmenuje se to TCP handshake. Je to proces ve třech krocích, jak navázat spolehlivé spojení.

Tomáš: Tříkrokový pozdrav?

Lucie: Přesně tak. Tvůj prohlížeč pošle serveru zprávu, takový paket, kde říká: „Ahoj, chci se připojit.“ Říká se tomu SYN. Server odpoví: „Jasně, slyším tě a taky se chci připojit.“ To je SYN-ACK. A nakonec tvůj prohlížeč řekne: „Super, rozumím, jsme spojeni.“ A to je ACK.

Tomáš: SYN, SYN-ACK, ACK. To je jako... „Klepu.“ „Pojďte dál.“ „Děkuji, už jdu.“

Lucie: To je naprosto dokonalá analogie! A pokud je stránka zabezpečená, tedy začíná na https, proběhne ještě jeden, o něco složitější „pozdrav“, takzvaný TLS handshake. Ten zajistí, že veškerá komunikace mezi tebou a serverem bude šifrovaná a nikdo ji nemůže odposlouchávat.

Tomáš: Takže jsme se slušně pozdravili a máme bezpečné spojení. Teď si konečně můžeme říct o tu stránku?

Lucie: Konečně! Prohlížeč teď pošle takzvaný HTTP požadavek. Je to v podstatě textová zpráva, která říká něco jako: „Hej servere, prosím tě, pošli mi obsah hlavní stránky.“

Tomáš: A server odpoví?

Lucie: Přesně. Server zpracuje požadavek a pošle zpátky HTTP odpověď. Ta obsahuje jednak stavový kód – slavné 200 OK znamená, že je vše v pořádku, zatímco 404 Not Found znamená, že stránka neexistuje...

Tomáš: Tu znám až moc dobře.

Lucie: Kdo by neznal. A hlavně ta odpověď obsahuje samotný obsah stránky, tedy HTML kód. A tady začíná ta poslední, magická část.

Tomáš: Magická? Myslel jsem, že už jsme skoro u konce.

Lucie: Jsme, ale tohle je ta část, kterou vidíš. Prohlížeč dostane hromadu HTML kódu a začne ho parsovat – číst a analyzovat. Z něj si postaví strukturu stránky, takový strom objektů zvaný DOM.

Tomáš: Jako kostru?

Lucie: Přesně jako kostru. Během toho narazí na odkazy na další věci, jako jsou CSS soubory pro styly, obrázky nebo JavaScript pro interaktivitu. A pro každý z nich spustí tenhle celý proces znova – DNS dotaz, TCP spojení, HTTP požadavek...

Tomáš: Páni, takže se to děje mnohokrát pro jednu jedinou stránku?

Lucie: Přesně tak, často desítkykrát. Pak vezme CSS kód, který mu říká, jak má co vypadat – jaké barvy, velikosti, fonty – a vytvoří si z něj další strom, CSSOM. Tyhle dva stromy pak spojí dohromady.

Tomáš: Takže má kostru i plán, jak ji nabarvit a obléknout.

Lucie: Perfektní! A pak už jenom spočítá, kam přesně na obrazovce každý prvek patří – tomu se říká layout. A nakonec to všechno vykreslí pixel po pixelu na tvůj monitor. A to všechno se stane za zlomek sekundy.

Tomáš: Neuvěřitelné. Takže příště, až se mi bude nějaká stránka načítat o vteřinu déle, budu mít víc pochopení pro všechny ty detektivy a slušné pozdravy, co se dějí na pozadí.

Lucie: Přesně tak. Není to jen čekání, je to spousta tvrdé práce!

Tomáš: Takže teď už víme, kde se server nachází. Co se děje dál? Prostě si od něj rovnou vyžádáme stránku?

Lucie: Kéž by to bylo tak jednoduché. Než si vůbec můžeme něco vyžádat, musíme navázat spolehlivé spojení. Je to trochu jako zvednout telefon a počkat, až ten druhý řekne „haló“.

Tomáš: A jak se takové digitální „haló“ řekne?

Lucie: Říká se tomu TCP handshake. Konkrétně „trojcestný handshake“. Představ si to... Prohlížeč pošle serveru zprávu „Chci se připojit!“, to je SYN.

Tomáš: Jako synchronizovat?

Lucie: Přesně tak. Server odpoví: „Jasně, slyším tě a taky se chci připojit!“, to je SYN-ACK. No a nakonec prohlížeč potvrdí: „Super, potvrzuji příjem!“, to je ACK. A teprve teď je spojení navázáno.

Tomáš: SYN, SYN-ACK, ACK. Zní to jako nějaké tajné kódové slovo.

Lucie: Je to takové digitální podání ruky. Zajišťuje, že obě strany jsou připravené a nikdo nemluví do prázdna. Komunikace pak probíhá přes specifický port — pro nezabezpečený web je to port 80.

Tomáš: Počkat, a co když je to adresa s https? To „s“ na konci znamená bezpečí, že?

Lucie: Přesně! A tady přichází další, ještě důležitější handshake. Hned po tom prvním podání ruky následuje TLS handshake. TLS je zkratka pro Transport Layer Security.

Tomáš: Takže další kolo představování?

Lucie: Ano, ale tentokrát mnohem důkladnější. Představ si, že vcházíš do banky. Nejdřív se musíš ujistit, že je to opravdová banka a ne jen kulisa, že?

Tomáš: Jasně, nechci dát své peníze nějakému podvodníkovi.

Lucie: Přesně. Prohlížeč si vyžádá od serveru jeho digitální certifikát. Ověří si, že je platný a vydaný důvěryhodnou autoritou. To je první krok – ověření totožnosti serveru.

Tomáš: A co dál?

Lucie: Pak si domluví tajný kód. Prohlížeč a server si bezpečně vymění informace a z nich si oba vygenerují unikátní šifrovací klíče. Od té chvíle je veškerá komunikace mezi nimi zašifrovaná. Nikdo třetí ji nemůže číst.

Tomáš: Super, takže jsme připojení a v bezpečí. Teď už si konečně můžeme říct o tu webovou stránku?

Lucie: Konečně! Teď prohlížeč pošle takzvaný HTTP požadavek. Nejčastěji je to požadavek typu GET, což jednoduše znamená: „Dej mi obsah této stránky.“

Tomáš: Co všechno v takovém požadavku je?

Lucie: Kromě samotné adresy obsahuje i takzvané hlavičky. Třeba User-Agent, který říká, jaký prohlížeč používáš, nebo Accept-Language, který serveru napoví, že preferuješ češtinu.

Tomáš: User-Agent? To zní jako tajný agent.

Lucie: Trochu ano. Server se pak podívá na požadavek, zpracuje ho – najde třeba soubor index.html – a pošle zpátky HTTP odpověď.

Tomáš: A v té odpovědi je už ta stránka?

Lucie: Přesně. Odpověď obsahuje stavový kód, třeba 200 OK, což znamená „vše v pořádku, tady to máš“. Pak zase nějaké hlavičky a v těle odpovědi je samotný HTML kód stránky.

Tomáš: A co když stránku nenajde? To je to slavné 404?

Lucie: To je přesně ono! 404 Not Found. Takže shrnuto: navážeme spojení, zabezpečíme ho a pak si formálně objednáme data. Je to vlastně docela zdvořilý proces.

Tomáš: Chápu. Máme tedy hromadu kódu. Ale jak z toho ten prohlížeč udělá hezkou, klikací stránku? O tom si povíme hned vzápětí.

Tomáš: Tak a jsme u posledního tématu pro dnešek — webové technologie. Po všem, co jsme dnes probrali, mi to přijde jako taková třešnička na dortu.

Lucie: Přesně tak. A je to oblast plná mýtů, které je zábavné bořit.

Tomáš: Opravdu? Tak sem s nimi! Jaké jsou největší omyly?

Lucie: Třeba že DNS, ten překlad jména stránky na IP adresu, je okamžitý. Není. Může to klidně přidat desítky i stovky milisekund k načtení stránky.

Tomáš: Aha, takže to není jen o rychlosti mého internetu...

Lucie: Přesně. Nebo že HTTP a HTTPS je to samé. Vůbec ne! HTTPS šifruje komunikaci. Bez něj posíláte data jako pohlednici, kterou si může kdokoliv přečíst.

Tomáš: To je skvělé přirovnání. Už nikdy nebudu ignorovat ten zámeček v adrese.

Lucie: A poslední velký mýtus — že prohlížeč jen pasivně „zobrazí“ HTML. Kdepak. Je to složitý software, který musí vše parsovat, počítat a dynamicky vykreslovat.

Tomáš: A to je přesně to, co si studenti mohou vyzkoušet v interaktivní simulaci, že?

Lucie: Ano! Tam krásně uvidí, jak tyhle mýty padají. Simulace ukáže časovou osu — kolik času zabere DNS, kolik navázání spojení, kolik stahování dat.

Tomáš: Takže to zpoždění uvidím na vlastní oči. To je skvělé.

Lucie: Přesně tak. Uvidíte animované pakety, jak putují sítí, a jak se stránka skládá kousek po kousku, ne všechno najednou. Je to opravdu intuitivní.

Tomáš: Takže, abychom to shrnuli. Od programovacích jazyků přes databáze až po web... dnešní díl byl hlavně o odhalování toho, co se skrývá pod povrchem.

Lucie: Přesně tak. A klíčové je, že nic z toho není magie. Všechno má svou logiku a dá se to pochopit, když víte, kam se dívat. A je skvělé být zvědavý!

Tomáš: Lucie, moc děkuju, že jsi nám to dnes tak skvěle přiblížila. Bylo to fascinující.

Lucie: Já děkuju za pozvání. Bylo mi potěšením.

Tomáš: Vám, milí posluchači, děkujeme za pozornost. Uslyšíme se zase příště u dalšího dílu Studyfi Podcastu. Na slyšenou!

Lucie: Na slyšenou.