Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Pasar Un Token CSRF con Fetch de JavaScript

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.

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:


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):


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.

Nota(s)

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil