Przeglądarki, HTTPS i adresy IP

Wpisujesz adres strony, naciskasz Enter i po chwili widzisz gotową stronę. Po drodze dzieją się trzy rzeczy, o które warto zapytać: kto zamienia kod na obraz, kto pilnuje, żeby nikt nie podsłuchał Twojego hasła, i skąd dane wiedzą, do którego komputera trafić?

Przeglądarka internetowa

Przeglądarka to program, który pobiera pliki ze stron internetowych i wyświetla je na ekranie. Najpopularniejsze przeglądarki to Google Chrome, Mozilla Firefox, Safari i Microsoft Edge. Każda przeglądarka posiada silnik renderujący, który zamienia kod HTML, CSS i JavaScript w wizualną stronę. Chrome i Edge korzystają z silnika Blink, Firefox z Gecko, a Safari z WebKit.

Mohamed wyjaśnia: "Przeglądarka to jak skryba, który odczytuje hieroglify z papirusu i tłumaczy je na piękne obrazy na ścianie świątyni!"

Różne silniki czasem odrobinę inaczej interpretują ten sam kod, dlatego strony testuje się w kilku przeglądarkach. Polecam Ci mieć zainstalowane przynajmniej dwie przeglądarki z różnymi silnikami, np. Chrome i Firefoksa.

Jak przeglądarka renderuje stronę?

Gdy pliki strony dotrą na Twój komputer, silnik przechodzi przez pięć etapów:

1. Parsowanie HTML - przeglądarka czyta kod HTML i buduje drzewo DOM (Document Object Model)
2. Parsowanie CSS - analizuje style i tworzy model CSSOM
3. Render Tree - łączy DOM i CSSOM w drzewo renderowania
4. Layout - oblicza pozycję i rozmiar każdego elementu
5. Paint - rysuje piksele na ekranie

Całość trwa zwykle ułamek sekundy. DOM i CSSOM spotkasz ponownie w module o CSS - to one decydują, który styl trafi do którego elementu.

Co przeglądarka dostaje od serwera?

Zanim silnik zacznie parsować, musi wiedzieć, co właściwie otrzymał. Serwer zaczyna każdą odpowiedź od linii statusu, a po niej wysyła nagłówki, czyli krótkie informacje o przesyłce:

1HTTP/1.1 200 OK
2Content-Type: text/html

Pierwsza linia to wersja protokołu (HTTP/1.1), kod statusu (200) i jego opis (OK) - kod 200 znasz z poprzedniej lekcji jako "sukces". Nagłówek Content-Type mówi przeglądarce, że w środku jest dokument HTML, więc trzeba go wyrenderować, a nie na przykład pobrać jako plik. Sama treść strony przychodzi dopiero po nagłówkach, oddzielona pustą linią. Nagłówki podejrzysz sam: naciśnij F12, otwórz kartę Network i odśwież stronę.

HTTPS - Bezpieczna komunikacja

HTTPS (HyperText Transfer Protocol Secure) to szyfrowana wersja HTTP. Różnica jest kluczowa:

• HTTP - dane wysyłane "otwartym tekstem" - każdy może je podsłuchać. Jak posłaniec bez ochrony na niebezpiecznej drodze.
• HTTPS - dane szyfrowane za pomocą SSL/TLS. Jak posłaniec z uzbrojoną eskortą i zaszyfrowaną wiadomością.

SSL to starsza nazwa - dziś połączenia szyfruje jego następca, TLS. Domyślnie HTTP korzysta z portu 80, a HTTPS z portu 443. Rozpoznasz HTTPS po ikonie kłódki w pasku adresu przeglądarki. Nigdy nie wprowadzaj hasła ani danych osobowych na stronie bez kłódki! Kłódka oznacza jednak szyfrowane połączenie, a nie uczciwość strony - oszuści też mogą mieć HTTPS, więc zawsze sprawdzaj adres w pasku.

Takie porównanie świetnie wygląda w tabeli. Tabelę budujesz z wierszy <tr>, a w nich z komórek nagłówkowych <th> i zwykłych komórek <td>:

1<table>
2    <tr>
3        <th>Cecha</th>
4        <th>HTTP</th>
5        <th>HTTPS</th>
6    </tr>
7    <tr>
8        <td>Szyfrowanie</td>
9        <td>Brak</td>
10        <td>SSL/TLS</td>
11    </tr>
12</table>
13<div>Nigdy nie wprowadzaj hasła na stronie HTTP!</div>

Pierwszy wiersz zawiera nagłówki kolumn, które przeglądarka domyślnie pogrubi, a kolejne wiersze - dane. Element <div> pod tabelą to zwykły pojemnik na ostrzeżenie: sam niczego nie ozdabia, wygląd nadasz mu później w CSS. Tabele omówimy dokładnie w dalszej części tego modułu.

Adresy IP

Każde urządzenie w sieci ma swój adres IP (Internet Protocol), unikalny w obrębie tej sieci. Jest to jak adres domu w świecie cyfrowym - bez niego dane nie wiedziałyby, dokąd trafić.

IPv4 to najpopularniejszy format: cztery grupy liczb od 0 do 255, oddzielone kropkami, np. 192.168.1.1 lub 93.184.216.34. Daje to około 4,3 miliarda adresów - dziś za mało.

IPv6 to nowszy format z dłuższymi adresami: 2001:0db8:85a3:0000:0000:8a2e:0370:7334 - stworzony, bo adresy IPv4 się kończą. Adresów IPv6 wystarczy dla wszystkich urządzeń świata z ogromnym zapasem.

Adres 192.168.1.1 to przykład adresu prywatnego, jakie router rozdaje w domowej sieci. Jest unikalny w Twoim domu, ale u sąsiada działa dokładnie taki sam.

Mohamed podsumowuje: "Adres IP to jak współrzędne GPS - wskazuje dokładne miejsce komputera w sieci. A DNS zamienia łatwą do zapamiętania nazwę na te współrzędne!"

Praktyka

W edytorze poniżej zobaczysz listę przeglądarek z ich silnikami, tabelę HTTP kontra HTTPS z numerami portów oraz przykładowe adresy IP. Dopisz do tabeli wiersz "Ikona w przeglądarce" i sprawdź, jak zmienia się podgląd:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>Przeglądarki i HTTPS</title>
6</head>
7<body>
8    <h1>Przeglądarki internetowe</h1>
9    <p>Przeglądarka to program, który <strong>pobiera i wyświetla</strong> strony internetowe.</p>
10
11    <h2>Popularne przeglądarki</h2>
12    <ul>
13        <li><strong>Chrome</strong> - silnik Blink (Google)</li>
14        <li><strong>Firefox</strong> - silnik Gecko (Mozilla)</li>
15        <li><strong>Safari</strong> - silnik WebKit (Apple)</li>
16        <li><strong>Edge</strong> - silnik Blink (Microsoft)</li>
17    </ul>
18
19    <h2>HTTP vs HTTPS</h2>
20    <table border="1" cellpadding="8">
21        <tr>
22            <th>Cecha</th>
23            <th>HTTP</th>
24            <th>HTTPS</th>
25        </tr>
26        <tr>
27            <td>Szyfrowanie</td>
28            <td>Brak</td>
29            <td><strong>SSL/TLS</strong></td>
30        </tr>
31        <tr>
32            <td>Port</td>
33            <td>80</td>
34            <td>443</td>
35        </tr>
36    </table>
37
38    <h2>Adres IP</h2>
39    <p>Każde urządzenie w sieci ma unikalny <strong>adres IP</strong>.</p>
40    <p>IPv4: <em>192.168.1.1</em> | IPv6: <em>2001:0db8:85a3::8a2e:0370:7334</em></p>
41</body>
42</html>

Pamiętaj: przeglądarka to skryba odczytujący hieroglify, HTTPS to posłaniec z eskortą, a adres IP to współrzędne komnaty, do której posłaniec niesie wiadomość.