Was passiert, wenn Sie eine URL in Ihren Browser eingeben?

Von Jenna Pederson übersetzt durch Philon Terving.

Jeden Tag öffnen Sie Ihren Browser und navigieren zu Ihren Lieblings-Websites – ob Social Media, Nachrichten oder E-Commerce. Sie gehen zu dieser Seite, indem Sie eine URL eingeben oder auf einen Link zur Seite klicken. Haben Sie jemals darüber nachgedacht, was dabei hinter den Kulissen passiert? Wie kommt die Nachrichten-Meldung zu Ihnen, wenn Sie nach dem Eintippen der URL die Eingabe-Taste drücken? Wie kommen die Bilder in diesem Beitrag in Ihren Browser? Wie zeigen sich Ihr Twitter/X-Feed und die Tweet-Daten sicher in Ihrem Browser?

In diesem Beitrag schauen wir uns an, was passiert, wenn Sie eine URL in Ihren Browser eintippen und die Eingabe-Taste drücken. Der Prozess umfasst den Browser, das Betriebssystem Ihres Computers, Ihren Internet-Dienstleister, den Server, auf dem Sie die Website hosten, und die Dienste, die auf diesem Server ausgeführt werden. Es ist wichtig zu verstehen, wo Dinge schief gehen können; wo man nach Leistungsproblemen sucht und dafür sorgt, dass Sie Ihren Nutzern ein sicheres Erlebnis bieten.

Zunächst werfen wir einen Blick auf die Beziehung zwischen Websites, Servern und IP-Adressen. Dann gehen wir durch die Schritte, die Ihr Browser unternimmt:

• die Adresse des Hosting-Servers der Website auflösen
• die Verbindung zum Server herstellen
• eine Anfrage an die Seite senden
• die Antwort vom Server zu behandeln und
• wie er die Seite rendert, damit Sie, der Zuschauer, mit der Website interagieren können

Websites, Server, IP-Adressen, meine Güte!

Websites sind Sammlungen von Dateien – oft HTML, CSS, JavaScript und Bilder – die Ihrem Browser sagen, wie er die Website, Bilder und Daten anzeigen soll. Diese müssen jederzeit für jeden von überall zugänglich sein, daher ist es nicht skalierbar oder zuverlässig, sie auf Ihrem Computer zu Hause zu hosten. Ein leistungsstarker externer Computer, der mit dem Internet verbunden ist, häufig Server genannt, speichert diese Dateien.

Wenn Sie Ihren Browser auf eine URL wie https://jennapederson.dev/hello-world verweisen, muss Ihr Browser herausfinden, welcher Server im Internet die Website hostet. Er tut dies, indem er die Domain jennapederson.dev nachschlägt, um die Adresse zu finden.

Jedes Gerät im Internet – Server, Mobiltelefone, Ihr intelligenter Kühlschrank – hat eine eindeutige Adresse, die als IP-Adresse bezeichnet wird. Eine IP-Adresse enthält vier nummerierte Teile:

203.0.113.0

Aber Zahlen wie diese sind schwer zu merken! Hier kommen Domain-Namen ins Spiel. jennapederson.dev ist viel leichter zu merken als 203.0.113.0, oder? Stellen Sie sich vor, Sie müssen sich alle Telefonnummern Ihrer Kontakte merken, ohne die Kontakte-App auf Ihrem Telefon zu haben. Mit Ihrer Kontakte-App können Sie Telefonnummern nach Namen suchen.

Wir machen dasselbe im Internet. Das Domain-Namen-System oder kurz DNS ist wie die Kontakte-App auf unserem Telefon. DNS hilft unserem Browser (und uns), Server im Internet zu finden. Wir können eine DNS-Suche durchführen, um die IP-Adresse des Servers basierend auf dem Domainnamen jennapederson.dev zu finden. Sie können hier mehr über DNS lesen.

Jetzt, da Sie die verschiedenen Teile kennen und wie sie miteinander in Beziehung stehen, schauen wir uns jeden Schritt des Prozesses an und wie der Browser mit dem Server kommuniziert, wenn Sie eine URL eingeben. Egal, ob Sie eine URL eingegeben oder auf einer verlinkten URL von der aktuellen Seite geklickt haben, der Prozess ist derselbe.

Der Prozess

