<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: chemisax</title>
    <description>The latest articles on DEV Community by chemisax (@chemisax).</description>
    <link>https://dev.to/chemisax</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F268437%2Fc1042699-7a40-4ddb-9788-504e40b645df.jpeg</url>
      <title>DEV Community: chemisax</title>
      <link>https://dev.to/chemisax</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/chemisax"/>
    <language>en</language>
    <item>
      <title>¿Cómo guarda Laravel la cookie de sesión y csrf?</title>
      <dc:creator>chemisax</dc:creator>
      <pubDate>Sun, 05 May 2024 06:17:22 +0000</pubDate>
      <link>https://dev.to/chemisax/como-guarda-laravel-la-cookie-de-sesion-y-csrf-3p17</link>
      <guid>https://dev.to/chemisax/como-guarda-laravel-la-cookie-de-sesion-y-csrf-3p17</guid>
      <description>&lt;p&gt;Hoy tuve un problema con una SPA que se comunica con un backend en Laravel. Son contenedores de docker, por lo que en teoría deberían funcionar igual, pero en otra computadora, la comunicación con el backend fallaba:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;CSRF token mismatch&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Después de revisar todas las configuraciones de la sesión, de sanctum, de las cookies, no daba con la razón por la que Laravel no reconocía el token. Así que para debuggear, me puse a leer el código de Laravel para entender cómo se genera la sesión, su cookie y el token de csrf.&lt;/p&gt;

&lt;p&gt;Por cierto, estoy usando el driver database para guardar la sesión.&lt;/p&gt;

&lt;h2&gt;
  
  
  La sesión
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F96b44iib3okndjtsl82v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F96b44iib3okndjtsl82v.png" alt="Tabla sessions" width="800" height="440"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Si usas los ajustes por default:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;La sesión se guarda en la tabla &lt;code&gt;sessions&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;El ID son 40 caracteres aleatorios creados con la función &lt;code&gt;Str:random&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;El payload es una cadena de caracteres codificada en base64&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Ejemplo
&lt;/h3&gt;

