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.
Antes de continuar te invito a leer los siguientes artículos:
- Concepto de Paginación Usando JavaScript
- Como Detectar Si El Usuario Está en Línea con JavaScript
- Como Detectar Si El Usuario Cambia de Pestaña En El Navegador Con JavaScript
- Como Enviar los Datos de Una API REST a la Vista HTML con JavaScript
- Como Generar Un ID Único (Unique Key) con JavaScript
- Como Editar Los Parámetros de Una URL con JavaScript
- Como Verificar si 2 Contraseñas Coinciden o son Iguales con JavaScript
- 5 Cosas que Talvez no Sabías sobre try-catch-finally en JavaScript
- Cual es la Diferencia entre == vs === en JavaScript
- Como Crear un Código OTP (2FA) en JavaScript
- Puedes leer más en la categoría JavaScript
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <head> <!-- Etiqueta 'meta' con el token CSRF --> <meta name="csrf-token" content="{{ csrf_token() }}"> </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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 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.
Nota(s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.