Evitando CSRF con Remix

Rate this content
Bookmark

Las 'Escrituras de Datos' de Remix vuelven a los fundamentos de la web cuando se trata de envío de formularios. Pero ahí radica una trampa si no tienes cuidado: el Cross-Site Request Forgery (CSRF) puede aparecer. En esta sesión exploraremos qué es CSRF, cómo puede ser explotado y qué puedes hacer para asegurarte de que tu aplicación Remix no sea vulnerable.

This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

CSRF significa Cross-Site Request Forgery, y es una técnica de explotación de seguridad donde un atacante engaña al usuario para que realice acciones no intencionadas en una aplicación web en la que están autenticados, típicamente a través de una URL manipulada o un formulario oculto.

El CSRF puede ser explotado usando métodos POST mediante el uso de un iframe oculto que contiene un formulario dirigido a un endpoint específico. Este formulario se envía automáticamente utilizando una función onload tan pronto como el usuario carga la página que contiene el iframe.

Remix ayuda a prevenir CSRF asegurando que las acciones se realicen a través de formularios HTML estándar y ofrece la opción de utilizar tokens CSRF para validar las solicitudes de manera segura en el servidor.

El atributo 'SameSite' en las cookies permite controlar si una cookie debe ser enviada con las solicitudes cross-site. Establecerlo como 'strict' o 'lax' ayuda a prevenir CSRF al restringir el envío de cookies en ciertos tipos de solicitudes cross-domain.

Según OWASP, el atributo 'SameSite' no es suficiente para prevenir CSRF porque solo el 93% de los navegadores lo soportan actualmente, lo que deja una brecha de seguridad en aquellos navegadores que no lo soportan.

El patrón de token sincronizado es un método de prevención de CSRF que implica generar un token único por sesión y formulario, transmitirlo con el formulario, y luego validar este token de forma segura en el lado del servidor antes de procesar cualquier acción.

En Remix, un token CSRF se genera utilizando una combinación de una clave privada, una semilla aleatoria y un identificador único para cada formulario. Este token se transmite con el formulario y luego se valida en el servidor comparando el token enviado con el generado, utilizando comparaciones seguras en tiempo para evitar ataques de tiempo.

Lee Rowlands
Lee Rowlands
7 min
10 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Bienvenido a mi sesión sobre cómo evitar CSRF con Remix. Remix ayuda a proteger contra CSRF al pensar en acciones en términos de elementos de formulario HTML. Para evitar CSRF con Remix, establece el mismo atributo de sitio en las cookies y considera usar un token además del atributo. El enfoque basado en tokens implica generar un token único por sesión y formulario, transmitirlo con el formulario, enviarlo de vuelta cuando el usuario envía el formulario y validar de forma segura en el lado del servidor.
Available in English: Avoiding CSRF with Remix

1. Introducción a CSRF y Remix

Short description:

Bienvenido a mi sesión sobre cómo evitar CSRF con Remix. CSRF significa Cross-Site Request Forgery, donde el atacante engaña al usuario para que acceda a una URL y realice una acción utilizando su sesión existente. Incluso si se utiliza el método POST, se puede lograr una explotación con un iframe y una URL separada. Remix ayuda a proteger contra CSRF al pensar en las acciones en términos de elementos de formulario HTML. Para evitar CSRF con Remix, establezca el mismo atributo de sitio en las cookies y considere utilizar un token además del atributo.

Hola y bienvenido a mi sesión sobre cómo evitar CSRF con Remix. Esta es una charla rápida, así que vamos a pasar por esto de manera bastante rápida. Comencemos hablando de qué es CSRF. Como la mayoría de las explotaciones de seguridad, tiene un acrónimo y significa Cross-Site Request Forgery. Y en este escenario, básicamente el atacante engaña al usuario para que acceda a la URL y luego esta URL realizará una acción utilizando su sesión existente.

Un ejemplo simple, o tal vez el peor ejemplo, es una imagen con una URL y esa URL realiza una acción. Antes de que digas que quieres escribir código como este, he visto esto en aplicaciones que he auditado, y obviamente lo primero que el usuario está haciendo mal aquí es que está utilizando GET para realizar alguna acción. Pero igualmente, este tipo de explotación se puede lograr incluso si se utiliza POST. Y lo hacemos teniendo un iframe con una altura y ancho ocultos, y eso incrusta una URL separada. Y en esa URL tenemos el formulario, el POST a ese endpoint, y tenemos una función onload que lo envía tan pronto como se carga el formulario.

