SvelteKit ist nicht nur ein Framework für clientseitiges UI – es bringt auch alles mit, was für den Bau moderner Fullstack-Webanwendungen nötig ist. Dazu gehören eingebaute Endpunkte, ein flexibles Formularsystem sowie zentrale Sicherheitsfunktionen, die Angriffsflächen wie CSRF oder XSS minimieren. Dieser Artikel beleuchtet, wie diese Mechanismen ineinandergreifen.

🧾 API-Endpunkte direkt im Projekt

SvelteKit erlaubt es, serverseitige Endpunkte ohne externes Backend direkt im src/routes/-Verzeichnis zu definieren.

Beispiel: POST-Endpoint

// src/routes/api/contact/+server.ts
export async function POST({ request }) {
  const data = await request.json();
  // z. B. Validierung, Weiterleitung, Datenbank
  return new Response(JSON.stringify({ success: true }), {
    status: 200,
  });
}

• +server.ts oder +server.js entspricht einem echten HTTP-Endpoint.
• HTTP-Methoden wie GET, POST, PUT, DELETE werden direkt implementiert.
• Responses lassen sich gezielt steuern (Statuscodes, Headers, etc.).

Vorteile:

• Kein separates Backend nötig
• Zugriff auf Umgebungsvariablen (z. B. Datenbank, E-Mail-Service)
• Ideal für Formverarbeitung, Datenabfragen, Authentifizierung

Formulare: progressive Enhancement out of the box

SvelteKit unterstützt serverseitige und clientseitige Formularverarbeitung nahtlos – inklusive Validierung, Redirects und Fehlermeldungen.

Beispiel: Klassisches HTML-Formular mit Serververarbeitung

<form method="POST">
  <input name="email" type="email" required />
  <button type="submit">Absenden</button>
</form>

Dazu passende +page.server.ts:

export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email');

    if (!email || !email.toString().includes('@')) {
      return { status: 400, errors: { email: 'Ungültige E-Mail' } };
    }

    return { success: true };
  },
};

Vorteile:

• Funktioniert ohne JavaScript (Progressive Enhancement)
• Integriertes Actions-System mit Statushandling
• Trennung von Logik und Darstellung

🛡️ Sicherheit in SvelteKit

Sicherheit ist von Anfang an mitgedacht – sowohl auf der Server- als auch auf der Clientseite.

Schutzmechanismen:

Bedrohung	SvelteKit-Schutz oder Praxis
CSRF	Kein Risiko bei origin-basierten POST-Formularen
XSS	Automatisches HTML-Escaping in Templates
Input Validation	Manuell im actions-Objekt oder API-Endpunkten
Rate Limiting	Eigenständig mit Middleware oder Cloud-Lösungen
Session Handling	Mit hooks.server.ts realisierbar (z. B. JWT)
CORS	Konfigurierbar in Endpoints mit Response-Headern

Beispiel: Validierung

if (!email || typeof email !== 'string' || !email.includes('@')) {
  return fail(400, { error: 'Invalid email address' });
}

👉 Für komplexe Szenarien sind Middleware-Lösungen oder dedizierte Auth-Libraries wie lucia-auth oder auth.js empfehlenswert.

🔐 Authentifizierung: Session & Hook-System

SvelteKit nutzt sogenannte Hooks zur Bearbeitung aller Requests – ideal für Authentifizierung, Logging oder Weiterleitungen.

Beispiel: src/hooks.server.ts

export async function handle({ event, resolve }) {
  const token = event.cookies.get('session');
  event.locals.user = validateSession(token); // eigene Logik

  return resolve(event);
}

• Zugriff auf event.locals in jeder Serverfunktion (API, Load, Actions)
• Ideal für Userkontext, Berechtigungen oder Tokens

⚙️ Fullstack mit Datenbank & Auth

Für komplexere Projekte lässt sich SvelteKit problemlos mit Backend-Diensten koppeln:

• ORMs: z. B. Prisma, Drizzle ORM
• SQL / NoSQL: PostgreSQL, SQLite, MongoDB
• Authentication: lucia-auth, Supabase Auth, OAuth
• Deployment: Vercel, Netlify, eigene Node-Server

📌 Best Practices

• Serverlogik in +server.ts und +page.server.ts kapseln
• Validierung und Fehlerbehandlung zentralisieren
• Umgebungsvariablen über .env steuern
• event.locals für Userdaten verwenden
• Formulare möglichst mit serverseitiger Logik kombinieren
• Optional: progressive Enhancement mit clientseitigen Actions ergänzen

Ein letzter Gedanke (Teil 6)

SvelteKit vereint Frontend und Backend nahtlos – mit eingebautem Routing, flexibler Formverarbeitung, sicherem API-Zugriff und voller Kontrolle über den Serverkontext. Dadurch entsteht eine vollständige Fullstack-Plattform, die sich sowohl für schlanke MVPs als auch für produktionsreife Webanwendungen eignet – ohne zusätzliches Node-Backend oder Express-Server.