Feature: Notizen erstellen und bearbeiten (Rich Media Support)
Diese Kernfunktion ermöglicht es Nutzern, Inhalte sicher zu speichern, zu kategorisieren und mit Medien wie Bildern oder Videos zu bereichern.
🛠 Technische Umsetzung
Erstellung & Bearbeitung
- Komponenten:
entryCard.vue(Erstellung) undEditNoteView.vue(Bearbeitung). - Markdown & HTML-Integration: Die App unterstützt Markdown-Syntax und HTML-Syntax(außer bei hohem Risiko, für das die Warnung angezeigt wurde) für die Textformatierung.
- Notizen-Art: Notizen können entweder
publicoderprivateeingestellt - Medien-Syntax: Um Sicherheitsrisiken durch direktes HTML zu vermeiden, nutzt die App eine spezielle Syntax für eingebettete Medien:
- Bilder:
 - Videos:

- Bilder:
Rendering-Prozess
- Der Nutzer gibt die Notiz mit der Spezial-Syntax ein.
- Beim Speichern wird der Inhalt durch DOMPurify bereinigt.
- In der Detailansicht extrahiert ein benutzerdefinierter Markdown-Renderer die Video-ID (z. B. von YouTube) und wandelt sie in ein sicheres, isoliertes
iframeum.
🛡️ Schwachstellen & Vorbeugung
| Schwachstelle | Vorbeugung |
|---|---|
| XSS in Notizinhalten | Aktiv: DOMPurify bereinigt jeden Titel und Textkörper vor dem Speichern und vor der Anzeige. |
| Bösartige Video-Iframes | Regex-Validierung: Nur validierte YouTube-IDs sind erlaubt. Das System blockiert unbekannte oder schädliche Quellen innerhalb des embed: Befehls. |
| Insecure Direct Object Reference (IDOR) | Backend-Schutz: Das System prüft bei jedem Request, ob die user_id des JWT-Tokens mit dem Besitzer der Notiz übereinstimmt. |
| Unbefugtes Teilen | RLS Policies: Row Level Security in der Datenbank stellt sicher, dass nur Besitzer (owner_id) oder autorisierte Empfänger Zugriff haben. |
🔒 Datenschutz
Sensibilität & Medien
- Keine Indizierung: Notizen sind privat und für Suchmaschinen unsichtbar.
- YouTube No-Cookie: Eingebettete Videos werden über
youtube-nocookie.comgeladen, um das Tracking der Nutzer durch Drittanbieter-Cookies zu unterbinden. - Daten-Integrität: Die Daten werden gereinigt von schädlichen Skripten gespeichert, wobei die ursprüngliche Formatierung des Nutzers erhalten bleibt.
- Löschkonzept: Ein Löschbefehl entfernt die Notiz gemäß der RLS-Policy dauerhaft aus der Datenbank ("Recht auf Vergessenwerden").
💡 UX-Besonderheiten
- Vorschau-Logik: Die spezialisierte Syntax erlaubt eine klare Trennung zwischen Textinhalt und Medienanhängen.
- Echtzeit-Validierung: Felder werden bereits während der Eingabe auf Länge und beim Speichern auf unzulässige Zeichen (XSS) geprüft.
- Zustands-Management: Nach dem Speichern wird
router.replaceverwendet, um den Browserverlauf sauber zu halten und doppelte Formularabsendungen zu verhindern.