Websites 101

Wie funktioniert das Surfen im Internet?

Grundlegendes

Ganz grundsätzlich haben wir einen Server und einen Client.

Der Server stellt Dateien zur Verfügung und der Client empfängt diese mittels eines Webbrowsers (Microsoft Edge, Google Chrome, Mozilla Firefox, Opera, Safari und weitere)

Der Server ist dann in der Rolle eines „Webservers“, welche die Daten anbietet. Dies kann ein Tomcat, Apache, Microsoft IIS, NGINX oder andere sein.

Die Dateien, die dieser Webserver bereithält sind meist HTML- und CSS-Dateien.


HTML / CSS

Die HTML-Dateien (Hypertext Markup Language) haben verschiedene Bestandteile, wie die Webseite Inhaltlich Strukturiert sein soll.

Das kann dann zum Beispiel so aussehen: (Das Beispiel sind bestandteile einer gesamten Seite und ergeben so keinen Sinn und dienen nur als Beispiel zur Darstellung)

<!doctype html>
<html lang="de-DE">
<head>
	<meta charset="UTF-8">
	<title>./Fullme.sh &#8211; Attached to Nothing. Connected to Everything</title>
        <meta name='robots' content='max-image-preview:large' />
        <link rel='dns-prefetch' href='//fonts.googleapis.com' />
</head>

<body>
        <div id="page" class="site">
        <li><a href="https://fullme.sh/index.php/2021/04/05/raspberry-pi-grundkonfiguration/">Raspberry Pi Grundkonfiguration</a></li>
</body>
</html>

Eine CSS-Datei (Cascading Style Sheets) hingegen definiert, wie die Webseite aussehen soll, also ob ein Element Farbig, Fett geschrieben, Unterschrichen oder zum Beispiel blinken soll.

Zum Beispiel kann eine CSS-Datei so aussehen:

html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}

Skripte

Es lassen sich auch viele verschiedene Skripte und bzw. Skriptsprachen einbinden, wie zum Beispiel PHP und JavaScript.

Hier werde ich auf diese nicht weitergehen, da dies den Rahmen sprengen würde.


Browser

Wichtig ist, dass es viele verschiedene Webbrowser gibt, die es zur Kompatiblität zu beachten sind.

Denn Webbrowser empfangen die HTML/CSS-Dateien und sobald er diese Dateien hat, interpretiert der Browser diese Dateien.

Das heißt, jeder Browser nimmt sich die HTML/CSS-Dateien und übersetzt sich diese sozusagen in seine eigene Sprache. Wenn jedoch Funktionen angesprochen werden, welcher dieser nicht hat, wird das Element auch nicht interpretiert.

Deswegen gilt es auch immer den Browser fleißig zu updaten, denn nicht nur Sicherheitslücken werden durch Updates geschlossen, auch neue Funktionen werden in den Browser implementiert.

Hinweis: Es gibt auch Funktionen in alten Browsern, welche durch andere/bessere Technologien/Funktionen ausgetauscht werden. Ein gutes Beispiel ist zum Beispiel ActiveX aus dem Internet Explorer, welche mit dem Microsoft Edge-Browser aussterben. Webseiten die ActiveX als Skript verwenden sollten also dringend auf HTML oder in anderen Skriptsprachen realisiert werden


HTTP-Codes

Wenn ein Webbrowser einen Webserver anspricht, spricht man von einem HTTP-Request, also eine Anfrage nach den HTML/CSS-Dateien.

Die Antwort des Webservers an den Webbrowser wird als HTTP-Response bezeichnet, also die Übergabe der angeforderten Dateien an den Webbrowser.

Kommt es hierbei zu Fehler gibt es sogenannte HTTP-Error Codes welche Standardisiert sind und mit einer eindeutigen Nummer für diesen Fehler.

Die Fehler sind zusätzlich noch in Kategorien unterteilt.

Ist der HTTP-Error im 400ter Bereich weißt dieser auf einen Fehler am Client / Webbrowser hin

Ist der HTTP-Error im 500ter Bereich weißt dieser auf einen Fehler am Webserver hin.

Auch die die sonstige Kommunikation zwischen Webbrowser und Webserver werden mit HTTP-Codes versehen.

Im 100ter Bereich für Informative Antworten

Im 200ter Bereich für Erfolgreiche Antworten

Im 300ter Bereich für Umleitung

Diese Meldungen wirst du selten sehen, da für uns als Nutzer meist nur die Fehler interessant sind.

Einer der bekanntesten HTTP-Error Codes ist zum Beispiel Code 404

Fehler 404 – Site not found oder zu Deutsch Seite nicht gefunden.

Dieser Fehler kommt genau dann, wenn wir versuchen eine Seite (HTML-Datei) am Webserver anzufordern, die es überhaupt nicht gibt. Dies kann durch Tippfehler oder das kopieren unvollständiger Links passieren.

Ein Beispiel für einen HTTP-Error 404: https://google.de/test


Protokolle

Wie kommuniziert mein Webbrowser mit dem Webserver?

Es wurden natürlich eigene Protokolle für die Kommunikation mit Webseiten erstellt und standardisiert.

Die am häufigsten genutzten und bekanntesten sind:

ProtokollPortZweck
HTTP80Kommunikation zu Webservern
HTTP-Alternative8080Alternativer Port zur Kommunikation
HTTPS443Verschlüsselte Kommunikation zu Webservern

HTTP = Hypertext Transfer Protocol

HTTPS = Hypertext Transfer Protocol Secure

Also ein Webbrowser spricht den Webserver auf einem der drei Protokolle an, sofern der Webserver auf diesem Port lauscht kann und der Webbrowser einen gültigen HTTP-Request gestellt hat, kann der Webserver mit einem HTTP-Response, also mit den gewünschten Dateien antworten. Die Antwort des Webservers zum Client basiert auf einem Dynamischen Port. (Port größer 49152 bis 65535)

Soweit wir allerdings Webseiten mit dem HTTP-Protokoll (oder dem HTTP-Alternative-Protokoll) ansprechen ist sämtlicher Verkehr zwischen dem Browser und dem Server unverschlüsselt und somit für absolut jeden lesbar!

Hinweis: Wenn du dich bei einem Webserver, wie zum Beispiel Google.de mit deinem Konto anmeldest und dies per HTTP passiert, kann jeder deinen Usernamen und dein Passwort mitlesen und kann dies selbst verwenden!

Aus diesem Grund wurde das HTTPS-Protkokoll erfunden. Das heißt auf dem Webserver wird ein Zertifikat zur Verschlüsselung installiert. Soweit wir dem Zertifikat vertrauen, können wir eine verschlüsselte Verbindung aufbauen.

Soweit wir dem Zertifikat vertrauen, bzw. dem Aussteller des Zertifikats (oder einer Kette aus Zertifikaten) vertrauen, kann die Verschlüsselung aufgebaut werden. Ist eine Mitglied der Kette, der Aussteller ungültig oder das Zertifikat abgelaufen erhalten (mittlerweile!) eine Hinweismeldung des Browser und der Verkehr wird nicht verschlüsselt, wird aber dennoch über das HTTPS-Protokoll übermittelt.

Sämtlicher Verkehr kann dann nur noch von Browser und Webserver gelesen werden, alles dazwischen ist verschlüsselt.


Eine sehr simple und teilweise veraltete Darstellung des gesamten Vorgangs hat die Sendung mit der Maus einmal wunderbar zusammengefasst:

YouTube-Link zur Sendung mit der Maus

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert