Vue Academy · Lektion

CSRF-Schutz in Vue-SPAs

SameSite-Cookies, CSRF-Tokens in Axios und das Double-Submit-Cookie-Muster

CSRF-Schutz in Vue-SPAs ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist CSRF

Cross-Site Request Forgery verleitet den Browser eines angemeldeten Benutzers dazu, eine unerwünschte, zustandsändernde Anfrage an Ihre Website zu senden, wobei die vom Browser automatisch gesendeten Cookies verwendet werden. Der Angreifer kann die Antworten nicht lesen, aber Nebenwirkungen wie Überweisungen oder Löschungen verursachen.

Warum Cookies dies ermöglichen

Wenn die Authentifizierung auf einem Sitzungs-Cookie basiert, fügt der Browser es jeder Anfrage an Ihre Domain hinzu – auch solchen, die von einer schädlichen Website ausgelöst werden. Ohne zusätzliche Schutzmaßnahmen kann der Server eine gefälschte Anfrage nicht von einer legitimen unterscheiden.

Das SameSite-Cookie-Attribut

Die Einstellung SameSite für ein Cookie teilt dem Browser mit, wann es Website-übergreifend gesendet werden darf. SameSite=Strict hält das Cookie bei jeder Website-übergreifenden Anfrage zurück und blockiert die meisten CSRF-Angriffe vollständig.

Set-Cookie: session=...; SameSite=Strict; Secure; HttpOnly

Strict vs. Lax

Strict ist am sichersten, kann Benutzer aber abmelden, wenn diese über externe Links auf die Website gelangen. Lax sendet das Cookie nur bei GET-Navigationen auf oberster Ebene – ein üblicher Kompromiss.

Das Synchronizer-Token-Muster

Eine mehrschichtige Verteidigung fügt ein CSRF-Token hinzu, das der Angreifer nicht kennen kann. Der Server stellt ein Token aus; der Client muss es bei zustandsändernden Anfragen zurücksenden.

Double-Submit-Cookie

Ein üblicher Ansatz für SPAs: Der Server setzt das CSRF-Token in einem lesbaren Cookie, das nicht mit HttpOnly gekennzeichnet ist. Der Client liest es aus und sendet es in einem Header erneut. Der Server überprüft, ob beide Werte übereinstimmen.

Set-Cookie: XSRF-TOKEN=abc123; SameSite=Strict; Secure

Token aus dem Cookie lesen

Lesen Sie den Wert des CSRF-Cookies mit einem kleinen Hilfsprogramm in Ihrer Vue-App aus.

function getCookie(name) {
  const match = document.cookie.match(
    new RegExp("(^| )" + name + "=([^;]+)")
  );
  return match ? decodeURIComponent(match[2]) : null;
}
const token = getCookie("XSRF-TOKEN");

Header für Anfragen setzen

Senden Sie das Token bei jeder zustandsändernden Anfrage (POST, PUT, PATCH, DELETE) in einem benutzerdefinierten Header wie X-CSRF-Token.

await fetch("/api/transfer", {
  method: "POST",
  headers: { "X-CSRF-Token": token },
  body: JSON.stringify(payload)
});

Axios-Standardheader

Mit Axios setzen Sie den Header einmal als Standard, sodass ihn jede Anfrage automatisch enthält.

import axios from "axios";

axios.defaults.headers.common["X-CSRF-Token"] = getCookie("XSRF-TOKEN");

Integrierte xsrf-Unterstützung von Axios

Axios kann dies automatisch erledigen: Konfigurieren Sie die Namen des Cookies und des Headers, und Axios liest das Cookie aus und setzt den Header für Sie.

const api = axios.create({
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName: "X-CSRF-Token",
  withCredentials: true
});

Warum ein benutzerdefinierter Header hilft

Browser blockieren das Setzen benutzerdefinierter Header durch Cross-Origin-Websites, sofern nicht zuvor ein CORS-Preflight durchgeführt wurde. Wenn X-CSRF-Token erforderlich ist, kann eine gefälschte Website-übergreifende Anfrage ihn nicht mitsenden, sodass der Server sie ablehnt.

Kurzer Check

Welches Cookie-Attribut vermindert CSRF allein am unmittelbarsten?

Zusammenfassung

CSRF missbraucht automatisch gesendete Cookies, um gefälschte zustandsändernde Anfragen zu stellen. Setzen Sie SameSite=Strict als primäre Schutzmaßnahme für Auth-Cookies und fügen Sie ein CSRF-Token hinzu: Lesen Sie es aus einem Cookie und senden Sie es bei jeder mutierenden Anfrage über einen X-CSRF-Token-Header mit. Konfigurieren Sie diesen einmal als Axios-Standard oder über die integrierten xsrf-Optionen von Axios.

Häufig gestellte Fragen

Ist die Lektion „CSRF-Schutz in Vue-SPAs“ kostenlos?

Ja — der vollständige Text von „CSRF-Schutz in Vue-SPAs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „CSRF-Schutz in Vue-SPAs“?

SameSite-Cookies, CSRF-Tokens in Axios und das Double-Submit-Cookie-Muster Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „CSRF-Schutz in Vue-SPAs“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Vue Academy