Um zu zeigen, wie all diese Schritte zusammenpassen, werde ich eine Amazon Lightsail-Instanz und eine Lightsail-DNS-Zone verwenden. Ich benutze Amazon Lightsail, weil es einer der einfachsten Dienste ist, um virtuelle private Server (VPS) und DNS an einem Ort zu verwalten, aber diese Konzepte funktionieren für jeden VPS- und DNS-Dienst.

1. Sie geben https://jennapederson.dev/hello-world in Ihren Browser ein und drücken die Eingabe-Taste

Lassen Sie uns die Teile dieser URL aufschlüsseln, die Sie eingegeben haben, um hierher zu kommen.

https://jennapederson.dev/hello-world

Schema

https:// ist das Schema. HTTPS steht für Hypertext Transfer Protocol Secure. Dieses Schema weist den Browser an, eine Verbindung zum Server unter Verwendung von Transport Layer Security oder TLS herzustellen. TLS ist ein Verschlüsselungsprotokoll zur Sicherung der Kommunikation über das Internet. Mit HTTPS werden die zwischen Ihrem Browser und dem Server ausgetauschten Daten, wie Passwörter oder Kreditkarteninformationen, verschlüsselt. Möglicherweise haben Sie auch ftp://, mailto:// oder file:// gesehen. Dies sind andere Protokolle, mit denen Browser umgehen können.

Domain

jennapederson.dev ist der Domainname der Website. Es ist die einprägsame Adresse und verweist auf die IP-Adresse eines bestimmten Servers. Wenn Sie sich die Lightsail-DNS-Zone unten ansehen, können Sie einen DNS-A-Datensatz sehen, der auf die Lightsail-Instanz, jennapedersondev-static-ip, verweist, die die statische IP-Adresse der Lightsail-Instanz darstellt.

Pfad

Manchmal gibt es einen zusätzlichen Pfad zur Ressource in der URL. Zum Beispiel ist für diese URL https://jennapederson.dev/the-path-to/hello-world, the-path-to der Pfad auf dem Server zur angeforderten Ressource, hello-world. Sie können sich dies wie die Verzeichnisstruktur von Dateien und anderen Verzeichnissen auf Ihrem Computer vorstellen. Es ist eine Möglichkeit, Ihre Ressourcen zu organisieren, unabhängig davon, ob es sich um statische HTML-, CSS-, Javascript- oder Bilddateien oder auch dynamisch generierte Inhalte handelt. Häufige Beispiele für Pfade sind blog, artikel, tags oder bilder, von denen jeder verschiedene Ressourcen gruppiert.

Ressource

Wenn Sie diese URL in Ihren Browser eingegeben haben, ist hello-world der Name der Ressource auf der Website, die Sie anzeigen möchten. Manchmal sehen Sie dies mit einer Dateierweiterung wie .html, die darauf hinweist, dass es sich um eine statische Datei auf dem Server mit HTML-Inhalt handelt. Ohne eine Erweiterung, wie diese URL, zeigt sie normalerweise an, dass der Server diesen Inhalt dynamisch generiert hat. Zum Beispiel würde eine Nachrichtenseite Ihnen benutzerdefinierte, aktuelle und lokale Nachrichteninhalte anzeigen, was sie nur tun kann, wenn sie weiß, wer Sie sind oder woher die Anfrage kam.

2. Der Browser löst die IP-Adresse für die Domain auf

Nachdem Sie die URL in Ihren Browser eingegeben und die Eingabe-Taste gedrückt haben, muss der Browser herausfinden, mit welchem Server im Internet eine Verbindung hergestellt werden soll. Um dies zu tun, muss die IP-Adresse des Servers, der die Website hostet, hinter der von Ihnen eingegebenen Domain nachgeschlagen werden. Der Browser tut dies mit einer DNS-Suche. Wir werden den DNS-Lookup-Prozess auf hoher Ebene durchgehen, aber es ist ein komplexes Thema, das über den Rahmen dieses Beitrags hinausgeht. Hier können Sie mehr darüber lesen, wie DNS funktioniert.

