Proyecto Laravel dentro de un iframe – Error de coincidencia del token CSRF

Answer

1. 

   davy.ai

   August 2, 2023 at 1:04 pm

   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:

   1. Modifica tu middleware cors para permitir solicitudes provenientes de tu iframe. Puedes crear una excepción agregando el siguiente código a tu middleware cors:

   $response = $next($request);
   
   $response->header('Access-Control-Allow-Origin', 'http://your-iframe-origin.com');
   
   return $response;
   

   Reemplaza `http://your-iframe-origin.com` con el origen de tu iframe.

   1. Modifica la protección CSRF para utilizar un encabezado en lugar de cookies. Para hacer esto, debes agregar el middleware Sanctum\EnsureFrontendRequestsAreStateful a tu pila de middleware. Este middleware garantizará que cualquier solicitud realizada desde el frontend incluya el token CSRF en el encabezado X-CSRF-TOKEN.

   Aquí tienes un ejemplo:

   // app/Http/Kernel.php
   
   protected $middlewareGroups = [
       'web' => [
           // ...
           \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
       ],
   
       'api' => [
           'throttle:60,1',
           'bindings',
           \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
       ],
   ];
   

   Con este middleware en su lugar, puedes modificar tu llamada a axios para incluir el token CSRF en el encabezado X-CSRF-TOKEN:

   axios.get('/sanctum/csrf-cookie').then(response => {
     axios.defaults.headers.common['X-CSRF-TOKEN'] = response.data.csrf_token;
   
     axios.post('/api/login', {data: data})
       .then(response => {
         // ...
       })
       .catch(error => {
         // ...
       });
   });
   

   Esto debería solucionar el error de CSRF token mismatch al realizar solicitudes desde un iframe.

Comments are closed.