Así que hablemos un poco de Remix. Remix te hace pensar en las acciones en términos de los bloques de construcción de la web, que son los elementos de formulario HTML. Y si has estado construyendo aplicaciones con JavaScript, probablemente hayas estado usando cosas como Fetch o Axios, y en estos escenarios, por supuesto, te protege. A menos que, por supuesto, estés usando access, allow origin, ya sabes, star, y estás permitiendo que las credenciales pasen. Y en ese caso, estás en la misma situación. Así que porque estamos enviando formularios nuevamente a través de datos de formulario multiparte, necesitamos pensar en Cross-Site Request Forgery.

Así que veamos un ejemplo simple de formulario Remix. Aquí tenemos un formulario primitivo con un campo de texto y un botón de enviar. Tenemos algún tipo de cargador para verificar que el usuario tenga una sesión autenticada porque Cross-Site Request Forgery requiere que estén conectados. Ya sabes, estás realizando una acción utilizando su sesión existente que no pretendían hacer. Y por lo tanto, no vamos a entrar en los detalles aquí, pero sí, el cargador se asegura de que el usuario tenga una sesión. Luego tenemos una acción en nuestro componente que hace alguna escritura en la base de datos o similar. Algo que realiza alguna acción que, ya sabes, no se puede revertir. Entonces, ¿cómo evitas Cross-Site Request Forgery con Remix en este escenario? Bueno, lo primero que debes hacer es establecer el mismo atributo de sitio en tus cookies. Puedes establecerlo como lax, lo que significa que el navegador solo enviará las cookies si es una solicitud GET que proviene de otro dominio. O puedes establecerlo como strict, lo que significa que no enviará ninguna cookie para ninguna solicitud que se origine desde otro dominio. Por lo tanto, es posible que debas verificar si estás utilizando algún tipo de flujo de autenticación que redirige a otros sitios para determinar cuál es el más apropiado para tu sitio. Pero desafortunadamente, según OWASP, esto no es suficiente y no debemos reemplazarlo con un token. Y la razón principal de eso es que solo el 93% de los navegadores admiten el atributo de mismo sitio en esta etapa. Casi estamos allí.

2. Generación y Validación de Tokens CSRF

Short description:

El enfoque basado en tokens implica un proceso de cuatro pasos: generar un token único por sesión y formulario, transmitirlo con el formulario, enviarlo de vuelta cuando el usuario envía el formulario y validarlo de forma segura en el lado del servidor. Para generar el token, se generan claves aleatorias seguras, incluyendo una sal de hash y una clave privada. El token se transmite con el cargador y se devuelve en los datos del cargador, que se pueden acceder en el formulario. La validación se realiza regenerando el token y comparándolo con la versión enviada. Si no coinciden, se genera un error.

Tu aplicación puede tener más dependiendo de la mezcla de navegadores de tus usuarios. Por lo tanto, el enfoque basado en tokens se llama comúnmente el patrón de token sincronizado y básicamente es un proceso de cuatro pasos.

Lo primero que debes hacer es generar un token único por sesión, por formulario. Debes transmitirlo con el formulario. Debes enviarlo de vuelta cuando el usuario envía el formulario y luego debes validarlo de forma segura en el lado del servidor.

Así que comenzamos generando algunas claves aleatorias seguras. Generamos una sal de hash y esto es algo que no debes almacenar en tu database. Debe estar en disco o en variables de entorno para que si tu database se ve comprometida incluso entonces la sal de hash no se filtre. También debes tener una clave privada y ambas puedes generarlas usando el paquete de bytes aleatorios de crypto.

Entonces, el primer paso es generar una semilla aleatoria única por sesión y lo hacemos comprobando si la semilla ya existe en la sesión. Si existe, la utilizamos. Si no existe, generamos una nueva semilla utilizando nuevamente la función de bytes aleatorios y la almacenamos en la sesión. Luego necesitamos generar un token único por sesión e identificador y en este escenario el identificador sería algo único para ese formulario u operación y esto evita que el mismo token sea válido para dos operaciones diferentes y evita la reutilización de tokens.

Para hacer esto, tomamos ese hash, por lo que tomamos nuestra clave privada, también tomamos la semilla y combinamos las tres y creamos un digest HMAC de eso, que es básicamente un hash. Nos da un token único agradable. Tenemos que transmitir ese token con el cargador. Lo primero que hacemos es generar el token y devolverlo en nuestros datos del cargador y eso significa que luego podemos obtenerlo en nuestro formulario usando los datos de la ruta. Así obtenemos nuestro token CSRF de allí y lo transmitimos en el formulario en nuestro campo oculto.

Luego necesitamos validar el código, por lo que si escribimos una pequeña función de utilidad para validar lo regenerará el token basado en el identificador único y la sesión y luego comparará los dos usando equals seguro en tiempo contra la versión que se envió con el formulario. Usamos equals seguro en tiempo aquí para evitar ataques de tiempo.