Da DNS komplex ist und rasend schnell sein muss, werden DNS-Daten auf verschiedenen Ebenen zwischen Ihrem Browser und an verschiedenen Orten im Internet zwischengespeichert. Ihr Browser überprüft seinen eigenen Cache, den Betriebssystem-Cache, einen lokalen Netzwerk-Cache in Ihrem Router und einen DNS-Server-Cache in Ihrem Unternehmensnetzwerk oder bei Ihrem Internetdienstanbieter (ISP). Wenn der Browser die IP-Adresse auf einer dieser Cache-Ebenen nicht finden kann, führt der DNS-Server in Ihrem Unternehmensnetzwerk oder bei Ihrem ISP eine rekursive DNS-Suche durch. Eine rekursive DNS-Suche fragt mehrere DNS-Server im Internet, die wiederum mehr DNS-Server nach dem DNS-Datensatz fragen, bis er gefunden wird.

Sobald der Browser den DNS-Datensatz mit der IP-Adresse erhält, ist es Zeit, den Server im Internet zu finden und eine Verbindung herzustellen.

3. Der Browser initiiert TCP-Verbindung zum Server

Mit der öffentlichen Internet-Routing-Infrastruktur werden Pakete von einer Client-Browser-Anfrage über den Router, den ISP, durch einen Internetaustausch-Knoten geleitet, um ISPs oder Netzwerke zu wechseln, alles unter Verwendung des Transmission Control Protocol, besser bekannt als TCP, um den Server mit der IP-Adresse zu finden, mit der eine Verbindung hergestellt werden soll. Aber dieser Weg ist sehr umständlich und auf diesem dorthin zu gelangen ist nicht effizient.

Stattdessen verwenden viele Websites ein Content Delivery Network oder kurz CDN, um statische und dynamische Inhalte näher am Browser zwischenzuspeichern. In unserem Beispiel habe ich die Lightsail-Instanz, jennapedersondev, als Ursprung für eine CDN-Distribution festgelegt.

Ein CDN ist ein global verteiltes Netzwerk von Caching-Servern, die die Leistung Ihrer Website oder App (den Ursprung) verbessern, indem sie den Inhalt näher zu den Benutzern zwischenspeichern. Das Lightsail-CDN verwendet Amazon CloudFront, das Teil des globalen AWS-Netzwerks ist. Anfragen vom Client-Browser können dieses private Netzwerk mit extrem niedriger Latenz und hoher Verfügbarkeit nutzen. Um die Hops (Sprünge) zu verfolgen, die die Anfrage von meinem Computer zu jennapederson.dev führt, können wir den Befehl traceroute verwenden. Im Bild unten geht der erste Hop (die erste Zeile) zu meinem Router. Hops in Box Eins sind im Netzwerk meines ISP und Hops in Box zwei sind im globalen AWS-Netzwerk.

Anstatt sich auf die öffentliche Internet-Routing-Infrastruktur zu verlassen und zusätzlichen Hops, wiederholter Auslieferung und Paketverlusten zu unterliegen, kann die Client-Browser-Anfrage eine Fahrt im globalen AWS-Netzwerk machen. Die Anfrage wird intelligent über den leistungsstärksten Knoten geleitet, um Inhalte an Ihren Browser zu liefern.

Sobald der Browser den Server im Internet gefunden hat, stellt er eine TCP-Verbindung mit dem Server her, und wenn HTTPS verwendet wird, findet ein TLS-Handshake statt, um die Kommunikation zu sichern. TCP und TLS sind extrem wichtige Themen, aber wir werden sie in einem anderen Beitrag behandeln.

Im Bild unten dauerte diese Verbindung (Erstverbindung) 130,30 ms.

Sobald der Browser eine Verbindung zum Server hergestellt hat, besteht der nächste Schritt darin, die HTTP-Anfrage zu senden, um die Ressource oder die Seite zu erhalten.

4. Der Browser sendet die HTTP-Anfrage an den Server

Jetzt, da der Browser eine Verbindung zum Server hat, folgt er den Kommunikationsregeln des HTTP-Protokolls. Es beginnt damit, dass der Browser eine HTTP-Anfrage an den Server sendet, um den Inhalt der Seite anzufordern. Die HTTP-Anfrage enthält eine Anforderungszeile, Header (Kopfzeile oder Metadaten über die Anforderung) und einen Hauptteil. Die Anforderungszeile enthält Informationen, die der Server verwenden kann, um zu bestimmen, was der Client (in diesem Fall Ihr Browser) tun möchte.

