135 lines
3.8 KiB
Markdown
135 lines
3.8 KiB
Markdown
# QR Code Generator
|
|
|
|
Ein einfacher QR-Code-Generator, der vollständig im Browser läuft. Keine Daten werden an externe Server gesendet.
|
|
|
|
## Features
|
|
|
|
- Vollständig clientseitig (keine Server-Kommunikation)
|
|
- URL-Parameter für alle Einstellungen
|
|
- Anpassbare Größen und Farben
|
|
- Verschiedene Fehlerkorrektur-Level
|
|
- Download-Funktion
|
|
- 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)
|
|
|
|
```bash
|
|
# Container bauen und starten
|
|
docker-compose up -d
|
|
|
|
# Container stoppen
|
|
docker-compose down
|
|
```
|
|
|
|
### Mit Docker direkt
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
- `text` - Text oder URL für den QR-Code
|
|
- `ssid` - WiFi SSID
|
|
- `password` - WiFi Passwort
|
|
- `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
|
|
```
|
|
|
|
## 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
|
|
|
|
## 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`. |