Protección contra CSRF en SPA de Vue
Cookies SameSite, tokens CSRF en Axios y patrón de doble envío de cookie
Protección contra CSRF en SPA de Vue es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Qué es CSRF
Cross-Site Request Forgery induce al navegador de un usuario autenticado a realizar una solicitud no deseada que cambia el estado de su sitio, utilizando las cookies que el navegador envía automáticamente. El atacante no puede leer las respuestas, pero sí provocar efectos secundarios, como transferencias o eliminaciones.
Por qué las cookies lo permiten
Si la autenticación depende de una cookie de sesión, el navegador la adjunta a cada solicitud dirigida a su dominio, incluidas las que se activan desde un sitio malicioso. Sin una defensa adicional, el servidor no puede distinguir una solicitud falsificada de una legítima.
El atributo de cookie SameSite
Establecer SameSite en la cookie indica al navegador cuándo debe enviarla entre sitios. SameSite=Strict impide enviar la cookie en cualquier solicitud entre sitios y bloquea directamente la mayoría de los ataques CSRF.
Set-Cookie: session=...; SameSite=Strict; Secure; HttpOnlyStrict frente a Lax
Strict ofrece la mayor seguridad, pero puede cerrar la sesión de los usuarios cuando llegan desde enlaces externos. Lax envía la cookie únicamente en navegaciones GET de nivel superior, un equilibrio habitual.
El patrón de token sincronizador
La defensa en profundidad añade un token CSRF que el atacante no puede conocer. El servidor emite un token y el cliente debe devolverlo en las solicitudes que cambian el estado.
Cookie de doble envío
Un enfoque habitual en las SPA: el servidor establece el token CSRF en una cookie legible (no HttpOnly). El cliente lo lee y lo vuelve a enviar en una cabecera. El servidor verifica que ambos valores coincidan.
Set-Cookie: XSRF-TOKEN=abc123; SameSite=Strict; SecureLeer el token de la cookie
Lea el valor de la cookie CSRF con una pequeña función auxiliar en su aplicación Vue.
function getCookie(name) {
const match = document.cookie.match(
new RegExp("(^| )" + name + "=([^;]+)")
);
return match ? decodeURIComponent(match[2]) : null;
}
const token = getCookie("XSRF-TOKEN");Establecer la cabecera en las solicitudes
Envíe el token en una cabecera personalizada como X-CSRF-Token en cada solicitud que cambie el estado (POST, PUT, PATCH, DELETE).
await fetch("/api/transfer", {
method: "POST",
headers: { "X-CSRF-Token": token },
body: JSON.stringify(payload)
});Cabeceras predeterminadas de Axios
Con Axios, establezca la cabecera una sola vez como valor predeterminado para que todas las solicitudes la incluyan automáticamente.
import axios from "axios";
axios.defaults.headers.common["X-CSRF-Token"] = getCookie("XSRF-TOKEN");Compatibilidad integrada con xsrf de Axios
Axios puede hacerlo automáticamente: configure los nombres de la cookie y de la cabecera, y leerá la cookie y establecerá la cabecera por usted.
const api = axios.create({
xsrfCookieName: "XSRF-TOKEN",
xsrfHeaderName: "X-CSRF-Token",
withCredentials: true
});Por qué ayuda una cabecera personalizada
Los navegadores impiden que los sitios de otros orígenes establezcan cabeceras personalizadas sin superar una solicitud previa de CORS. Exigir X-CSRF-Token significa que una solicitud falsificada entre sitios no puede incluirlo, por lo que el servidor la rechaza.
Comprobación rápida
¿Qué atributo de cookie mitiga el CSRF de forma más directa por sí solo?
Resumen
CSRF abusa de las cookies enviadas automáticamente para falsificar solicitudes que cambian el estado. Establezca SameSite=Strict en las cookies de autenticación como defensa principal y añada un token CSRF: léalo de una cookie y envíelo en cada solicitud que modifique datos mediante una cabecera X-CSRF-Token, configurada una sola vez como valor predeterminado de Axios o mediante las opciones xsrf integradas de Axios.
Preguntas frecuentes
¿La lección «Protección contra CSRF en SPA de Vue» es gratis?
Sí — el texto completo de «Protección contra CSRF en SPA de Vue» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Protección contra CSRF en SPA de Vue»?
Cookies SameSite, tokens CSRF en Axios y patrón de doble envío de cookie Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Protección contra CSRF en SPA de Vue»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Prevención de XSS en Vue
- Content Security Policy (CSP) con Vue
- Protección contra CSRF en SPA de Vue
- Patrones de autenticación segura