Die Anfrage-Zeile enthält folgendes:

• eine Anfrage-Methode, die eine von GET, POST, PUT, PATCH, DELETE oder einer Handvoll weiterer HTTP-Verben ist
• der Pfad, der auf die angeforderten Ressourcen zeigt
• die HTTP-Version, mit der kommuniziert wird

Die Anfrage-Zeile für die URL-Ressource sieht wie folgt aus:

GET /hello-world HTTP/1.1

Die Anfrage-Zeile teilt dem Server mit, dass Sie die Ressource unter /hello-world per GET-Methode anfordern und per HTTP/1.1 kommunizieren.

Denken Sie daran, dass HTTP-Verben die semantische Absicht Ihrer Anfrage ausdrücken. Sie können auch die POST-, PUT- oder PATCH-Methoden verwenden, um Daten zur Speicherung an den Server zu senden, entweder um neue Daten zu erstellen oder vorhandene Daten auf dem Anfragepfad zu aktualisieren. Die DELETE-Methode würde die Ressource auf dem angegebenen Pfad löschen. Es ist jedoch wichtig zu wissen, dass Server nicht alle Verben unterstützen müssen. Ein Server könnte mit einem 200 OK-Status auf eine DELETE-Methode reagieren und trotzdem nichts mit der Ressource tun.
Der nächste Teil der Anfrage sind die Anfrage-Header. Header (Kopfzeilen) geben zusätzliche Informationen vom Client weiter, die helfen, die Anfrage weiterzuleiten; geben an, welche Art von Client die Anfrage stellt (den User-Agent) und können zur Unterstützung von A/B-Tests, Blau/Grün- und Canary-Deployments verwendet werden.

Header sind Schlüssel-Wert-Paare wie diese:

