Skip to content
On this page
HTTP
1

HTTP

Hyper Text Transfer Protocol

08.11.2022
HTTP
2

HTTP Protokoll

  • Textbasiertes Protokoll
  • Übermittlung verwendet TCP
  • ... und SSL / TLS für HTTPS
  • Beliebiger Inhalt kann übermittelt werden
  • Limitierung besteht durch Webbrowserstandards
08.11.2022
HTTP
3

Debugging

  • Im Webbrowser mit Debug Tools unter Network Tab
  • Mit curl um requests aus dem Terminal abzusetzen (super mächtiges Tool!)
  • In VS Code mit Extension Thunder Client oder REST Client
08.11.2022
HTTP
4

Server / Client Applikation

  • Client oft der Webbrowser
    • ... Ausnahme sind APIs
    • sendet den Request
  • Server wartet auf HTTP Requests
    • ... praktisch jede Programmiersprache hat im Minimum einen HTTP Webserver
    • sendet die Response
08.11.2022
HTTP
5

Struktur

  • Header
    • Request Path
    • Host
    • Statuscodes
    • Methoden
  • Payload / Request Body
08.11.2022
HTTP
6
  • Der Header besteht aus Key-Value Pairs
Date: Wed, 02 Nov 2022 14:54:04 GMT
Server: Apache
Location: https://nexus-computing.ch/hello?
Content-Length: 241
Content-Type: text/html; charset=iso-8859-1
08.11.2022
HTTP
7

Statuscodes

  • Bei jedem Request antwortet der Server mit einem Statuscode im Header
Code
200OK
201Created
301Moved Permanently
304Not Modified
400Bad Request
Code
401Unauthorized
403Forbidden
404Not Found
500Internal Server Error
502Bad Gateway
503Service Unavailable

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

08.11.2022
HTTP
8

Methoden

08.11.2022
HTTP
9

Client kann Nutzdaten senden

  • Entweder via URL encoding encode()
    • URL Parameter werden so übergeben
  • ... oder bei POST als Payload im Body
    • wird meistens für grössere Payloads verwendet, die in der URL keinen Platz haben
08.11.2022
HTTP
10

URL Parameter

  • Bei einem GET Request können URL Parameter mitgegeben werden. Es handelt sich hierbei lediglich um eine Konvention, der Server parst dabei der Path im GET Request.
  • URL Parameter sind key/value pairs, welche folgendermassen codiert werden
https://www.helloworld.org/api?hello=world&foo=bar
  • Teil nach ? wird als Request Parameters interpretiert.
  • Paramter müssen urlEncoded werden.
08.11.2022
HTTP
11

Server sendet Nutzdaten mit MIME

  • Server sendet Response Header
    • Content-Type erklärt, wie die Daten zu interpretieren sind
      • text/html, text/javascript, image/png, application/json ...
    • Content-Length wie lange die Payload sein wird
  • Nutzdaten sind im body der Response zu finden.
08.11.2022
HTTP

HTTP Server

12

Es gibt zwei unterschiedliche Arten von Webserver Diensten

  • Statisches Webhosting
    • einfache Files werden auf HTTP Requests geliefert
    • AWS S3 auf static Files optimiert, sehr performant und deshalb Transfer kostengünstig!
  • API
    • Dynamische Antworten anhand der Requests
    • Serverseitige Webapp im Hintergrund,
    • ... verbindet sich z.B. mit DB
    • ... checkt Permissions
    • ... bearbeitet Daten bevor diese zurückgehen
08.11.2022
HTTP
13

Moderne Web Apps

  • Bei modernen Web Applikationen wird der statische Teil häufig von der API getrennt. Statisches Filehosting liefert also alle notwendigen Resourcen mit dafür optimierten Diensten.
  • API ist dafür zuständig Nutzdaten vom User zu interpretieren und Resultate zurückzuliefern.
    • ... Server wird häufig via Cloud realisiert (Ubuntu / Debian Server)
    • ... um Unabhängig zu bleiben werden Docker Container eingesetzt (App Container unabhängig von Server)
    • ... serverless Dienste von Cloud Providern sind wesentlich Kostengünstiger, aber anspruchsvoller im Coding und zum Teil bindend an den Provider.
08.11.2022
HTTP
14

Wo wird gehostet?

  • Shared Webhosting mit PHP sehr kostengünstig (Bindung an PHP)
  • Zuhause: Portforward und Raspi mit DynDNS
  • Cloud Service Provider
    • Linode (sehr günstige Angebote, gratis DNS)
    • Amazon AWS (guter Loadbalancer mit HTTPS und WAF)
    • Microsoft Azure
    • Heroku (schneller Einstieg, z.T. aber teuerer als andere)
08.11.2022
HTTP

Netzwerkarchitektur

15
08.11.2022
HTTP
16

Server müssen gewartet werden

  • Ubuntu / Debian Updates
  • Firewall Settings
  • SSL
    • certbot
08.11.2022
HTTP
17

HTTP Client

  • Der Browser ist ein HTTP Client
  • Gibt man eine URL ein, wird ein GET Request ausgelöst
  • JavaScript erlaubt on-the-fly HTTP Requests
    • mit window.fetch API
    • Aufpassen mit CORS, der Browser verhindert einen Aufruf mit fetch, falls der Webserver nicht explizit erlaubt von der window.location Domain her einen Request auszuführen.
    • Gerade im Fall, dass wir einach ein "File" im Browser öffnen, setzt das Grenzen
08.11.2022
HTTP
18

CORS

  • Cross Origin Resource Sharing
  • Sicherheitsfeature
  • Origin wird geprüft, damit ein Server nicht von einem Client "gespamt" werden kann, ohne dass der Server dies explizit erlaubt.
    • Schutz für Server gegen DDoS
08.11.2022
HTTP
19

HTTP Requests mit JavaScript

  • fetch() führt einen HTTP Request aus
  • returnt ein Promise
  • ... mit .then(() => {}) kann ein Callback registriert werden
  • alternativ und besser: async, await.
08.11.2022
HTTP
20

Beispiel

js
windon.onload = async () => {
    const res = await fetch(
        'https://dog.ceo/api/breeds/image/random');
    const jsonData = await res.json();
    
    console.log("data", jsonData);
}
08.11.2022
HTTP
21

.json() Methode

  • .json() liefert ein Promise und versucht die Antwort des Servers als JSON zu parsen.
  • Je nach Response .text() oder .blob().
08.11.2022
HTTP
22

Long Polling

  • HTTP besteht aus einem Request und anschliessend aus einer Response.
  • ... in der Regel keine offene, bleibende TCP Verbindung.
  • Server Side Events: Response hört nicht einfach auf, sonder sendet immer wieder etwas
  • ... aber unidirektional von Server zu Client.
08.11.2022
HTTP
23

Websockets

  • Bidirektional
  • Verbindung bleibt offen (bis jemand schliesst).
  • Notifications, Chats, Gaming, etc.
08.11.2022