Applications #

• HTTP / WWW
• Email (IMAP / POP /SMTP)
• Media Streaming
• Youtube
• VoIP
• Skype & Co.
• Dropbox & Co.
• VPN

DNS (Domain Name System) #

• Auflösung einer IP anhand eines Namens
• Nameserver
  • z.B. switch.ch
  • registrierung von domains mit toplevel
  • .ch, .de, .uk, .app, .net, .com
  • subdomains
    • Entriy Types
    • A
    • CNAME
    • M

NAT #

• Network Address Translation
• Wie kommt man von einem Host mit einer privaten IP zu einem Host mit einer öffentlichen IP?
• Lösung: NAT
  • Router Mappt private Adresse auf öffentliche Adress
  • !! Verletzung der OSI Schichten, L3 braucht wissen über L4
  • Verwendet bei UDP und TCP das Source Port Feld um sich zu merken, wie die Antworten von aussen nach Innen gemappt werden.

NAT: Firewall #

• Datagramme / Verbindungen müssen immer erst von der privaten Adresse ausgehen.
• ... d.h. das NAT einen Firewalleffekt hat.
• Portmapping mapt bestimmte Ports auf private IP Adressen
• Begrenztes Buffering: Was passiert bei zu vielen Mappings?

NAT unter Linux #

• iptables
• ... eigentlich eine Firewal
• aber mit Postrouting / NAT rules
  • a.k.a. Masquerading

VPN #

• Virtual Private Network
• Hosts in unterschiedlichen physikalischen Netzen
  • ... aber im gleichen "virtuellen" Netz.
• vgl. FHNW
• Private Adressräume
• Kann auf unterschiedlichen Layern implementiert sein.

VPN #

• Nesting
  • TCP/UDP
  • ... in IP
  • ... in TCP/UDP
  • ... in IP
  • ... in Ethernet
  • ... on Physical

VPN Vorteile #

• Verschlüsselt (vollständig!)
• NAT Traversal möglich
• Authentifizierung
• Anstatt alle Services nach aussen zu öffnen nur VPN nach aussen öffen (z.B. FHNW).
• Anonymisierung / Zugriff von anderen IP Adressen her

VPN auf Linux (Client) #

• Wireguard (wg, wg-quick)
• openconnect
• ... läuft auch auf dem Target!
• Cisco VPN Client
• ... vor allem auf Windows
• Hide My Ass (HMA)
• ... auch auf mobile
• SSH Socks Proxy als leight weight VPN

VPN auf Linux (Server) #

• Wiregaurd (Kernel)
• Open VPN
  • Einfach konfigurierbar
  • weit verbreitet
  • Open Source Software
• PiVPN ... easy setup
• Cisco VPN
  • weit verbreitet
  • proprietär

HTTP #

• Basiert auf TCP
• Client = Web Browser
  • Firefox
  • Chrome / Chromium
  • Safari
  • Server
• ... verschiende Frameworks
• URL / Path

Container für Daten #

• Container für Daten
  • HTML
  • JSON
  • XML
  • Plain Text
  • Media

URL / URI #

• Uniform Resource Locator
• Uniform Resource Identifier
• max length: je nach Browser ca. 2000 characters

https://dnet.pages.fhnw.ch:5000/versuche?id=11;host=true

HTTPS #

• HTTP über SSL/TLS
• End-zu-End verschlüsselt
• Zertifiziert / Vertraut
• Notwendig für Progressive Web App
• Let's Encrypt

HTTPS #

• Handshake
  • zuerst asymetrische Verschlüsselung
  • Austausch eines symetrischen Keys
• Daten I/O
  • symetrisch verschlüsselt
  • ... mit ausgehandeltem Key

HTTPS: Trusted Certificates #

• Zertifizierungstellen
  • Root Zertifikate
• Vorinstalliert ...
  • ... im Browser
  • ... im OS
• Nachrüstbar
  • ... self signed
  • ... self issued

Responsive #

• Optimiert für Viewport Dimensions
• Mobile First
• @media Query in CSS

HTML #

• Hyper Text Markup Language
• Basiert auf XML
• Im WWW defacto Standard für den DOM
  • Document Object Model
  • Wird vom Browser gerendert als UI
  • Kann von JS manipuliert werden
• Webseiten in Kombination mit CSS und JS
  • Cascading Stylesheets
  • JS / ECMA script / ES6

Beispiel zu CSS #

.footnote {
    position: absolute;
    bottom: 1em;
    text-align: center;
    left: 1em;
}

Client Side HTTP #

• Browser
• https://caniuse.com/usage-table
  • Android Chrome: ~40%
  • Other Chrome: ~23%
  • iOS Safari: ~13%
• Command Line Clients
  • curl (Für debugging)
  • wget
  • lynx

HTTP Methods #

• GET-Request
  • URL-Encoded Parameter
  • limitiert durch anzahl zeichen in URL
  • Vorteil: Link Teilen
  • Strategie: Magic Link
  • Hash in der URL als Param
  • Serverside Mapping von Daten zu Hash
• POST-Request
  • Grosse Daten vom Browser an den Server senden

Asynchrone Requests #

• Nur Content Laden welcher gebraucht wird (via JS)
• Javascript manipuliert den DOM
• HTTP Endpoints
• Standardisieren
• BSP. /users.json gibt liste von usern zurück
• ... selber Endpoint kann auch für eine APP / API verwendet werden

Async Requests #

• APIs
  • Beschreibung wie eine Webapp auch ausserhalb eines Browsers verwendet werden kann
• Web Socket
  • Lange, offene verbindung zwischen client und server
  • ... long polling
  • Kein "aktives" Polling nötig in definiertem Intervall
  • z.B. Chat Client