Host: jennapederson.dev
User-Agent: curl/7.64.1
Accept: */*

Der letzte Teil der Anfrage ist der Body (Körper). Der Body ist (normalerweise) leer für eine GET-Anfrage wie unsere. Für eine Anfrage, die Ressourcen wie POST, PUT oder PATCH manipuliert, enthält der Body die Daten des Clients, die erstellt oder aktualisiert werden sollen.
Der Anfrage-Text kann in verschiedenen Formaten sein und der Server versteht das Format basierend auf einem Anfrage-Header, Content-Type.
Hier ist ein Beispiel für die vollständige Anfrage für die URL mit der Anfrage-Zeile und den Headern (kein Body, da dies ein GET ist):

GET /hello-world/ HTTP/1.1
Host: jennapederson.dev
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: <https://jennapederson.dev/>
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
dnt: 1
sec-gpc: 1

Sobald der Server die Anfrage vom Client erhalten hat, verarbeitet der Server sie und sendet eine Antwort zurück.

5. Der Server verarbeitet die Anfrage und sendet eine Antwort zurück

Der Server nimmt die Anfrage entgegen und entscheidet basierend auf den Informationen in der Anfrage-Zeile, den Headern und dem Body, wie die Anfrage verarbeitet wird. Für die Anfrage, GET /hello-world/ HTTP/1.1, erhält der Server den Inhalt auf diesem Pfad, konstruiert die Antwort und sendet sie an den Client zurück. Die Antwort enthält Folgendes:

• eine Statuszeile, die dem Client den Status der Anfrage mitteilt
• Antwort-Header, die dem Browser sagen, wie die Antwort zu handhaben ist
• die angeforderte Ressource in diesem Pfad, entweder Inhalte wie HTML, CSS, JavaScript, Bilddateien oder andere Daten

Die Statuszeile enthält sowohl die HTTP-Version als auch eine numerische und Textdarstellung des Status der Anfrage. Die Antwort sieht so aus:

HTTP/1.1 200 OK
Date: Tue, 25 May 2021 19:40:59 GMT
Server: Apache
X-Frame-Options: SAMEORIGIN
X-Powered-By: Express
Cache-Control: max-age=0, no-cache
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding
X-Mod-Pagespeed: 1.13.35.2-0
Content-Encoding: br
Keep-Alive: timeout=1, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
<!DOCTYPE html>
<html lang="en">
<head>
… RESTLICHES HTML …

Der Browser betrachtet einen Statuscode im 200er-Bereich als erfolgreich. Die Antwort war 200, so dass der Browser weiß, dass er die Antwort verarbeiten kann.
Ressourcen können statische Dateien sein, entweder Text (d.h. index.html) oder Nicht-Textdaten (d.h. logo.img). Browser fordern jedoch nicht immer statische Dateien an. Oft handelt es sich um dynamische Ressourcen, die zum Zeitpunkt der Anfrage generiert werden, und es ist keine Datei mit der Ressource verknüpft. In der Tat ist es in dieser Anfrage genau das, was passiert. Es gibt keine Datei hello-world, aber der Server weiß immer noch, wie die Anfrage zu verarbeiten ist. Der Server generiert eine dynamische Ressource, erstellt das HTML aus Fragmenten oder Vorlagen und kombiniert es mit dynamischen Daten, um die Antwort als Text zurückzusenden, damit der Browser die Seite rendern kann.
Jetzt, da Sie wissen, wie der Server die Antwort erstellt, um sie an den Browser zurückzusenden, werfen wir einen Blick darauf, wie der Browser mit der Antwort umgeht.

6. Der Browser rendert den Inhalt

Sobald der Browser die Antwort vom Server erhalten hat, überprüft er die Antwort-Header auf Informationen darüber, wie die Ressource gerendert werden kann. Der Content-Type Header oben teilt dem Browser mit, dass er eine HTML-Ressource im Antworttext erhalten hat. Zum Glück weiß der Browser, was mit HTML zu tun ist!
Die erste GET-Anfrage gibt HTML zurück, die Struktur der Seite. Wenn Sie jedoch den HTML-Code der Seite (oder einer beliebigen Webseite) mit den Entwicklungstools Ihres Browsers überprüfen, werden Sie sehen, dass dieses HTML auf andere Javascript-, CSS-, Bildressourcen verweist und zusätzliche Daten anfordert, um die Webseite wie geplant zu verarbeiten.
Während der Browser das HTML interpretiert und rendert, macht er zusätzliche Anfragen, um Javascript, CSS, Bilder und Daten zu erhalten. Er kann viel davon parallel machen, aber nicht immer, und das ist eine Geschichte für einen anderen Beitrag.

Im Bild oben sehen Sie im HTML eine Referenz auf eine CSS-Ressource. Der Browser stellt eine nachfolgende Anfrage an den Server, um diese CSS-Ressource zum Stylen der Seite zu erhalten. Der Content-Type Header der Anforderung für die CSS-Ressource weist den Browser an, CSS zu interpretieren. Wenn der Browser eine Bildressource anfordert, teilt der Content-Type Header dem Browser mit, dass es sich um Nicht-Text-Daten handelt, und dass er sie entsprechend verarbeiten muss.

Zum Abschluss

Sie haben es geschafft! Sie haben eine URL-Anfrage vom Browser bis zum Server, der sie hostet, verfolgt und die Antwort zurück an den zu rendernden Browser. Wir haben die Beziehung zwischen Websites, Servern, IP-Adressen behandelt und jeden der Schritte durchlaufen, die Ihr Browser durchläuft, wenn Sie eine URL in Ihren Browser eingeben und die Eingabetaste drücken. Zur Überprüfung, hier nochmal diese sechs Schritte:

1. Sie geben eine URL in Ihren Browser ein und drücken die Eingabetaste
2. Der Browser löst die IP-Adresse für die Domain auf
3. Der Browser initiiert TCP-Verbindung mit dem Server
4. Der Browser sendet die HTTP-Anfrage an den Server
5. Server verarbeitet die Anfrage und sendet eine Antwort zurück
6. Der Browser rendert den Inhalt

Wenn Sie wissen, was passiert, wenn Sie eine URL in Ihren Browser eingeben, können Sie herausfinden, wo die Dinge schief gehen, wo Sie nach Leistungsproblemen mit Ihrer Website suchen und Ihren Benutzern eine sichere Erfahrung bieten können.

Wenn Sie dies selbst ausprobieren möchten, können Sie Ihren eigenen virtuellen privaten Server erstellen, ein CDN einrichten und Domains mit Amazon Lightsail verwalten. Beginnen Sie jetzt mit diesem Tutorial und sehen Sie sich die neueste Preisaktion an, damit Sie noch schneller loslegen können.