34968742f0
Some checks failed
Code Analysis (JS/Vue) / analyze (push) Failing after 55s
Introduce a comprehensive CORS testing guide in CORS_TEST_ANLEITUNG.md, detailing steps for testing OPTIONS and POST requests, along with expected responses. Additionally, add a new HTML test page (test-cors.html) to facilitate interactive testing of CORS headers and responses for the Passkey registration API. Update the server API to ensure proper CORS headers are set for Cross-Device Authentication, enhancing the overall testing and debugging process.
125 lines
3.8 KiB
Markdown
125 lines
3.8 KiB
Markdown
# CORS-Test für Passkey Cross-Device Authentication
|
|
|
|
## Test-Datei verwenden
|
|
|
|
1. **Öffne die Test-Seite:**
|
|
```
|
|
https://harheimertc.tsschulz.de/test-cors.html
|
|
```
|
|
|
|
2. **Führe die Tests aus:**
|
|
- Klicke auf "Test OPTIONS Request" - sollte Status 204 zurückgeben
|
|
- Klicke auf "Test POST Request" - sollte Status 200 zurückgeben
|
|
- Klicke auf "Test /api/auth/register-passkey-options" - sollte Options zurückgeben
|
|
|
|
3. **Prüfe die Browser-Entwicklertools:**
|
|
- Öffne F12 → Network Tab
|
|
- Führe die Tests aus
|
|
- Klicke auf jeden Request und prüfe die **Response Headers**:
|
|
- `Access-Control-Allow-Origin` sollte `https://harheimertc.tsschulz.de` sein
|
|
- `Access-Control-Allow-Credentials` sollte `true` sein
|
|
- `Access-Control-Allow-Methods` sollte `GET, POST, OPTIONS` enthalten
|
|
|
|
## Manueller Test mit curl
|
|
|
|
### OPTIONS Preflight Test:
|
|
```bash
|
|
curl -X OPTIONS \
|
|
-H "Origin: https://harheimertc.tsschulz.de" \
|
|
-H "Access-Control-Request-Method: POST" \
|
|
-H "Access-Control-Request-Headers: Content-Type" \
|
|
-v \
|
|
https://harheimertc.tsschulz.de/api/auth/register-passkey-options
|
|
```
|
|
|
|
**Erwartete Response:**
|
|
- Status: 204 No Content
|
|
- Header: `Access-Control-Allow-Origin: https://harheimertc.tsschulz.de`
|
|
- Header: `Access-Control-Allow-Credentials: true`
|
|
|
|
### POST Request Test:
|
|
```bash
|
|
curl -X POST \
|
|
-H "Origin: https://harheimertc.tsschulz.de" \
|
|
-H "Content-Type: application/json" \
|
|
-d '{"name":"Test","email":"test@example.com"}' \
|
|
-v \
|
|
https://harheimertc.tsschulz.de/api/auth/register-passkey-options
|
|
```
|
|
|
|
**Erwartete Response:**
|
|
- Status: 200 OK
|
|
- Header: `Access-Control-Allow-Origin: https://harheimertc.tsschulz.de`
|
|
- Body: JSON mit `success: true` und `options` Objekt
|
|
|
|
## Browser Console Test
|
|
|
|
Öffne die Browser-Konsole (F12) und führe aus:
|
|
|
|
```javascript
|
|
// Test 1: OPTIONS Preflight
|
|
fetch('https://harheimertc.tsschulz.de/api/auth/register-passkey-options', {
|
|
method: 'OPTIONS',
|
|
headers: {
|
|
'Origin': window.location.origin,
|
|
'Access-Control-Request-Method': 'POST',
|
|
'Access-Control-Request-Headers': 'Content-Type'
|
|
}
|
|
}).then(r => {
|
|
console.log('OPTIONS Status:', r.status);
|
|
console.log('CORS Headers:', {
|
|
origin: r.headers.get('Access-Control-Allow-Origin'),
|
|
credentials: r.headers.get('Access-Control-Allow-Credentials'),
|
|
methods: r.headers.get('Access-Control-Allow-Methods')
|
|
});
|
|
});
|
|
|
|
// Test 2: POST Request
|
|
fetch('https://harheimertc.tsschulz.de/api/auth/register-passkey-options', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Origin': window.location.origin
|
|
},
|
|
body: JSON.stringify({
|
|
name: 'Test User',
|
|
email: 'test@example.com'
|
|
})
|
|
}).then(r => r.json()).then(data => {
|
|
console.log('POST Response:', data);
|
|
console.log('Has Options:', !!data.options);
|
|
console.log('Has Challenge:', !!data.options?.challenge);
|
|
});
|
|
```
|
|
|
|
## Was zu prüfen ist:
|
|
|
|
1. **OPTIONS Request:**
|
|
- Status sollte 204 sein (nicht 200 oder 404)
|
|
- CORS-Header müssen vorhanden sein
|
|
|
|
2. **POST Request:**
|
|
- Status sollte 200 sein
|
|
- CORS-Header müssen vorhanden sein
|
|
- Response sollte `success: true` und `options` enthalten
|
|
|
|
3. **Cross-Device Problem:**
|
|
- Wenn CORS korrekt ist, aber Cross-Device trotzdem nicht funktioniert:
|
|
- Prüfe, ob der QR-Code die richtige Origin enthält
|
|
- Prüfe, ob das Smartphone die gleiche Origin erreichen kann
|
|
- Prüfe die Browser-Logs auf dem Smartphone (falls möglich)
|
|
|
|
## Häufige Probleme:
|
|
|
|
1. **Apache überschreibt CORS-Header:**
|
|
- Lösung: In Apache-Config sicherstellen, dass CORS-Header nicht überschrieben werden
|
|
|
|
2. **OPTIONS gibt 404 zurück:**
|
|
- Lösung: Endpoint muss OPTIONS-Requests explizit behandeln
|
|
|
|
3. **CORS-Header fehlen:**
|
|
- Lösung: Server-Endpoint muss CORS-Header setzen
|
|
|
|
4. **Origin-Mismatch:**
|
|
- Lösung: `WEBAUTHN_ORIGIN` muss exakt mit der Browser-Origin übereinstimmen
|