Vue Academy · Lesson

CSRF Protection in Vue SPAs

SameSite cookies, CSRF tokens in Axios, double submit cookie pattern.

CSRF Protection in Vue SPAs is a free Vue Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is CSRF

Cross-Site Request Forgery tricks a logged-in user's browser into making an unwanted state-changing request to your site, using cookies the browser sends automatically. The attacker cannot read responses but can cause side effects like transfers or deletions.

Why Cookies Enable It

If auth relies on a session cookie, the browser attaches it to every request to your domain - including ones triggered from a malicious site. The server cannot tell a forged request from a legitimate one without extra defense.

The SameSite Cookie Attribute

Setting SameSite on the cookie tells the browser when to send it cross-site. SameSite=Strict withholds the cookie on any cross-site request, blocking most CSRF outright.

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

Strict vs Lax

Strict is safest but can log users out when arriving from external links. Lax sends the cookie on top-level GET navigations only, a common balance.

The Synchronizer Token Pattern

Defense-in-depth adds a CSRF token the attacker cannot know. The server issues a token; the client must echo it back on state-changing requests.

Double-Submit Cookie

A common SPA approach: the server sets the CSRF token in a readable (non-HttpOnly) cookie. The client reads it and resends it in a header. The server verifies the two match.

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

Reading the Token from the Cookie

Read the CSRF cookie value with a small helper in your Vue app.

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

Setting the Header on Requests

Send the token in a custom header like X-CSRF-Token on every state-changing request (POST, PUT, PATCH, DELETE).

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

Axios Default Headers

With Axios you set the header once as a default so every request includes it automatically.

import axios from "axios";

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

Axios Built-in xsrf Support

Axios can do this automatically: configure the cookie and header names and it reads the cookie and sets the header for you.

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

Why a Custom Header Helps

Browsers block cross-origin sites from setting custom headers without a passed CORS preflight. Requiring X-CSRF-Token means a forged cross-site request cannot include it, so the server rejects it.

Quick Check

Which cookie attribute most directly mitigates CSRF by itself?

Recap

CSRF abuses automatically-sent cookies to forge state-changing requests. Set SameSite=Strict on auth cookies as the primary defense, and add a CSRF token: read it from a cookie and send it on every mutating request via an X-CSRF-Token header, configured once as an Axios default or through Axios's built-in xsrf options.

Frequently asked questions

Is the “CSRF Protection in Vue SPAs” lesson free?

Yes — the full text of “CSRF Protection in Vue SPAs” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “CSRF Protection in Vue SPAs”?

SameSite cookies, CSRF tokens in Axios, double submit cookie pattern. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “CSRF Protection in Vue SPAs” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy