230 HTTP Protokoll und Webserver [2.5 PT]

Wir arbeiten in einem Umfeld in dem sich fast alles um das Web und HTTP dreht. Wir betreiben Webseiten und benutzen Dienste die über HTTP REST APIs kommunizieren. Es ist essenziell ein gutes Verständnis für HTTP zu haben und zu verstehen wie es funktioniert. Vor allem wenn es darum geht Probleme zu debuggen.

Ziele

HTTP

• Du kennst die 4 Bausteine, aus denen die meisten modernen Webapplikationen bestehen. Außerdem weißt du für was welcher Baustein da ist:
  • HTML
  • CSS
  • Javascript (Browser, Frontend)
  • "Backend" Applikation
• Du verstehst warum HTTP ein "stateless Protocol" ist.
• Du kannst die üblichen HTTP Methoden GET, POST, PUT und DELETE unterscheiden und weißt wann welche eingesetzt wird.
• Du kennst auch die OPTIONS Methode und weißt wofür diese gebraucht wird.
• Du weißt, was HTTP Header sind, kannst Request- und Response Header unterscheiden und kannst einige Beispiele nennen und für was diese eingesetzt werden.
• Du kennst HTTP Response Codes und kannst einige übliche nennen.
• Du kannst den folgenden Response Code Kategorien einen Überbegriff/Kategorienamen zuordnen:
  • 1xx
  • 2xx
  • 3xx
  • 4xx
  • 5xx
• Was ist ein HTTP Body? Wo ist der Unterschied zu einem HTML Body?
• Nenne die Hauptunterschiede, die zwischen HTTP/1.1 und HTTP/2 bestehen.
  • Gehe insbesondere auf Multiplexing ein.
• Du kennst die Entwicklertools in Firefox/Chrome und weißt, wie du den Netzwerktab einsetzen kannst.
• Du hast den Nutzen des Content-Type Headers verstanden
  • Den Content-Type Header kann man als Request und als Response Header setzen, warum?
  • Welche Informationen sind in diesem Header enthalten? Welche Optionen können optional enthalten sein?
• Für was dient der User-Agent Header?
• Was tut der Set-Cookie Header? Was sind Cookies?
• Was hat es mit HTTP keepalive auf sich?
• Du verstehst den Unterschied von Websockets gegenüber üblichen HTTP Verbindungen.
• Du verstehst den Verbindungsaufbau einer Websocket Verbindung und weißt, welche HTTP Header involviert sind.
• Du weißt, was CORS ist und warum das die Sicherheit im Web erhöht.
  • Erkläre mit einem Beispiel wie man das konfiguriert.
  • Erkläre einen Fall in dem CORS vor Schaden bewahrt.
• Was sind CORS preflight requests?
• Was ist Content Security Policy? Grenze zu CORS ab.
• Du weißt, was HSTS ist. Kann man das Gleiche mit CSPs erreichen?

Nginx

• Du kannst Nginx Konfigurationen erstellen.
• Du weißt, was Nginx Worker sind.
• Du kennst den Unterschied zwischen einem Nginx restart und einem reload. Was passiert technisch bei einem reload?
• Du weißt, wie du statische Webseiten mit Nginx auslieferst.
• Du weißt, wie Nginx requests an andere Backends/Server weiterleiten kann.
• Du weißt wie du Weiterleitungen (301, 302) im Nginx konfigurierst.
• Du weißt über If is Evil Bescheid
• Du kennst den Unterschied zwischen active und passive healthchecks bei nginx
• Was gibt der fail_timeout bei den passiven healthchecks an?
• Welche Parameter bestimmen was als Fehler bei den passiven healthchecks klassifiziert wird?

Loadbalancing

• Du weißt was Loadbalancing ist.
• Du kennst übliche Loadbalancing Algorithmen
  • round-robin
  • least-connections
  • ip_hash
• Du weißt wie du Nginx als Loadbalancer konfigurieren kannst

Inhalte

HTTP

• HTTP Crash Course & Exploration Show archive.org snapshot
• An overview of HTTP Show archive.org snapshot
• A typical HTTP session Show archive.org snapshot
• Evolution of HTTP Show archive.org snapshot
• HTTP/1.1 vs HTTP/2: What's the Difference? Show archive.org snapshot
• HTTP cookies Show archive.org snapshot
• WebSockets in 100 Seconds & Beyond with Socket.io Show archive.org snapshot
• WebSockets Explained Show archive.org snapshot
• Cross-Origin Resource Sharing (CORS) Show archive.org snapshot
• Content Security Policy (CSP) Show archive.org snapshot
• HTTP Strict-Transport-Security (HSTS) Show archive.org snapshot
• HTTP authentication Show archive.org snapshot