Entonces, ¿cómo usamos esta función de utilidad? En nuestra acción, simplemente podemos llamar a validate CRSF token usando el valor del formulario enviado y si los dos no coinciden, lanzamos un error. Así es como se realiza la validación de CSRF en Remix. Si tienes alguna pregunta, por favor contáctame a través del servidor de Discord de GitHub para esta conferencia o puedes enviarme un mensaje en Twitter. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Node Congress 2022Node Congress 2022
26 min
Es una jungla ahí fuera: ¿Qué está pasando realmente dentro de tu carpeta Node_Modules?
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
Remix Flat Routes – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.

Workshops on related topic

Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Cómo Resolver Problemas del Mundo Real con Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
Cómo Resolver Problemas del Mundo Real con Remix
Featured Workshop
Michael Carter
Michael Carter
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
Masterclass Práctica: Introducción a Pentesting para Aplicaciones Web / APIs Web
JSNation US 2024JSNation US 2024
148 min
Masterclass Práctica: Introducción a Pentesting para Aplicaciones Web / APIs Web
Featured Workshop
Gregor Biswanger
Gregor Biswanger
En esta masterclass práctica, estarás equipado con las herramientas para probar efectivamente la seguridad de las aplicaciones web. Este curso está diseñado tanto para principiantes como para aquellos que ya están familiarizados con las pruebas de seguridad de aplicaciones web y desean ampliar su conocimiento. En un mundo donde los sitios web juegan un papel cada vez más central, asegurar la seguridad de estas tecnologías es crucial. Comprender la perspectiva del atacante y conocer los mecanismos de defensa apropiados se han convertido en habilidades esenciales para los profesionales de TI.Esta masterclass, dirigida por el renombrado entrenador Gregor Biswanger, te guiará a través del uso de herramientas de pentesting estándar de la industria como Burp Suite, OWASP ZAP y el marco profesional de pentesting Metasploit. Aprenderás a identificar y explotar vulnerabilidades comunes en aplicaciones web. A través de ejercicios prácticos y desafíos, podrás poner en práctica tu conocimiento teórico y expandirlo. En este curso, adquirirás las habilidades fundamentales necesarias para proteger tus sitios web de ataques y mejorar la seguridad de tus sistemas.
Construye y lanza un blog personal usando Remix y Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Construye y lanza un blog personal usando Remix y Vercel
Featured Workshop
Robert Pop
Robert Pop
En este masterclass aprenderemos cómo construir un blog personal desde cero usando Remix, TailwindCSS. El blog será alojado en Vercel y todo el contenido será servido dinámicamente desde un repositorio separado en GitHub. Utilizaremos HTTP Caching para las publicaciones del blog.
Lo que queremos lograr al final del masterclass es tener una lista de nuestras publicaciones de blog mostradas en la versión desplegada del sitio web, la capacidad de filtrarlas y leerlas individualmente.
Tabla de contenidos:- Configurar un proyecto de Remix con una pila predefinida- Instalar dependencias adicionales- Leer contenido desde GitHub- Mostrar contenido desde GitHub- Analizar el contenido y cargarlo en nuestra aplicación usando mdx-bundler- Crear una página separada para las publicaciones de blog para mostrarlas de forma independiente- Agregar filtros a la lista inicial de publicaciones de blog
De 0 a Autenticación en una hora con ReactJS
React Summit 2023React Summit 2023
56 min
De 0 a Autenticación en una hora con ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
La autenticación sin contraseña puede parecer compleja, pero es simple de agregar a cualquier aplicación utilizando la herramienta adecuada. Hay múltiples alternativas que son mucho mejores que las contraseñas para identificar y autenticar a tus usuarios, incluyendo SSO, SAML, OAuth, Magic Links, One-Time Passwords y Authenticator Apps.
Mientras abordamos los aspectos de seguridad y evitamos errores comunes, mejoraremos una aplicación JS de pila completa (backend Node.js + frontend React) para autenticar a los usuarios con OAuth (inicio de sesión social) y One Time Passwords (correo electrónico), incluyendo:- Autenticación de usuarios - Gestión de interacciones de usuarios, devolviendo JWTs de sesión / actualización- Gestión y validación de sesiones - Almacenamiento seguro de la sesión para solicitudes de cliente posteriores, validación / actualización de sesiones- Autorización básica - extracción y validación de reclamaciones del token JWT de sesión y manejo de autorización en flujos del backend
Al final del masterclass, también exploraremos otros enfoques de implementación de autenticación con Descope, utilizando SDKs de frontend o backend.