QR Code Generator

Ein einfacher QR-Code-Generator, der vollständig im Browser läuft. Keine Daten werden an externe Server gesendet.

Dieses Projekt basiert auf dem Code von https://qr.alster.space/. Er wurde um verschiedene praktische Funktionen erweitert.

Features

• Vollständig clientseitig (keine Server-Kommunikation)
• URL-Parameter für alle Einstellungen (inkl. Modus Text/WLAN/Termin)
• Anpassbare Größen und Farben
• Verschiedene Fehlerkorrektur-Level
• Download-Funktion
• Teilen-Funktion (Link mit aktuellen Einstellungen kopieren)
• Hinweis bei WiFi: Passwort im Link im Klartext
• Responsive Design
• WiFi QR-Code Unterstützung mit eigener UI
• Dynamische Klartext-Anzeige
• Automatische QR-Code-Generierung
• Sicher gegen XSS (Content Security Policy, validierte Eingaben, kein Inline-JS)

Docker Setup

Mit Docker Compose (empfohlen)

# Container bauen und starten
docker-compose up -d

# Container stoppen
docker-compose down

Docker build/run

# Image bauen
docker build -t qr-generator .

# Container starten
docker run -d -p 8080:80 --name qr-generator qr-generator

# Container stoppen
docker stop qr-generator
docker rm qr-generator

Verwendung

Nach dem Start ist die Anwendung unter http://localhost:8080 erreichbar.

Normale QR-Codes

Geben Sie einfach Text oder URLs in das erste Eingabefeld ein. Der QR-Code wird automatisch generiert.

WiFi QR-Codes

Die App bietet spezielle Eingabefelder für WiFi-Daten:

1. WiFi SSID: Geben Sie den Namen Ihres WLAN-Netzwerks ein
2. WiFi Password: Geben Sie das WLAN-Passwort ein
3. Automatische Generierung: Der QR-Code wird im korrekten WiFi-Format erstellt
4. Klartext-Anzeige: Das Textfeld zeigt den generierten WiFi-Code an

Verschlüsselung: Fest eingestellt auf WPA/WPA2
Hidden Network: Standardmäßig auf false (nicht versteckt)

URL-Parameter

Die Anwendung unterstützt folgende URL-Parameter:

• mode - Inhaltstyp: text, wifi oder event (Termin/Kalender). Ohne mode wird bei vorhandenen Termin-Feldern automatisch der Termin-Modus gewählt.
• text - Text oder URL für den QR-Code (Modus Text)
• ssid - WiFi SSID (Modus WLAN)
• password - WiFi Passwort (Modus WLAN)
• eventTitle - Titel des Termins (Modus event)
• eventStart - Beginn im Format YYYY-MM-DDTHH:mm (lokale Ortszeit Europe/Berlin, z. B. 2026-04-16T14:30)
• eventEnd - Ende (optional), gleiches Format wie eventStart
• eventLocation - Ort (optional)
• eventDescription - Beschreibung (optional)
• size - Größe (128, 256, 512, 1024)
• errorCorrection - Fehlerkorrektur (L, M, Q, H)
• foreground - Vordergrundfarbe (Hex-Code)
• background - Hintergrundfarbe (Hex-Code)

Beispiele

Normale QR-Codes:

http://localhost:8080/?text=Hello%20World
http://localhost:8080/?text=Test&size=512&errorCorrection=H
http://localhost:8080/?text=Colored&foreground=%23ff0000&background=%23ffff00

WiFi QR-Codes:

http://localhost:8080/?ssid=MeinWLAN&password=MeinPasswort123
http://localhost:8080/?ssid=OffenesWLAN

Termin (Kalender, iCal im QR):

http://localhost:8080/?mode=event&eventTitle=Team-Meeting&eventStart=2026-04-16T14:30&eventEnd=2026-04-16T15:30

Achtung: Das WLAN-Passwort ist im Link im Klartext sichtbar!

WiFi QR-Code Format

Die App generiert automatisch QR-Codes im Standard-WiFi-Format:

WPA/WPA2 Netzwerk:

WIFI:S:<SSID>;T:WPA;P:<Passwort>;;

Offenes Netzwerk (ohne Passwort):

WIFI:S:<SSID>;T:nopass;;

Verwendung:

1. Füllen Sie die WiFi-Felder aus
2. Der QR-Code wird automatisch generiert
3. Das Textfeld zeigt den generierten Code an
4. Scannen Sie ihn mit einem Smartphone

Das Smartphone erkennt automatisch, dass es sich um WiFi-Daten handelt und bietet an, sich mit dem Netzwerk zu verbinden!

Besondere Funktionen

Dynamische Klartext-Anzeige

• Das Textfeld zeigt immer den aktuellen Inhalt des QR-Codes an
• Bei WiFi-Eingaben wird automatisch das korrekte Format angezeigt
• Bei normaler Texteingabe bleibt der eingegebene Text sichtbar

Synchronisierte Felder

• Beim Leeren des Textfeldes werden auch die WiFi-Felder geleert
• Alle Felder werden synchron verwaltet

Intelligente Validierung

• WiFi-Passwort ohne SSID wird als Fehler angezeigt
• Leere Eingaben werden entsprechend behandelt

Teilen-Funktion

Mit dem Button "Teilen" kann ein Link mit allen aktuellen Einstellungen (inkl. WiFi- oder Termin-Daten) in die Zwischenablage kopiert werden. Dieser Link kann weitergegeben werden und öffnet die App direkt mit den gewählten Einstellungen.

Achtung: Wenn ein WLAN-Passwort eingegeben ist, wird dieses im Link im Klartext übertragen!

Sicherheit & Content Security Policy (CSP)

Die Anwendung ist gegen XSS-Angriffe abgesichert:

• Es wird eine strenge Content Security Policy (CSP) verwendet (script-src 'self'), die Inline-Skripte blockiert.
• Das gesamte JavaScript ist in die Datei main.js ausgelagert und wird als externes Skript eingebunden.
• Alle Benutzereingaben und URL-Parameter werden validiert und gefiltert.
• Es wird kein innerHTML verwendet, sondern nur sichere Methoden wie .textContent und .value.