Vue Academy · Lekcja

Ochrona CSRF w aplikacjach SPA Vue

Ciastka SameSite, tokeny CSRF w Axios oraz wzorzec double submit cookie.

Ochrona CSRF w aplikacjach SPA Vue to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Czym jest CSRF

Cross-Site Request Forgery to atak, który nakłania przeglądarkę zalogowanego użytkownika do wykonania niepożądanego żądania zmieniającego stan w witrynie, wykorzystując pliki cookie wysyłane przez przeglądarkę automatycznie. Atakujący nie może odczytać odpowiedzi, ale może wywołać skutki uboczne, takie jak przelewy lub usunięcia danych.

Dlaczego pliki cookie to umożliwiają

Jeśli uwierzytelnianie opiera się na pliku cookie sesji, przeglądarka dołącza go do każdego żądania kierowanego do domeny — również do żądań wywołanych ze złośliwej witryny. Bez dodatkowej ochrony serwer nie potrafi odróżnić sfałszowanego żądania od prawidłowego.

Atrybut SameSite pliku cookie

Ustawienie SameSite na pliku cookie informuje przeglądarkę, kiedy ma go wysyłać między witrynami. SameSite=Strict uniemożliwia wysyłanie pliku cookie przy każdym żądaniu między witrynami, blokując tym samym większość ataków CSRF.

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

Strict a Lax

Strict zapewnia największe bezpieczeństwo, ale może wylogować użytkowników przechodzących z zewnętrznych łączy. Lax wysyła plik cookie tylko podczas nawigacji GET najwyższego poziomu, co stanowi często stosowany kompromis.

Wzorzec tokenu synchronizującego

Obrona wielowarstwowa dodaje token CSRF, którego atakujący nie może znać. Serwer wydaje token, a klient musi odesłać go przy żądaniach zmieniających stan.

Podwójne przesłanie pliku cookie

Popularne podejście w aplikacjach SPA: serwer ustawia token CSRF w dostępnym dla skryptów pliku cookie (bez HttpOnly). Klient odczytuje go i wysyła ponownie w nagłówku. Serwer sprawdza, czy obie wartości są zgodne.

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

Odczytywanie tokenu z pliku cookie

Wartość pliku cookie CSRF należy odczytać za pomocą niewielkiej funkcji pomocniczej w aplikacji Vue.

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

Ustawianie nagłówka żądań

Token należy wysyłać w niestandardowym nagłówku, takim jak X-CSRF-Token, przy każdym żądaniu zmieniającym stan (POST, PUT, PATCH, DELETE).

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

Domyślne nagłówki Axios

W Axios nagłówek można ustawić jednorazowo jako domyślny, aby każde żądanie automatycznie go zawierało.

import axios from "axios";

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

Wbudowana obsługa xsrf w Axios

Axios może robić to automatycznie: należy skonfigurować nazwy pliku cookie i nagłówka, a Axios odczyta plik cookie i ustawi nagłówek.

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

Dlaczego niestandardowy nagłówek pomaga

Przeglądarki blokują witryny z innych źródeł, które próbują ustawić niestandardowe nagłówki bez pomyślnego przejścia wstępnego żądania CORS. Wymaganie nagłówka X-CSRF-Token oznacza, że sfałszowane żądanie między witrynami nie może go zawierać, więc serwer je odrzuci.

Szybkie sprawdzenie

Który atrybut pliku cookie sam w sobie najbardziej bezpośrednio ogranicza ryzyko CSRF?

Podsumowanie

CSRF wykorzystuje pliki cookie wysyłane automatycznie do fałszowania żądań zmieniających stan. Należy ustawić SameSite=Strict na plikach cookie uwierzytelniania jako podstawową ochronę, a także dodać token CSRF: odczytywać go z pliku cookie i wysyłać przy każdym żądaniu mutującym za pomocą nagłówka X-CSRF-Token, skonfigurowanego jednorazowo jako domyślny nagłówek Axios lub za pomocą wbudowanych opcji xsrf Axios.

Często zadawane pytania

Czy lekcja „Ochrona CSRF w aplikacjach SPA Vue” jest bezpłatna?

Tak — pełny tekst „Ochrona CSRF w aplikacjach SPA Vue” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Ochrona CSRF w aplikacjach SPA Vue”?

Ciastka SameSite, tokeny CSRF w Axios oraz wzorzec double submit cookie. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Ochrona CSRF w aplikacjach SPA Vue”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Vue Academy