Vue Academy · Aula

Proteção contra CSRF em SPAs Vue

Cookies SameSite, tokens CSRF no Axios e padrão de cookie de envio duplo.

Proteção contra CSRF em SPAs Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

O que é CSRF

Cross-Site Request Forgery induz o navegador de um usuário autenticado a fazer uma requisição indesejada que altera o estado do seu site, usando cookies enviados automaticamente pelo navegador. O invasor não consegue ler as respostas, mas pode causar efeitos colaterais, como transferências ou exclusões.

Por que os cookies permitem isso

Se a autenticação depender de um cookie de sessão, o navegador o anexa a toda requisição para seu domínio, inclusive às disparadas a partir de um site malicioso. Sem uma defesa adicional, o servidor não consegue distinguir uma requisição forjada de uma legítima.

O atributo SameSite do cookie

Definir SameSite no cookie informa ao navegador quando enviá-lo entre sites. SameSite=Strict impede o envio do cookie em qualquer requisição entre sites, bloqueando diretamente a maioria dos ataques CSRF.

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

Strict versus Lax

Strict é a opção mais segura, mas pode desconectar usuários que chegam por links externos. Lax envia o cookie somente em navegações GET de nível superior, um equilíbrio comum.

O padrão de token sincronizador

Uma defesa em camadas adiciona um token CSRF que o invasor não pode conhecer. O servidor fornece um token; o cliente precisa devolvê-lo nas requisições que alteram o estado.

Cookie de envio duplo

Uma abordagem comum para SPA: o servidor define o token CSRF em um cookie legível (não HttpOnly). O cliente o lê e o reenvia em um cabeçalho. O servidor verifica se os dois valores correspondem.

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

Lendo o token do cookie

Leia o valor do cookie CSRF com uma pequena função auxiliar no seu aplicativo Vue.

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

Definindo o cabeçalho nas requisições

Envie o token em um cabeçalho personalizado, como X-CSRF-Token, em toda requisição que altere o estado (POST, PUT, PATCH, DELETE).

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

Cabeçalhos padrão do Axios

Com o Axios, defina o cabeçalho uma única vez como padrão, para que toda requisição o inclua automaticamente.

import axios from "axios";

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

Suporte xsrf integrado do Axios

O Axios pode fazer isso automaticamente: configure os nomes do cookie e do cabeçalho, e ele lerá o cookie e definirá o cabeçalho por você.

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

Por que um cabeçalho personalizado ajuda

Os navegadores impedem que sites de origens diferentes definam cabeçalhos personalizados sem uma verificação prévia CORS. Exigir X-CSRF-Token significa que uma requisição forjada entre sites não poderá incluí-lo, então o servidor a rejeitará.

Verificação rápida

Qual atributo de cookie reduz mais diretamente o CSRF por si só?

Recapitulação

O CSRF abusa de cookies enviados automaticamente para forjar requisições que alteram o estado. Defina SameSite=Strict nos cookies de autenticação como defesa principal e adicione um token CSRF: leia-o de um cookie e envie-o em toda requisição mutável por meio de um cabeçalho X-CSRF-Token, configurado uma única vez como padrão do Axios ou por meio das opções xsrf integradas do Axios.

Perguntas Frequentes

A aula “Proteção contra CSRF em SPAs Vue” é grátis?

Sim — o texto completo de “Proteção contra CSRF em SPAs Vue” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Proteção contra CSRF em SPAs Vue”?

Cookies SameSite, tokens CSRF no Axios e padrão de cookie de envio duplo. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Proteção contra CSRF em SPAs Vue”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Vue Academy