Web-basierte Systeme - Cheatsheet

Grundlagen von HTTP und HTTPS

Definition:

HTTP (Hypertext Transfer Protocol): Protokoll für die Übertragung von Daten im Web.HTTPS (HTTP Secure): Erweiterung von HTTP mit SSL/TLS für sichere Datenübertragung.

Details:

• HTTP und HTTPS nutzen Port 80 bzw. 443
• HTTP ist zustandsloses Protokoll
• HTTPS verschlüsselt Daten mit SSL/TLS
• SSL: Secure Sockets Layer
• TLS: Transport Layer Security
• Anfragen in HTTP: GET, POST, PUT, DELETE
• HTTPS schützt vor Man-in-the-Middle-Angriffen

Ereignisgesteuerte Programmierung in JavaScript

Definition:

Programmiertechnik, bei der Code als Reaktion auf Ereignisse wie Klicks, Eingaben oder Timer-Interrupts ausgeführt wird.

Details:

• Ereignisse: click, keydown, mouseover, etc.
• Event-Listener: Mit addEventListener registriert.
• Callbacks: Funktionen, die bei Eintreten eines Ereignisses ausgeführt werden.
• Beispiel:

  document.getElementById('button').addEventListener('click', function() { alert('Button clicked!'); });

Komponentenbasierte Architektur mit Angular und React

Definition:

Verwendung von wiederverwendbaren, modularen Komponenten zur Entwicklung von Webanwendungen unter Verwendung der Frameworks Angular und React.

Details:

• Angular: Plattform und Framework zur Entwicklung von Single Page Applications (SPA) mit TypeScript.
• React: Bibliothek für den Aufbau von Benutzeroberflächen, insbesondere SPAs, mit JavaScript oder TypeScript.
• Trennung von Logik und Darstellung durch Komponenten.
• State Management: z.B. Redux für React, NgRx für Angular.
• Komponentenkommunikation: Input/Output in Angular, Props/State in React.
• Lifecycle-Methoden zur Kontrolle des Renderings und der Datenflüsse.

RESTful Webservices und deren Implementierung

Definition:

Architekturstil für verteilte Hypermedia-Systeme, basiert auf HTTP-Methoden.

Details:

• Verwendet HTTP-Methoden: GET (lesen), POST (erstellen), PUT (aktualisieren), DELETE (löschen)
• Ressourcen identifiziert durch URI
• Flexibles Datenformat: JSON oder XML
• Zustandslose Kommunikation (stateless)
• Implementierung: Nutzung von Frameworks wie Spring Boot (Java) oder Flask (Python)
• Format für Anfragen/Antworten: Header, URI, Body
• Fehlerbehandlung durch HTTP-Statuscodes
• Sicherheitsaspekte: Authentifizierung, Autorisierung

Erstellung und Nutzung von REST-APIs sowie GraphQL

Definition:

Erstellung und Nutzung von REST-APIs und GraphQL für den Datenaustausch zwischen Client und Server in Web-basierten Systemen.

Details:

• REST-API: Architekturstil für verteilte Systeme, nutzt HTTP-Methoden wie GET, POST, PUT, DELETE.
• GraphQL: Abfragesprache für APIs, erlaubt Client, genau die benötigten Daten anzufordern.
• REST-API:
  • Ressourcen durch URLs adressierbar.
  • HTTP-Methoden: GET (lesen), POST (erstellen), PUT (aktualisieren), DELETE (löschen).
  • Statuscodes: 200 (OK), 404 (nicht gefunden), 500 (Serverfehler).
• GraphQL:
  • Abfrage definiert Struktur der Antwort.
  • Eine Endpoint-URL für alle Operationen.
  • Operationen: Queries (lesen), Mutations (schreiben).

Cross-Site Scripting (XSS) und Schutzmaßnahmen

Definition:

Cross-Site Scripting (XSS): Sicherheitslücke, bei der Angreifer bösartigen JavaScript-Code in eine Webseite einschleusen. Benutzerinteraktionen führen zur Ausführung des Codes im Browser des Opfers.

Details:

• Arten von XSS: Reflektiert, persistent, DOM-basiert
• Ziel: Datendiebstahl, Session-Übernahme, etc.
• Schutzmaßnahmen:
• Benutzereingaben validieren und escapen
• Content Security Policy (CSP) nutzen
• HTML sanitize Libraries verwenden
• Cookies mit HttpOnly und Secure Flags setzen
• Verwende \texttt{document.createElement} statt \texttt{innerHTML} in JS

Layout-Techniken mit CSS (Grid, Flexbox)

Definition:

Layout-Techniken mit CSS wie Grid und Flexbox ermöglichen es, komplexe Layouts zu erstellen. Sie sind essenziell für responsive Designs.

Details:

• CSS Grid: Raster-basiertes Layout-System
• Flexbox: Einlinien- oder mehrzeilige Layouts
• Grid: Definiert mit `display: grid;`
• Flexbox: Definiert mit `display: flex;`
• Grid-Elemente: Zellen des Rasters belegen
• Flexbox-Elemente: Flexible Anordnung innerhalb eines Containers
• Grid: Nutze `grid-template-columns`, `grid-template-rows`
• Flexbox: Nutze `flex-direction`, `justify-content`, `align-items`

Asynchrone Programmierung mit Promises und async/await

Definition:

Verwendung von Promises und async/await zur Handhabung asynchroner Operationen in JavaScript.

Details:

• Promise: Objekt, das einen zukünftigen Wert repräsentiert (erfüllt, abgelehnt oder ausstehend)
• then(): Methode zur Handhabung von erfüllten oder abgelehnten Promises
• catch(): Methode zur Handhabung von Fehlern in Promises
• async: Schlüsselwort zur Deklaration einer asynchronen Funktion
• await: Schlüsselwort zur Pausierung der Ausführung einer asynchronen Funktion bis ein Promise aufgelöst ist
• Fehlerbehandlung bei async/await mit try/catch