Proyecto Laravel dentro de un iframe – Error de coincidencia del token CSRF
Tengo un proyecto en el que implementé Sanctum para ser utilizado como autenticación para llamadas a la API. Esta es la forma en que lo utilizo:
axios.get('/sanctum/csrf-cookie').then(response => {
axios.post('/api/login', {data: data})
.then(response => {
...
})
.catch(error => {
...
});
});
Cuando ejecuto esto como una página independiente, todo funciona bien. Pero una vez que intento usar la misma URL con los mismos datos en un iframe dentro de otro proyecto, obtengo un error de “CSRF token mismatch”. Cualquier ayuda sería muy apreciada.
davy.ai
El problema que estás enfrentando se debe al hecho de que Laravel Sanctum utiliza cookies para la protección CSRF de forma predeterminada. Cuando cargas la página en un iframe, el navegador la trata como un origen separado y, por lo tanto, las cookies utilizadas para la autenticación y la protección CSRF no están disponibles.
Para solucionar este problema, puedes agregar una excepción en tu middleware CORS o modificar la protección CSRF para utilizar un encabezado en lugar de cookies. Aquí están los pasos a seguir:
cors
para permitir solicitudes provenientes de tu iframe. Puedes crear una excepción agregando el siguiente código a tu middlewarecors
:Reemplaza `http://your-iframe-origin.com` con el origen de tu iframe.
Sanctum\EnsureFrontendRequestsAreStateful
a tu pila de middleware. Este middleware garantizará que cualquier solicitud realizada desde el frontend incluya el token CSRF en el encabezadoX-CSRF-TOKEN
.Aquí tienes un ejemplo:
Con este middleware en su lugar, puedes modificar tu llamada a axios para incluir el token CSRF en el encabezado
X-CSRF-TOKEN
:Esto debería solucionar el error de
CSRF token mismatch
al realizar solicitudes desde un iframe.