In: vue

Guía Completa para Configurar Sanctum CSRF-Cookie y Autenticación en Axios (v1.7) Axios es una popular biblioteca de JavaScript que simplifica el envío de solicitudes HTTP en aplicaciones web. Con la llegada de las versiones 1.6 y 1.7.1, Axios introdujo un cambio importante en la gestión de Sanctum CSRF-Cookie en respuesta a una vulnerabilidad de seguridad, implementando una verificación de origen que refuerza la seguridad en entornos de desarrollo y producción. Esto significa que en la versión 1.5, no hay problemas para enviar el token CSRF simplemente haciendo la petición a /sanctum/csrf-cookie y configurando withCredentials: true en Axios. Sin embargo, en las versiones más recientes, esta configuración ya no es suficiente, por lo que a continuación te mostramos una solución para manejar este cambio. Esta guía ofrece una solución si estas montando tu propia API en laravel 11 a las limitaciones introducidas a partir de Axios 1.5.1, especialmente en configuraciones de arquitectura cross-domain (es decir, en aplicaciones SPA alojadas en un dominio que se comunican con una API en otro dominio). Exploraremos cómo configurar Axios para incluir tokens CSRF y de autorización en las solicitudes, garantizando una comunicación segura entre el frontend y el backend. Además, presentaremos alternativas como trabajar en un mismo dominio o subdominio para quienes prefieran evitar configuraciones adicionales. ¿Necesitas un programador? Contacta conmigo 1. ¿Por qué Cambiaron las Configuraciones de CSRF en Axios 1.5.1? A partir de la versión 1.5.1, Axios implementó cambios en la gestión del token CSRF para mejorar la seguridad de las aplicaciones que utilizan esta biblioteca. Este cambio surgió a raíz de una vulnerabilidad crítica que exponía a las aplicaciones a posibles ataques CSRF. Axios ahora envía el token CSRF solo si la solicitud proviene del mismo dominio que generó el token en primer lugar. Esto agrega una capa de seguridad pero también limita las aplicaciones que operan en entornos cross-domain, como: Aplicaciones SPA en app.midominio.com que interactúan con APIs en api.midominio.com Configuraciones donde el frontend y backend se alojan en diferentes dominios o subdominios En estos casos, configurar axios.defaults.withCredentials true; no es suficiente para asegurar una gestión adecuada del token CSRF, ya que la política de origen cruzado puede bloquear el envío del token en entornos separados. A continuación, explicamos cómo configurar Axios para manejar correctamente los tokens CSRF y de autorización en estas arquitecturas. 2. Configuración Inicial de Axios para Sanctum CSRF-Cookie y Autenticación Primero, debemos configurar algunos valores predeterminados en Axios, de forma que incluya cookies en las solicitudes y establezca nombres personalizados para el token CSRF: import axios from 'axios'; axios.defaults.withCredentials true; axios.defaults.xsrfCookieName 'XSRF-TOKEN'; axios.defaults.xsrfHeaderName 'X-XSRF-TOKEN'; Esta configuración inicial asegura que Axios incluya cookies en todas las solicitudes y utilice los nombres correctos para el encabezado y la cookie donde se almacena el token CSRF. Sin embargo, como mencionamos antes, esto no será suficiente en una arquitectura cross-domain sin la implementación de configuraciones adicionales. 3. Crear Instancias de Axios para Solicitudes Públicas y Autenticadas Para gestionar mejor las solicitudes, crearemos dos instancias de Axios: una para solicitudes públicas (api_users_reg) y otra para solicitudes autenticadas (api_users_token). Esto nos permite diferenciar el tipo de solicitudes y gestionar correctamente los encabezados según el caso. const api_users_reg axios.create({ baseURL: process.env.VUE_APP_API_URL, }); const api_users_token axios.create({ baseURL: process.env.VUE_APP_API_URL, }); Esta separación permite una configuración específica para cada tipo de solicitud, fundamental para garantizar que el token CSRF y el token de autorización se envíen en solicitudes cuando corresponda. 4. Obtener el Sanctum CSRF-Cookie desde las Cookies Es esencial crear una función que obtenga el token CSRF almacenado en la cookie XSRF-TOKEN. Así podremos incluirlo manualmente en las solicitudes para cumplir con las políticas de Axios 1.5.1 y superiores. function getCsrfTokenFromCookies() { return document.cookie.split(';') .map(cookie > cookie.split('', 2)) .find(cookieKV > cookieKV.trim() 'XSRF-TOKEN')?.; } Esta función localiza y devuelve el valor de XSRF-TOKEN de document.cookie, necesario para las solicitudes sensibles en un entorno de dominio cruzado. 5. Configurar el Interceptor de Solicitudes para CSRF y Autorización Añadimos un interceptor que verifica el método HTTP de la solicitud. Para métodos como POST, PUT, PATCH y DELETE, el token CSRF se añadirá desde la cookie al encabezado X-XSRF-TOKEN. En el caso de solicitudes autenticadas, el interceptor también incluye el token de autorización. const csrfInterceptor (config) > { if (.includes(config.method?.toUpperCase())) { const csrfToken getCsrfTokenFromCookies(); if (csrfToken) { config.headers decodeURIComponent(csrfToken); } } if (config.baseURL api_users_token.defaults.baseURL) { const userData localStorage.getItem("user"); const parsedData JSON.parse(userData); const token parsedData?.token; if (token) { config.headers `Bearer ${token}`; } } return config; }; 6. Aplicar el Interceptor a las Instancias de Axios Para aplicar el interceptor a las solicitudes, lo añadimos a ambas instancias de Axios (api_users_reg y api_users_token). Esto permite que cada solicitud maneje de manera correcta los encabezados de CSRF y autorización cuando corresponda. api_users_reg.interceptors.request.use(csrfInterceptor, error > Promise.reject(error)); api_users_token.interceptors.request.use(csrfInterceptor, error > Promise.reject(error)); 7. Configuración del Idioma en las Solicitudes Públicas Para las solicitudes públicas (api_users_reg), añadimos otro interceptor que toma el idioma preferido del usuario almacenado en localStorage y lo envía en el encabezado Accept-Language para una mejor personalización del contenido. api_users_reg.interceptors.request.use(config > { const lang localStorage.getItem('preferredLanguage') || 'en'; config.headers lang; return config; }, error > Promise.reject(error)); 8. Exportar las Instancias de Axios Finalmente, exportamos api_users_reg y api_users_token en un solo objeto, lo que facilita el uso de ambas configuraciones en toda la aplicación. export const apiClient { auth: api_users_token, public: api_users_reg }; Alternativas: Evitar el Cross-Domain Si bien la configuración detallada es funcional, otra solución viable para evitar problemas de CSRF en configuraciones de Axios 1.5.1+ es alojar el frontend y el backend en el mismo dominio o en subdominios, por ejemplo: Frontend en app.midominio.com Backend en api.midominio.com Al alojar ambos servicios en un mismo dominio o subdominio, los problemas de origen cruzado se reducen significativamente, y la gestión de cookies es más directa, lo cual puede simplificar la autenticación y la gestión de CSRF. Resultado Final Con esta configuración avanzada, Axios puede gestionar de manera segura los tokens CSRF y de autorización en aplicaciones con arquitecturas cross-domain, adaptándose a los cambios introducidos a partir de Axios 1.5.1. Recuerda que también es importante revisar las opciones de configuración del servidor para garantizar la compatibilidad de CORS y CSRF en todo el flujo de autenticación. Contacto Si necesitas servicios de desarrollo para tu empresa , estoy aquí para ayudarte. Ofrezco soluciones personalizadas y de alta calidad para satisfacer tus necesidades. Para más información o para discutir tu proyecto, contáctame a traves del siguiente botón Imagenes obtenidas en : Image by Freepik

In: vue

Laravel Sanctum CSRF-Cookie; http error: 419

Como crear un proyecto con Laravel 11 y Vue 3

Descubre las Novedades Vue 3.5 : Mejores Herramientas para Reactividad y Rendimiento