Nginx

• Nginx Admin Guide Show archive.org snapshot
• Nginx docs Show archive.org snapshot -> Es ist empfehlenswert einen Blick auf die Modules reference zu werfen.
• Nginx upstream module Show archive.org snapshot
• If is Evil Show archive.org snapshot

Loadbalancing

• Load Balancing Show archive.org snapshot
• Using nginx as HTTP load balancer Show archive.org snapshot

Übungen

Konfigurationen, die du erstellst, sollten in ein Git Repo abgelegt werden, damit dein Mentor diese reviewen kann. Pushe die Commits in einem Feature Branch und erstelle einen Merge Request und weise diesen deinem Mentor zu.

1. Rufe die makandra Webseite mit geöffneten Entwicklertools (im Chrome oder Firefox) auf und schaue dir den Netzwerktab an. Zeige das auch deinem Mentor und sprich mit ihm über die Dinge, die du im Netzwerktab herausfinden kannst.

2. Starte dir einen LXD Testcontainer mit Ubuntu. Installiere Nginx und erstelle eine Konfiguration die folgende Eigenschaften erfüllt:

   • Hört auf Port 80
   • Erwartet den Host Header "staticcontent.local.test"
   • Liefert eine Webseite im Verzeichnis /var/www/staticcontent.local.test aus
   • Indexseite ist index.html
   • Es wird der Custom Header X-Static-Website: True gesetzt.

   Anschließend erstellst du eine Datei /var/www/staticcontent.local.test/index.html die eine Überschrift Hello World! anzeigt und darunter einen beliebigen Text.
   Die Domain machst du erreichbar, indem du sie dir in die /etc/hosts mit der entsprechenden IP einträgst.

3. Installiere Docker auf deinem Testcontainer und starte httpbin auf Port 8080. Du kannst dafür folgendes Kommando verwenden:

   Copydocker run -d --name=httpbin --restart=always -p 8080:80 kennethreitz/httpbin
   

   (Falls es dabei einen Error gibt, siehe hier Show archive.org snapshot )
   Nun erstellst du einen weiteren Nginx Vhost mit folgenden Spezifikationen:

   • Hört auf Port 80
   • Erwartet den Host Header "httpbin.local.test"
   • Der Request soll 1:1 an den gestarteten httpbin aus Aufgabe 3 weitergeleitet werden.
   • Wenn man http://httpbin.local.test/static aufruft, soll es einen 302 auf http://staticcontent.local.test/ geben.

   Die Domain machst du erreichbar, indem du sie dir in die /etc/hosts mit der entsprechenden IP einträgst.

4. Erweitere deine staticcontent.local.test Konfiguration:

   Requests an http://staticcontent.local.test/httpbin sollen an httpbin weitergereicht werden (kein redirect!). Dabei muss der /httpbin Part der URL durch / ersetzt werden, da httpbin keine Pfade unter /httpbin kennt. Der Rest der URL soll erhalten bleiben. Das heißt: http://staticcontent.local.test/httpbin/uuid soll nur mit /uuid an den httbin Service weitergeleitet werden. Sieh dir dafür genau die Dokumentation zu proxy_pass an.

5. Mache ein systemctl reload nginx und schau dir an, was mit den Nginx Prozessen passiert. Warum werden Verbindungen bei einem Reload nicht unterbrochen? Warum können nicht alle Konfigurationen mit einem reload geändert werden?

6. Starte eine zweite Instanz von httpbin die auf dem Port 8081 hört. Erstelle eine Nginx upstream Konfiguration die beide Installationen beinhaltet. Schau dir an wie passive Healthchecks bei nginx funktionieren und teste ob der "Failover" funktioniert wenn du eine der beiden httpbin Instanzen beendest.

7. Unser staticcontent unterstützt kein POST. Liefere einen entsprechenden Statuscode zurück, wenn jemand versucht einen HTTP POST zu machen.

8. Konfiguriere staticcontent so, dass requests erst erlaubt werden, wenn man sich mit einem Benutzer und Passwort authentifiziert hat. Die /httpbin location soll davon ausgenommen sein. Wenn du die /httpbin location im Webbrowser öffnest wirst du dennoch eine Basic Auth Abfrage erhalten. Warum ist das so? Finde das mit Hilfe des Entwicklermodus in deinem Webbrowser heraus.