Como Pasar Un Token CSRF con Fetch de JavaScript

3 minuto(s)

En esta página:

La seguridad de las aplicaciones es muy importante, dia a dia podemos ver cuantos tipos de ataques se dan y el equipo de Laravel ha pensado en ello brindando diferentes maneras de proteger una aplicación. Una de estas maneras es el uso de un token contra ataques CSRF (Cross-site request forgery), en este tipo de ataques los usuarios maliciosos envían comandos no autorizados de un usuario en el que confía la aplicación web. En este Post te enseñaré a Como Pasar Un Token CSRF con Fetch de JavaScript, vamos con ello.

Software — Aplicación protegida por un Token CSRF

Antes de continuar te invito a leer los siguientes artículos:

Podcast: “Dominio del trabajo con Varios Lenguajes de Programación” y “¿ Porqué Es Importante Saber Programar en la Ciberseguridad ?” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Pasar Un Token CSRF con Fetch de JavaScript.

Como Pasar Un Token CSRF con Fetch de JavaScript

Depende en que entorno estes trabajando, la idea es que pongas el token dentro de una etiqueta meta dentro de las etiquetas HTML <head></head>, por ejemplo el framework Laravel genera el código colocando {{ csrf_token() }} como valor del atributo content de la etiqueta meta:


<html>
  
  <head>
    <!-- Etiqueta 'meta' con el token CSRF -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
  </head>
  
  <body>
    
  </body>
</html>

<html>

<head>

</head>

<body>

</body>

</html>

Luego en el código JavaScript mediante la API Fetch pasamos el token CSRF de la siguiente manera (He colocado comentarios en ciertas partes del código para explicar los puntos importantes):


// Instanciamos el token CSRF de la etiqueta meta
const token = document.head.querySelector("[name~=csrf-token][content]").content;

// Función en donde uso el token CSRF
function hacerPedido(pedido) {
    fetch('/pedidos', {
        method: 'post',
        body: JSON.stringify(pedido),
        headers: {
            'Content-Type': 'application/json',
            "X-CSRF-Token": token // Pasamos el token CSRF de la etiqueta meta 
        }
    })
    .then(response => {
        return response.text();
    })
    .then(text => {
        return console.log(text);
    })
    .catch(error => console.error(error));
};

// Instanciamos el token CSRF de la etiqueta meta

const token = document.head.querySelector("[name~=csrf-token][content]").content;

// Función en donde uso el token CSRF

function hacerPedido(pedido) {

fetch('/pedidos', {

method: 'post',

body: JSON.stringify(pedido),

headers: {

'Content-Type': 'application/json',

"X-CSRF-Token": token // Pasamos el token CSRF de la etiqueta meta

}

})

.then(response => {

return response.text();

})

.then(text => {

return console.log(text);

})

.catch(error => console.error(error));

};

Depende en que entorno te encuentres, busca el método o la manera de poner el token CSRF como valor del atributo content de la etiqueta meta y de alli lo pasas dentro de headers de Fetch de JavaScript.

Conclusión

En este tutorial te he compartido la manera correcta de pasar un token CSRF, saber esto te ayudará a mantener protegidas tus aplicaciones de ataques de tipo CSRF de usuarios maliciosos o hackers. Esto no quiere decir que tu aplicación este completamente protegida, hay otros aspectos de la seguridad que debes considerar aplicar en tu proyecto para mantenerlo protegido en lo posible.