---
header-includes: |
    \makeatletter
    \beamer@ignorenonframefalse
    \makeatother
    \usetikzlibrary{decorations.pathreplacing,quotes}
---

## Wiederholung: Der Weg der Information

::: columns
:::: {.column width=50%}
Oma Erna will ihrer Enkelin Amelie, die gerade in Chicago studiert zu Ostern einen Brief schreiben.

**\faIcon{lightbulb} In welche Schichten kann der Transport unterteilt werden?**

\begin{itemize}
\item<2-> Anwendungsschicht
\item<3-> Transportschicht
\item<4-> Vermittlungsschicht
\end{itemize}
::::

:::: {.column width=60%}
![](img/Copyrighted/oma_erna.png){.center height=70%}
::::
:::

## Schichten bei der digitalen Kommunikation - TCP/IP-Modell

![](img/Copyrighted/tcp_ip_stack.png){.center height=90%}

## Wiederholung: \only<2->{Adressierung}

**Woher weiß eine Schicht wohin die Daten sollen?**  
\pause
\faIcon{lightbulb} Die Daten enthalten eine Adresse (wie bei der Post). 

\pause
\begin{itemize}
\item<3-> Anwendungsschicht: \boldred{URL}
\item<4-> Transportschicht: \boldred{port} = 16-bit Nummer zwischen \only<5->{0 und 65535 ($2^{16}-1$)}
\item<6-> Internetschicht: \boldred{IP-Adresse} = ???
\item<7-> Netzzugangsschicht: \boldred{MAC-Adresse} = Geräte spezifische 48-bit Nummern
\end{itemize}

## Wiederholung: IP-Adresse

Eine IP-Adresse des Internet-Protokolls Version 4 besteht aus einer 32-bit Zahl.

\pause
$\Rightarrow$ es existieren nur **$2^{32} -1 = 4294967295$** mögliche Adressen.

\pause
### \faIcon{pencil-alt} Aufbau

Zur besseren Lesbarkeit werden sie oft in 4 Byte-Blöcke unterteilt.

\begin{center}
\begin{tikzpicture}
\node[scale=2.5] {\textcolor{green!70!black}{192.168.0.}\textcolor{red!70}{2}};
\draw[decoration={brace,mirror,raise=7pt},decorate]
  (-2,-0.2) -- node[below=8pt] {\textcolor{green!70!black}{Netzanteil}} (1.7,-0.2);
\draw[decoration={brace,mirror,raise=7pt},decorate]
  (1.7,-0.2) -- node[below=8pt] {\textcolor{red!70}{Hostanteil}} (2.3,-0.2);
\end{tikzpicture}
\end{center}

* Der \textcolor{green!70!black}{Netzanteil} legt das Netzwerk des Geräts fest
* Der \textcolor{red!70}{Hostanteil} ist eindeutig im LAN.

## \faIcon{desktop} Arbeitsauftrag
Moderne Webbrowser enthalten *Entwicklerwerkzeuge*, mittels derer das Abrufen und der Aufbau von Webseiten im Detail analysiert werden kann.

* Führe eine Analyse der Kommunikation zwischen Browser und Webserver beim Laden der Seite [informatikschulbuch.de](informatikschulbuch.de) durch.
Verwende die in den Entwicklerwerkzeugen bereitgestellte Netzwerkanalysefunktion.
Eine Anleitung findest du im Vorlagen Laufwerk.
* Untersuche das Ergebnis deiner Netzwerkanalyse: Beschreibe, welche Dateien beim Abrufen der Webseite übertragen wurden, und welchem Zweck diese vermutlich dienen.
* Durch Anklicken der übertragenen Dateien in der Netzwerkanalyse erhältst Du weitere Details zur Übertragung.
Ermittle auf diesem Weg folgende Informationen:
  * Wie meldet der Server dem Client, dass er die angefragte Datei liefern kann?
  * Wie erkennt der Client, in welchem Format die gelieferte Datei codiert ist?

## \faIcon{pencil-alt} Ablauf einer HTTP-Anfrage

Im Internet und vorallem im **WWW** spielt das Anwendungsprotokoll **HTTP** eine zentrale Rolle.

\pause
![](img/Copyrighted/http_request.png)

## \faIcon{pencil-alt} Antwort des HTTP-Servers

Die Antwort des Servers besteht aus einem **Header** gefolgt von den **Nutzdaten**.

\pause
![](img/Copyrighted/http_response.png)

## \faIcon{hands-helping}\faIcon{desktop} Arbeitsauftrag - 10min

* Recherchiert welche Header HTTP gewöhnlich verwendet.
* Recherchiert welche Funktionen neben `GET`  HTTP unterstützt.
* Entwerft eine HTTP-Anfrage an einen Webserver eurer Wahl.
* \faIcon{chalkboard} Präsentiert anschließend eure HTTP-Anfrage

\vspace{1cm}
**Tipp:** Das Programm `ncat.jar` im Ablage-Verzeichnis kann euch helfen eure Anfrage zu testen.

## HTTPS ?

### \faIcon{lightbulb} Denkauftrag
* Wofür steht das **S** in HTTPS?
* Welche Art der Verschlüsselung ist für den Aufruf eines Webseite [geeignet]{.underline}?

\pause
### Denkauftrag - Lösung
* **S** steht für *secure*
* Asymmetrische Verschlüsselung oder Hybride Verschlüsselung

## HTTPS

Um **Vertraulichkeit** zu gewährleisten findet der Datenaustausch bei **HTTPS**, mittels **HTTP** über eine verschlüsselte Verbindung statt.

\vspace{1cm}
### Datenaustausch
![](img/Copyrighted/https.png)

## \faIcon{desktop} Arbeitsauftrag - 5 min

* Begründe wofür bei **HTTPS** Zertifikate zum Einsatz kommen
* Finde heraus wie du Dir im Browser das Zertifikat der aktuellen Verbindung anzeigen lassen kannst.
* Wer hat das Zertifikate für [informatikschulbuch.de](informatikschulbuch.de) ausgestellt und wann?

## Kekse Kekse Kekse

**\faIcon{lightbulb} Was sind eigentlich diese Cookies?**
\pause

### \faIcon{pencil-alt} Cookies
**Cookies** sind kleine Textdateien, die vom Server an den Client geschickt werden.
Der Client sendet erhaltene Cookies bei jeder zukünftigen Anfrage erneut an den Server.

### Funktionen von Cookies

\pause
>- Speichern von Logins
>- Speichern von Einstellungen
>- Tracken von Nutzerverhalten

## Cookies beim Login

![](img/Copyrighted/cookies.png)

## \faIcon{desktop} Arbeitsauftrag - HTTP per Hand

Mit dem Programm `ncat.jar` können Zeichenketten via TCP an einen Server gesendet werden.
Wir wollen das Programm verwenden um die Seite [schule.muhq.space/klasse7](schule.muhq.space/klasse7) zu testen.

* Recherchiere welcher Port für HTTP verwendet wird.
* Formuliere eine gültige HTTP-Anfrage für die Webseite.
* Sende deine Anfrage an den Server und interpretiere die Antwort des Servers
* Recherchiere welcher Port für HTTPS verwendet wird.
* Formuliere eine gültige HTTPS-Anfrage für die Webseite.
* Sende deine Anfrage erneut an den Server (`ncat.jar --tls schule.muhq.space 443`).