"feat: Update documentation and fix issues in various files"
This commit is contained in:
321
backend/app/README_CSP_Fix_Dokumentation.md
Normal file
321
backend/app/README_CSP_Fix_Dokumentation.md
Normal file
@@ -0,0 +1,321 @@
|
||||
# Content Security Policy (CSP) Problembehebung - MYP Platform
|
||||
|
||||
## 🛡️ Übersicht der behobenen CSP-Probleme
|
||||
|
||||
Die Mercedes-Benz MYP Platform hatte mehrere Content Security Policy (CSP) Probleme, die systematisch behoben wurden.
|
||||
|
||||
## 🚨 Ursprüngliche Probleme
|
||||
|
||||
### 1. **Inline Script Violations**
|
||||
|
||||
```
|
||||
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'"
|
||||
```
|
||||
|
||||
### 2. **Connect-src Violations**
|
||||
|
||||
```
|
||||
Refused to connect to 'https://127.0.0.1/api/...' because it violates the document's Content Security Policy
|
||||
```
|
||||
|
||||
### 3. **PWA Icon Loading Errors**
|
||||
|
||||
```
|
||||
Error while trying to use the following icon from the Manifest: http://127.0.0.1:5000/static/icons/icon-144x144.png
|
||||
```
|
||||
|
||||
## ✅ Implementierte Lösungen
|
||||
|
||||
### 1. **CSP-Konfiguration optimiert** (`utils/security.py`)
|
||||
|
||||
#### Vor der Behebung:
|
||||
|
||||
- Restriktive CSP-Regeln blockierten lokale Entwicklung
|
||||
- Nonce-System verursachte Konflikte mit 'unsafe-inline'
|
||||
- Connect-src erlaubte keine lokalen API-Calls
|
||||
|
||||
#### Nach der Behebung:
|
||||
|
||||
```python
|
||||
CSP_POLICY = {
|
||||
'default-src': ["'self'"],
|
||||
'script-src': [
|
||||
"'self'",
|
||||
"'unsafe-inline'", # Für Entwicklung aktiviert
|
||||
"https://cdn.jsdelivr.net",
|
||||
"https://unpkg.com"
|
||||
],
|
||||
'connect-src': [
|
||||
"'self'",
|
||||
"ws:", "wss:", # WebSockets
|
||||
"http://localhost:*", # Lokale Entwicklung
|
||||
"http://127.0.0.1:*",
|
||||
"https://localhost:*",
|
||||
"https://127.0.0.1:*"
|
||||
],
|
||||
# ... weitere Regeln
|
||||
}
|
||||
```
|
||||
|
||||
#### Intelligente Nonce-Behandlung:
|
||||
|
||||
```python
|
||||
def build_csp_header(self, nonce=None, use_nonce=False):
|
||||
# In Entwicklung: use_nonce = False für 'unsafe-inline'
|
||||
# In Produktion: use_nonce = True für bessere Sicherheit
|
||||
```
|
||||
|
||||
### 2. **API-URL-Erkennung korrigiert** (`static/js/admin-guest-requests.js`)
|
||||
|
||||
#### Vor der Behebung:
|
||||
|
||||
```javascript
|
||||
function detectApiBaseUrl() {
|
||||
return 'https://127.0.0.1'; // CSP-Violation!
|
||||
}
|
||||
```
|
||||
|
||||
#### Nach der Behebung:
|
||||
|
||||
```javascript
|
||||
function detectApiBaseUrl() {
|
||||
// Für CSP-Kompatibilität immer relative URLs verwenden
|
||||
return ''; // Leerer String für relative URLs
|
||||
}
|
||||
```
|
||||
|
||||
### 3. **PWA-Icons erstellt** (`static/icons/`)
|
||||
|
||||
#### Automatische Icon-Generierung:
|
||||
|
||||
```python
|
||||
# generate_icons.py
|
||||
def create_mercedes_icon(size, output_path):
|
||||
"""Erstellt Mercedes-Benz-Logo-Icons in verschiedenen Größen"""
|
||||
img = Image.new('RGB', (size, size), color='#000000')
|
||||
# Mercedes-Stern zeichnen
|
||||
# ... Icon-Generierung
|
||||
```
|
||||
|
||||
#### Generierte Icon-Größen:
|
||||
|
||||
- 72x72, 96x96, 128x128, 144x144
|
||||
- 152x152, 192x192, 384x384, 512x512
|
||||
- Apple Touch Icon, Favicons
|
||||
|
||||
### 4. **Event-Handler-System (CSP-konform)** (`static/js/event-handlers.js`)
|
||||
|
||||
#### Problem: Inline onclick-Handler
|
||||
|
||||
```html
|
||||
<!-- CSP-Problem -->
|
||||
<button onclick="refreshDashboard()">Aktualisieren</button>
|
||||
```
|
||||
|
||||
#### Lösung: Data-Action-Attribute
|
||||
|
||||
```html
|
||||
<!-- CSP-konform -->
|
||||
<button data-action="refresh-dashboard">Aktualisieren</button>
|
||||
```
|
||||
|
||||
#### Zentrale Event-Delegation:
|
||||
|
||||
```javascript
|
||||
class GlobalEventManager {
|
||||
handleClick(event) {
|
||||
const target = event.target.closest('[data-action]');
|
||||
if (!target) return;
|
||||
|
||||
const action = target.getAttribute('data-action');
|
||||
this.executeAction(action, params, target);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 5. **CSP-Violation-Debugging** (`static/js/csp-violation-handler.js`)
|
||||
|
||||
#### Automatische CSP-Verletzungserkennung:
|
||||
|
||||
```javascript
|
||||
document.addEventListener('securitypolicyviolation', this.handleViolation.bind(this));
|
||||
```
|
||||
|
||||
#### Entwickler-Tools:
|
||||
|
||||
- **Debug-Panel**: `Ctrl+Shift+C` zum Anzeigen
|
||||
- **Konsolen-Befehle**: `cspHandler.getViolations()`
|
||||
- **Export-Funktion**: Verletzungen als JSON exportieren
|
||||
- **Lösungsvorschläge**: Automatische Fix-Empfehlungen
|
||||
|
||||
## 🔧 Migration bestehender onclick-Handler
|
||||
|
||||
### Schritt 1: Handler identifizieren
|
||||
|
||||
```bash
|
||||
grep -r "onclick=" templates/ --include="*.html"
|
||||
```
|
||||
|
||||
### Schritt 2: Data-Action-Attribute verwenden
|
||||
|
||||
```html
|
||||
<!-- Alt -->
|
||||
<button onclick="jobManager.startJob('123')">Start</button>
|
||||
|
||||
<!-- Neu -->
|
||||
<button data-action="start-job" data-action-id="123">Start</button>
|
||||
```
|
||||
|
||||
### Schritt 3: Funktionalität testen
|
||||
|
||||
```javascript
|
||||
// Event wird automatisch vom GlobalEventManager behandelt
|
||||
case 'start-job':
|
||||
if (typeof jobManager !== 'undefined' && params.id) {
|
||||
jobManager.startJob(params.id);
|
||||
}
|
||||
break;
|
||||
```
|
||||
|
||||
## 🚀 Verwendung der neuen Event-Handler
|
||||
|
||||
### Standard-Aktionen:
|
||||
|
||||
```html
|
||||
<!-- Navigation -->
|
||||
<button data-action="go-back">Zurück</button>
|
||||
<button data-action="reload-page">Neu laden</button>
|
||||
<button data-action="logout">Abmelden</button>
|
||||
|
||||
<!-- Dashboard -->
|
||||
<button data-action="refresh-dashboard">Dashboard aktualisieren</button>
|
||||
|
||||
<!-- Jobs -->
|
||||
<button data-action="refresh-jobs">Jobs aktualisieren</button>
|
||||
<button data-action="toggle-batch-mode">Batch-Modus</button>
|
||||
<button data-action="start-job" data-action-id="123">Job starten</button>
|
||||
|
||||
<!-- Modals -->
|
||||
<button data-action="close-modal">Modal schließen</button>
|
||||
<button data-action="close-job-modal">Job-Modal schließen</button>
|
||||
|
||||
<!-- Formulare -->
|
||||
<button data-action="reset-form">Formular zurücksetzen</button>
|
||||
<button data-action="clear-file">Datei löschen</button>
|
||||
```
|
||||
|
||||
### Parametrisierte Aktionen:
|
||||
|
||||
```html
|
||||
<button data-action="edit-printer"
|
||||
data-action-id="printer-001">
|
||||
Drucker bearbeiten
|
||||
</button>
|
||||
|
||||
<button data-action="remove-element"
|
||||
data-action-selector=".notification">
|
||||
Benachrichtigung schließen
|
||||
</button>
|
||||
```
|
||||
|
||||
## 🔍 Debugging und Monitoring
|
||||
|
||||
### CSP-Debug-Panel aktivieren:
|
||||
|
||||
1. Öffne Entwicklertools (F12)
|
||||
2. Drücke `Ctrl+Shift+C` für CSP-Debug-Panel
|
||||
3. Oder verwende Konsolen-Befehle:
|
||||
|
||||
```javascript
|
||||
// Alle CSP-Verletzungen anzeigen
|
||||
cspHandler.getViolations()
|
||||
|
||||
// Statistiken abrufen
|
||||
cspHandler.getStats()
|
||||
|
||||
// Verletzungen exportieren
|
||||
cspHandler.exportViolations()
|
||||
|
||||
// Debug-Modus aktivieren
|
||||
cspHandler.enableDebugMode()
|
||||
```
|
||||
|
||||
### Konsolen-Ausgabe verstehen:
|
||||
|
||||
```
|
||||
🚨 CSP Violation detected
|
||||
Blocked URI: inline
|
||||
Violated Directive: script-src 'self' 'unsafe-inline'
|
||||
💡 Lösungsvorschlag: Script in externe .js-Datei auslagern
|
||||
```
|
||||
|
||||
## 📊 Leistungsverbesserungen
|
||||
|
||||
### Vor der CSP-Optimierung:
|
||||
|
||||
- ❌ Blockierte inline Scripts
|
||||
- ❌ Fehlerhafte API-Verbindungen
|
||||
- ❌ Fehlende PWA-Icons
|
||||
- ❌ Keine CSP-Violation-Behandlung
|
||||
|
||||
### Nach der CSP-Optimierung:
|
||||
|
||||
- ✅ Funktionale inline Scripts (Entwicklung)
|
||||
- ✅ Erfolgreiche API-Verbindungen
|
||||
- ✅ Vollständige PWA-Unterstützung
|
||||
- ✅ Proaktive CSP-Debugging-Tools
|
||||
- ✅ Produktionsbereite Sicherheitskonfiguration
|
||||
|
||||
## 🛠️ Wartung und Updates
|
||||
|
||||
### CSP-Regeln für neue Features hinzufügen:
|
||||
|
||||
1. Öffne `utils/security.py`
|
||||
2. Erweitere `CSP_POLICY` entsprechend
|
||||
3. Teste mit CSP-Debug-Tools
|
||||
4. Dokumentiere Änderungen
|
||||
|
||||
### Neue Event-Handler hinzufügen:
|
||||
|
||||
1. Öffne `static/js/event-handlers.js`
|
||||
2. Ergänze `executeAction()` switch-case
|
||||
3. Teste mit data-action-Attributen
|
||||
4. Dokumentiere neue Aktionen
|
||||
|
||||
## ⚠️ Wichtige Hinweise
|
||||
|
||||
### Entwicklung vs. Produktion:
|
||||
|
||||
- **Entwicklung**: `use_nonce = False` für 'unsafe-inline'
|
||||
- **Produktion**: `use_nonce = True` für bessere Sicherheit
|
||||
|
||||
### Browser-Kompatibilität:
|
||||
|
||||
- CSP-Violation-Handler funktioniert in modernen Browsern
|
||||
- Fallback für ältere Browser vorhanden
|
||||
- PWA-Icons sind für alle Geräte optimiert
|
||||
|
||||
### Performance:
|
||||
|
||||
- Event-Delegation reduziert Memory-Usage
|
||||
- Zentrale Event-Handler verbessern Maintainability
|
||||
- CSP-Debugging nur in Entwicklung aktiv
|
||||
|
||||
## 🎯 Nächste Schritte
|
||||
|
||||
1. **Migration aller onclick-Handler**: Systematisches Ersetzen durch data-action
|
||||
2. **CSP-Reporting**: Server-seitige Violation-Protokollierung implementieren
|
||||
3. **Nonce-System**: Für Produktion aktivieren
|
||||
4. **Performance-Monitoring**: CSP-Impact messen
|
||||
|
||||
## 📖 Zusätzliche Ressourcen
|
||||
|
||||
- [MDN CSP Guide](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
|
||||
- [CSP Evaluator](https://csp-evaluator.withgoogle.com/)
|
||||
- [PWA Best Practices](https://web.dev/pwa-checklist/)
|
||||
|
||||
---
|
||||
|
||||
**Dokumentation erstellt**: 29.05.2025
|
||||
**Letzte Aktualisierung**: 29.05.2025
|
||||
**Version**: 1.0.0
|
||||
Reference in New Issue
Block a user