harheimertc/CORS_TEST_ANLEITUNG.md

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:

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:

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:

// 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