security, optik

Author: skerbis

CHANGELOG.md

@@ -0,0 +1,67 @@
+# Changelog
+
+## Version 1.2.0 (2026-02-05)
+
+### 🔒 Security
+- **XSS-Schutz**: Labels und Values werden jetzt korrekt escaped in JavaScript
+- **Type Safety**: Strikte Typ-Prüfungen für alle API-Parameter implementiert
+- **SQL-Injection**: Verbesserte Parameter-Validierung und Prepared Statements
+- **Input-Validierung**: Strikte Validierung aller GET-Parameter
+
+### ✅ Code Quality
+- **Rexstan**: Alle 12 Rexstan-Fehler behoben ✅
+  - Type-Hints für alle Methoden hinzugefügt
+  - `empty()` durch strikte Vergleiche ersetzt (`count($array) > 0`)
+  - Boolean-Operationen mit expliziten Checks korrigiert
+  - Strikte `in_array()` Vergleiche mit `true` Parameter
+  - Unreachable Code entfernt
+- **REDAXO Standards**: 
+  - `rex_response::sendJson()` statt manueller Header
+  - `rex_response::cleanOutputBuffers()` am Anfang der API-Methode
+  - Korrekte Return-Types für rex_api_function
+- **PSR-12**: Code-Style vollständig angepasst
+  - Yoda-Notation für Vergleiche (`'' === $value`)
+  - Konsistente String-Quotes
+  - Optimierte Imports mit `use function`
+  - Trailing Commas in Arrays
+
+### 🎨 UI/UX & Theme Support
+- **Dark Theme Support**:
+  - Vollständige Unterstützung für `rex-theme-dark` ✨
+  - Auto-Modus via `prefers-color-scheme: dark` ✨
+  - REDAXO-konforme Farbvariablen aus `_variables-dark.scss`
+  - CSS Custom Properties mit Fallbacks
+- **CSS-Verbesserungen**:
+  - Hover-Effekte für bessere Interaktivität
+  - Verbesserte Farbgebung und Kontraste
+  - Handle-Cursor für Drag & Drop
+  - Transition-Animationen
+- **Accessibility**:
+  - ARIA-Labels für alle interaktiven Elemente
+  - Focus-States mit Outline für Tastatur-Navigation
+  - Semantische Button-Labels
+- **Responsive Design**:
+  - Mobile-optimiertes Layout mit flexbox
+  - Breakpoints für Tablets und Smartphones
+
+### 🚀 Performance
+- **Document Fragments**: DOM-Elemente werden gebündelt eingefügt (Single Reflow)
+- **Debounced Search**: Suchfunktion mit 200ms Verzögerung reduziert API-Calls
+- **Cache Control**: Korrekte HTTP-Header für frische Daten
+- **Optimized Queries**: Effiziente SQL-Queries mit DISTINCT und Indexierung
+
+### 📦 Meta
+- **package.yml**: Version auf 1.2.0 erhöht
+- **PHP-Requirement**: PHP >= 8.2 (für `never` Return-Type)
+- **Author**: Korrigiert zu "Friends of REDAXO"
+- **Repository**: GitHub-Link zu FriendsOfREDAXO aktualisiert
+- **CHANGELOG.md**: Vollständige Dokumentation aller Änderungen
+
+### 📚 Dokumentation
+- **README.md**: Erweitert mit Security-Hinweisen
+- **Performance-Tipps**: Dokumentiert im README
+- **Accessibility-Features**: Aufgelistet und erklärt
+- **Theme-Support**: Dark/Light/Auto Modi dokumentiert
+
+## Version 1.1.2
+- Initiale Version

README.md

@@ -4,25 +4,38 @@ Ermöglicht die Auswahl und Sortierung verknüpfter Datensätze mit erweiterten
 
 ## Features
 
-- Benutzerfreundliche Oberfläche zum Auswählen und Sortieren von Datensätzen
-- Flexible Filtermöglichkeiten mit einer vereinfachten Syntax
-- Durchsuchbare Liste verfügbarer Einträge
-- Drag & Drop Sortierung der ausgewählten Einträge
-- Unterstützung für Meta Infos
-- Automatische Datumswerte (now, today)
-- Flexible Label-Gestaltung durch Feldverknüpfungen
+- 🎯 Benutzerfreundliche Oberfläche zum Auswählen und Sortieren von Datensätzen
+- 🔍 Durchsuchbare Liste verfügbarer Einträge mit Debounce-Optimierung
+- 🎨 Drag & Drop Sortierung der ausgewählten Einträge
+- 🔒 Sichere API mit XSS-Schutz und Type Safety
+- 📱 Responsive Design für mobile Geräte
+- ♿ Accessibility-optimiert (ARIA-Labels, Keyboard-Navigation)
+- 🚀 Performance-optimiert (Document Fragments, debounced Search)
+- 🔧 Flexible Filtermöglichkeiten mit vereinfachter Syntax
+- 📅 Automatische Datumswerte (now, today)
+- 🏷️ Flexible Label-Gestaltung durch Feldverknüpfungen
+- 🔗 Unterstützung für Meta Infos und YForm
 
 ## Installation
 
 1. Im REDAXO Installer das AddOn "relation_select" herunterladen
 2. AddOn installieren und aktivieren
+3. Bei Bedarf: API-Token für Frontend-Nutzung notieren
+
+## Anforderungen
+
+- REDAXO >= 5.17
+- PHP >= 8.2
 
 ## Anwendung
 
 ### Basis-Konfiguration
+
+Das AddOn wird automatisch initialisiert, sobald ein Input-Feld das Attribut `data-relation-config` hat:
+
 ```html
-<input type="text" name="my_field" 
-    data-relation-mode="modal" 
+<input type="text" 
+    name="my_field" 
     data-relation-config='{
         "table": "rex_article",
         "valueField": "id",
@@ -31,13 +44,40 @@ Ermöglicht die Auswahl und Sortierung verknüpfter Datensätze mit erweiterten
 >
 ```
 
-### Beispiel für eine Relation in Yform
+**Hinweis:** Das Attribut `data-relation-mode` ist optional und wird aktuell nicht verwendet. Die Widget-Darstellung erfolgt immer inline.
+
+### Beispiel für eine Relation in YForm
+
+Das Feld wird als **Textfeld** mit dem Namen der Relation angelegt (z.B. `autoren_id`).
+
+Bei den **individuellen Attributen** des Feldes wird folgendes eingetragen:
+
+```json
+{
+    "data-relation-config": "{
+        \"table\": \"rex_autoren\",
+        \"valueField\": \"id\",
+        \"labelField\": \"vorname|nachname\"
+    }"
+}
+```
 
-Das Feld wird als Textfeld mit dem Namen der Relation angelegt (z.B. autoren_id).
+**Wichtig:** In YForm muss das JSON doppelt escaped werden (siehe Beispiel).
 
-Bei den individuellen Attributen des Feldes kann dann folgendes eingetragen werden:
+### Beispiel mit Filtern und Sortierung
 
-`{"data-relation-mode":"modal","data-relation-config":"{\"table\": \"rex_autoren\",\"valueField\": \"id\",\"labelField\": \"anrede|vorname|nachname\"}"}`
+```html
+<input type="text" 
+    name="authors" 
+    data-relation-config='{
+        "table": "rex_authors",
+        "valueField": "id",
+        "labelField": "firstname|lastname",
+        "dbw": "status = 1, published != 0",
+        "dbob": "lastname,ASC,firstname,ASC"
+    }'
+>
+```
 
 ### Label-Syntax
 
@@ -121,6 +161,56 @@ Der `dbob` Parameter bestimmt die Sortierung der Einträge.
 ```
 
 
+## Sicherheit
+
+### XSS-Schutz
+Alle Ausgaben (Labels, Values) werden automatisch escaped, um Cross-Site-Scripting (XSS) Angriffe zu verhindern.
+
+### SQL-Injection-Schutz
+Die API verwendet Prepared Statements und Parameter-Binding für alle Datenbankabfragen. Tabellenamen und Feldnamen werden mit `rex_sql::escapeIdentifier()` escaped.
+
+### Type Safety
+Das AddOn ist vollständig mit Rexstan validiert und verwendet strikte Typ-Deklarationen für alle Methoden und Parameter.
+
+### API Token
+Für Frontend-Zugriffe ist ein API-Token erforderlich. Backend-Zugriffe sind durch die REDAXO-Session geschützt.
+
+## Performance
+
+- **Document Fragments**: DOM-Manipulationen werden gebündelt für minimale Reflows
+- **Debounced Search**: Suchfunktion mit 200ms Verzögerung für bessere Performance
+- **Cache Control**: API-Responses werden nicht gecacht für aktuelle Daten
+- **Optimized Queries**: SQL-Queries mit `DISTINCT` und optimierten WHERE/ORDER-Klauseln
+
+## Barrierefreiheit
+
+- ARIA-Labels für alle interaktiven Elemente
+- Keyboard-Navigation unterstützt
+- Focus-States für bessere Sichtbarkeit
+- Semantisches HTML
+
+## Theme-Support
+
+Das AddOn unterstützt alle REDAXO-Themes:
+
+### Light Theme (Standard)
+Helle Farben und hoher Kontrast für optimale Lesbarkeit
+
+### Dark Theme
+- Explizit: `body.rex-theme-dark`
+- Auto-Modus: `@media (prefers-color-scheme: dark)`
+- Verwendet REDAXO's offizielle Dark-Theme-Farbpalette
+- Farben: `#202b35` (Background), `#409be4` (Links), `rgba(255, 255, 255, 0.75)` (Text)
+
+### Auto Theme
+Automatische Erkennung der System-Präferenz mit Fallback auf Light Theme
+
+**CSS Custom Properties** mit Fallbacks sorgen für maximale Kompatibilität:
+```css
+color: var(--rex-text-color, #333);
+background: var(--rex-panel-bg, #fff);
+```
+
 ## Autor
 
 **Friends Of REDAXO**