&lt;p&gt;El payload de la base de datos:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;YTozOntzOjY6Il90b2tlbiI7czo0MDoiamtYNUVmUXZTNVc4bnFtVGt3RWk4d3g5QmM0RFZ3aTlDTmdRWlJOSCI7czo5OiJfcHJldmlvdXMiO2E6MTp7czozOiJ1cmwiO3M6MzA6Imh0dHA6Ly9sb2NhbGhvc3Q6ODg4OC9hcGkvY3NyZiI7fXM6NjoiX2ZsYXNoIjthOjI6e3M6Mzoib2xkIjthOjA6e31zOjM6Im5ldyI7YTowOnt9fX0=
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Decodificado da:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;a:3:{s:6:"_token";s:40:"jkX5EfQvS5W8nqmTkwEi8wx9Bc4DVwi9CNgQZRNH";s:9:"_previous";a:1:{s:3:"url";s:30:"http://localhost:8888/api/csrf";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Esto es el resultado de serializar con php el array de atributos de la sesión.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;jkX5EfQvS5W8nqmTkwEi8wx9Bc4DVwi9CNgQZRNH&lt;/code&gt; es el token csrf actual.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  La cookie de sesión
&lt;/h2&gt;

&lt;p&gt;Al llamar al endpoint de sanctum/csrf obtenemos dos cookies: &lt;code&gt;laravel_session&lt;/code&gt; y &lt;code&gt;XSRF-TOKEN&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;El contenido de estas cookies está encriptado con el algoritmo &lt;code&gt;AES-256-CBC&lt;/code&gt;. La llave es el contenido de la variable &lt;code&gt;APP_KEY&lt;/code&gt;. (A menos que se hayan cambiado los ajustes por defecto)&lt;/p&gt;

&lt;p&gt;Desencriptamos el contenido de la cookie de sesión con la función &lt;code&gt;Crypt::decryptString&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Crypt::decryptString("eyJpdiI6Ims3SkhEdWFxWGV0WER5Tm91dG5yK0E9PSIsInZhbHVlIjoiOER5ME8xMVhMNmlBcmkwWDJieDRtZmFRT2RGT21yWFpjYm94YXV4S21KdDZvaG9xaUF2cHk5WXNadzR0RS85b1BpbFlxWXB0blB0eUczYjhDQUhkazhYM0dRRjdEQnI4TlZIak50TDFhMGlmSy9URlpkdW5zSmZRSmd3YzlscTEiLCJtYWMiOiJmZjI5MzBiMTVmYzE3MjdhOTk3ZGM3MzZhYjdlN2IxZWY5MmVlMDljMDNiYzgzZGVmNWRjZmIzMjgxMjM0ZDBmIiwidGFnIjoiIn0")
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Nos da:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;204dfbcb7897b8904470ad24455c430fbee52e49|Tx8V3BmKRGrLQDONQAol5H5QsSRXYpzYvVXhyAQw&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;No logré identificar que significan los primeros 40 caracterés. Los últimos 40, despues del &lt;code&gt;|&lt;/code&gt;, son el ID de la sesión (&lt;code&gt;Tx8V3BmKRGrLQDONQAol5H5QsSRXYpzYvVXhyAQw&lt;/code&gt;), coincide con el ID en la base de datos.&lt;/p&gt;

&lt;p&gt;Y si desencriptamos la cookie con el token csrf:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Crypt::decryptString("eyJpdiI6InEvVHVzWWpGcndLM1k1WVg4aFlvL3c9PSIsInZhbHVlIjoiUmcrOS9vNGJFZXgyUUFMOGlyTFYxU08rYUVXNmxReDI1Vm5rK1BVNkxvUVNpZXptby9xVjcyZnBFZVl1VGRTTFFiLzgwUGhwdDFKRVV2N00xQTJZa0ZLWnVoVVhtN1lvdkduamFZZU5Oc3dua1RmRk5JdEZHZnRQaHMzZGduZ0siLCJtYWMiOiJkNTFkMTMxZjUyMWU4MmYwNDczOGQyZDQ5ODJlNmU0NzBmYTA0YTg0MjM1M2E0MzQyYjY1Mzc5MGY1YjJiNWFhIiwidGFnIjoiIn0")
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Da:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;c27a7fa10ed3b8fdd1c10265852343fa8e088ef8|jkX5EfQvS5W8nqmTkwEi8wx9Bc4DVwi9CNgQZRNH&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Al igual que con la cookie de sesión, no pude identificar que son los primeros 40 caracteres, parece un hash de algo. Los ultimos 40 caracteres son el token csrf.&lt;/p&gt;

&lt;h2&gt;
  
  
  CSRF
&lt;/h2&gt;

&lt;p&gt;El token encriptado se debe enviar en todas las peticiones tipo POST/PUT/DELETE. Si es un request AJAX, debe ir en un header.&lt;/p&gt;

&lt;p&gt;El middleware &lt;code&gt;VerifyCSRFToken&lt;/code&gt; obtiene el token del request y lo compara con el token que se encuentra en la base de datos. Si no coinciden, ocurre el error &lt;code&gt;CSRF token mismatch&lt;/code&gt; y la petición no se continua procesando.&lt;/p&gt;

&lt;p&gt;En mi caso, los tokens en las cookies y la base de datos coincidían. Así como los sitios permitidos para CORS. Las peticiones de preflight también regresaban los valores correctos.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;¿Que pasó?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Olvidé que había actualizado las dependencias del &lt;code&gt;package.json&lt;/code&gt; de la SPA. Uno de los paquetes que se actualizó fue &lt;code&gt;axios&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Axios automáticamente agrega el token de la cookie en un header, pero en la última versión ya no lo hace.&lt;/p&gt;

&lt;p&gt;Hay que agregar &lt;code&gt;withXSRFToken = true&lt;/code&gt; a la configuración de la instancia de axios.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;axios.create({
  withCredentials: true,
  withXSRFToken: true,
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Fin.&lt;/p&gt;

&lt;p&gt;Si alguien sabe que son o como se generan los primeros 40 caracteres del payload de la cookie, agréguelo en los comentarios.&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>php</category>
    </item>
  </channel>
</rss>
