Permíteme Mostrarte Cómo las Aplicaciones de React Son Hackeadas en el Mundo Real

Rate this content
Bookmark

Los frameworks frontend modernos como React están bien pensados en cuanto a su diseño de seguridad de aplicaciones, y eso es genial. Sin embargo, todavía hay mucho espacio para que los desarrolladores cometan errores y utilicen APIs inseguras, componentes vulnerables o simplemente hagan algo incorrecto que convierta la entrada del usuario en una vulnerabilidad de Cross-site Scripting (XSS). Permíteme mostrarte cómo las aplicaciones de React son hackeadas en el mundo real.

22 min
25 Oct, 2021

Video Summary and Transcription

La seguridad predeterminada de React contra vulnerabilidades XSS, explorando y solucionando vulnerabilidades XSS en React, explorando caracteres de control y problemas de seguridad, explorando una solución alternativa para el análisis de JSON y explorando la entrada de JSON y dependencias de terceros.

Available in English

1. Introducción a la seguridad de React

Short description:

Hola y bienvenidos a mi charla. Hoy quiero mostrarles algunas brechas en la codificación de React que deben conocer. Proporcionaré ejemplos de vulnerabilidades XSS encontradas en Twitter y explicaré la importancia de utilizar APIs seguras.

♪ Hola y bienvenidos a mi charla. ¿Pensaste que tu aplicación de React es segura? Piénsalo de nuevo. Mi nombre es Irantu, y hoy quiero mostrarte algunas brechas que debes conocer cuando haces codificación en React.

Entonces, ¿por qué estamos aquí hoy? Sé lo que estás pensando en este momento. Como, este es el año 2021. ¿O será otra charla sobre XSS? Como, ¿qué quieres de mi vida en este momento con XSS en React? Porque pensé que ya lo habíamos superado. Bueno, por eso voy a decir, Hola XSS, mi viejo amigo. Y te mostraré un par de ejemplos que encontré en Twitter, solo para encontrar algunos ejemplos de código de personas mostrando algunas de sus cosas de código en React. ¿Y qué están haciendo realmente allí?

Entonces, aquí tienes un ejemplo, ¿verdad? Esto es XSS, esto es este año. ¿Qué está pasando, veamos. Parece que alguien está tratando de construir un contador. Pero algo está desordenado allí. ¿Ves lo que estoy viendo? Porque cuando hago zoom dentro, veo todo el uso de efecto elegante. ¿Sigue siendo elegante? No lo sé, ya hay varias versiones de React. Pero de todos modos, puedes ver que hay una variable de conteo que tal vez venga desde afuera. Lo estamos poniendo. No tenemos idea de qué hay en ella. ¿Está saneado? ¿No lo está? ¿Deberíamos mostrarlo y codificarlo? ¿Qué significa incluso mostrar y codificar cosas? Lo aprenderemos en un segundo. Pero como estás viendo, hay una mezcla aquí de APIs de React y las APIs de Dominio como en un rico GML, que no es una forma realmente segura de hacer las cosas. Y esta mezcla en realidad causa ataques o vulnerabilidades de scripting entre sitios, como en esta aplicación.

Veamos otro ejemplo. También he visto este caso en Twitter, que también es de este año, no hace mucho tiempo. Entonces, esta persona estaba tratando de evitar la función de evaluación en tiempo de ejecución básicamente aceptando la entrada del usuario también y ejecutándola. Porque cuando haces return A más B y A es un IIFE o una función o lo que sea, bueno, se ejecutará. Se evaluará. Entonces eso tampoco resuelve el problema. Así que tenemos muchas de esas cosas diferentes. Que si no estamos utilizando las APIs correctas, no estamos al tanto de cuáles son las APIs seguras o cuáles son las APIs inseguras. No estoy hablando solo de, ya sabes, cosas internas peligrosas de HTML. También estoy hablando de otras cosas. Y lo verás en un segundo.

2. Introducción a Iran Tal

Short description:

Hola, soy Iran Tal, un Defensor del Desarrollador en Snyk. Ayudamos a los desarrolladores a construir aplicaciones seguras utilizando código abierto. Si necesitas ayuda con vulnerabilidades o código inseguro, estamos aquí para ayudarte. Contáctame en Twitter @Iran_Tal.

Así que me presento, mi nombre es Iran Tal. Soy un Defensor del Desarrollador en Snyk donde ayudamos a los desarrolladores a construir aplicaciones de forma segura utilizando código abierto. Así que si estás en tu IDE escribiendo código JS, escribiendo código Node.js, Java, lo que sea, te ayudaremos a encontrarlo, mejoraremos tu experiencia al hacerlo diciéndote en tiempo real, si realmente tienes algunas vulnerabilidades y códigos inseguros ahí mismo. Bueno, esto es realmente genial, pero también estoy haciendo algunas otras cosas. Sabes, estrella de GitHub, activista en temas de seguridad web. Así que, ya sabes, Node.js probablemente me esté enviando actividad allí también, haciendo todas esas cosas. Pero en realidad, si solo quieres comunicarte y hablar sobre esto u otra cosa en Twitter, Iran_guion_bajo Tal, y acércate y di hola.

3. Explorando la Seguridad de React y las Vulnerabilidades XSS

Short description:

React es en su mayoría seguro por defecto, pero aún existen algunas brechas para protegerse contra las vulnerabilidades XSS. React codifica la entrada del usuario por defecto, evitando la ejecución de scripts y garantizando la seguridad. Sin embargo, aún existen posibles problemas y vulnerabilidades de los que debemos estar conscientes. Vamos a explorar estos problemas a través de la codificación en vivo y simulaciones en un sitio web con entrada de usuario. Al comprender los riesgos y las brechas, podemos mejorar la seguridad de las aplicaciones de React.

Así que vamos a seguir adelante con esto. React es en su mayoría seguro por defecto, ¿verdad? Al igual que otros frameworks como Vue y Angular, la mayoría de ellos hacen las cosas bien en el lado del cliente, ¿verdad? En lo que respecta a XSS y tal vez algunas otras cosas cuando algunos frameworks se vuelven, ya sabes, un poco más pesados y dan un paso más también. Pero, ¿por qué digo en su mayoría seguro, ¿verdad? ¿Qué está pasando? ¿Por qué estoy aquí en el escenario diciendo en su mayoría seguro? ¿Qué me queda por proteger? Porque pensé que al usar React en realidad me protegía de todas estas cosas extrañas de XSS que ocurren en mis aplicaciones.

Para darme cuenta de eso, necesitamos, ya sabes, explorar algo más. Digo que React es en su mayoría seguro por defecto, pero ¿qué significa seguro por defecto? Necesitamos explorar esto un poco y necesitas entender un poco más del argot y ahí es donde voy a subir de nivel y simplemente decir qué es XSS para que todos aquí estemos en el mismo nivel de juego.

Entonces, cuando escribes este código y lo renderizas en el DOM, ¿qué sucede con la entrada del usuario aquí, como el nombre, por ejemplo? ¿Qué le sucede? En el caso general, cuando esta es una entrada de usuario insegura, podría llevar a posibles vulnerabilidades, como XSS en la página web, pero con React, estás más o menos seguro. Ahora, ¿por qué es eso? Y veamos qué sucede cuando realmente insertamos algo como un script de alerta o una fuente de imagen o lo que sea en este fragmento de código JSX. Bueno, en realidad, si miras una página, obtienes algo como esto, que parece un script o cualquier otro elemento que hubieran puesto allí, pero no lo es. Eso es porque si miras con mucho cuidado con las herramientas de desarrollo, en este componente específico, en este elemento específico de la página, verías que todos esos corchetes angulares, no son corchetes angulares reales. En realidad, son entidades HTML que codifican y le dicen a la página que debe renderizar, que debe renderizar como los corchetes angulares a la izquierda y a la derecha, pero no son corchetes angulares completos. Entonces, cuando pones eso en la página como entrada de usuario, no sucede nada, ningún script se evaluará realmente, no hay evaluación de JavaScript en tiempo de ejecución, porque esto no es un elemento HTML real o algo similar. Y el navegador lo sabe, y esto es a lo que me refiero cuando digo que React es en su mayoría seguro por defecto. React es en su mayoría seguro por defecto significa en realidad que sabe codificar. Así que ahora tenemos este nuevo argot que nos dice qué es esto en realidad. Esto es seguro por defecto si realmente haces la codificación de salida por defecto en cualquier entrada de usuario.

Con eso dicho y con este conocimiento, avancemos un poco más y descubramos ahora si React es seguro por defecto, y si asegura la salida de la entrada del usuario, ¿por qué dices que esto es en su mayoría seguro por defecto? ¿Qué queda por proteger y dónde están realmente todas las brechas? Así que sumerjámonos ahora en la codificación en vivo juntos y veamos qué podemos aprender sobre algunos problemas. Y para eso, tengo este sitio web de aplicación construido donde Kate Libby estaba construyendo su perfil de paquete para Opus para algunos mantenedores y cosas así. Así que es como la página web con paquetes en ella. Así que sumerjámonos en algo como esto y veamos cómo se ve. Bueno, necesito mi ID, ahí vamos. Asegurémonos de que todo funcione. Y si lo hace, debería tener, no, este aquí. De acuerdo, genial. Este es el sitio web que acabo de construir y parece que funciona bastante bien. Tiene algunos elementos, como la entrada del usuario aquí, lo siento, como el nombre, la descripción o algo, enlace a su Twitter, algunas cosas más que puedo usar como testimonios. Así que hay mucha entrada de usuario aquí que podemos usar como referencia para simular lo que realmente podría salir mal. Así que echemos un vistazo a esto un poco más. Por ejemplo, esta base de datos tiene todas las cosas de las que estaba hablando aquí. Y esto es lo que realmente vamos a usar para simular lo que realmente podría salir mal. Así que voy a cambiar algunas de ellas, por ejemplo, solo por el bien de las cosas.

4. Seguridad por defecto de React contra XSS

Short description:

React ayuda a proteger contra vulnerabilidades XSS de forma predeterminada, aplicando codificación de salida a la entrada del usuario y convirtiéndola en entidades HTML.

Así que puedo cambiar esto a mi nombre aquí. Y una vez que lo haga, verás que se carga por completo aquí. Eso está bien, pero ¿qué sucede si lo cambio a algo como image source X on error alert one, y con suerte eso desencadena un XSS? No lo hace, aquí es donde React realmente te ayuda y asegura las cosas de forma predeterminada. En realidad, la salida y los códigos, esto es lo que dijimos con el ejemplo del primer nombre. Es por eso que si intentas esas cosas y no se ejecutan realmente, está bien. Eso es porque está bien que el nombre completo de la base de datos esté aquí es simplemente algo que React sabe para aplicar la codificación de salida y cambiar todo esto en entidades HTML. Hasta ahora todo bien.

5. Explorando Vulnerabilidades XSS en React

Short description:

Vamos a probar un enlace y cambiarlo a algo malicioso. Vemos una vulnerabilidad XSS incluso cuando usamos React. React no protege contra los valores de href, así que ten cuidado con esto. Vamos a explorar cómo solucionarlo y los problemas a evitar.

Vamos a retomar esto con Kate Levy y vamos a cambiar algo más. Esto, vamos a probar un enlace. Vale, vamos a probar un enlace, que no es solo un poco de texto. Vamos a intentar cambiar esto a bueno, esto está aquí. Así es si yo, ahí vamos. Solo tengo que pasar el cursor por encima. Puedes ver en la parte inferior izquierda del navegador. Esto va a su cuenta de Twitter. Así que voy a cambiar esto a, vamos a intentar ser un poco maliciosos aquí. Bien, digamos que alguien tiene este campo de formulario libre y simplemente construyen un JavaScript alert, que es como nuevamente, la forma clásica de tal vez introducir un poco de XSS. Así que si hago esto, dejo que la página se recargue, supongo que lo hace, esto es lo que necesitas hacer aquí y tal vez hacer clic en él y ahora vemos un XSS, pero ¿por qué, qué está pasando? Esto es realmente extraño. Como ¿por qué tengo un XSS y un alert si en realidad estoy usando React? Esta es una versión bastante nueva de React también. Vale, esto, ya sabes, 17 en adelante. Entonces, ¿qué está pasando aquí? Ahora, para entender qué está pasando allí, volvamos aquí. El enlace de Twitter, la database, el enlace de Twitter se inserta aquí. Y lo que ahora entendemos es, bueno, React no aplica la codificación de salida y no te protege de los valores de href, como los atributos HTML que van aquí. Y eso es algo de lo que debes ser consciente. Así que intentemos solucionarlo. Si, en primer lugar, ahora eres consciente de ello y sabes que si algo es malicioso o necesitamos solucionarlo, pero veamos, hay algunas trampas en cómo intentamos solucionar esas cosas. Así que veamos eso también. Voy a ir aquí y quiero decir, podemos dejarlo así.

6. Explorando la seguridad de React - Enlace de Twitter

Short description:

Y justo antes de aquí, un poco, tenemos suficiente espacio. Así que vamos a seguir adelante y probar todo esto, uso un factor como cambio y lo desinfecto juntos. Así que vamos a intentar algo como esto es un enlace de Twitter. Lo colocamos allí.

Y justo antes de aquí, un poco, tenemos suficiente espacio. Así que vamos a seguir adelante y probar todo esto, uso un factor como cambio y lo desinfecto juntos. Así que vamos a intentar algo como esto es un enlace de Twitter. Lo colocamos allí. De acuerdo, establecer enlace de Twitter y usar estado. Voy a comenzar con la database, sí. De acuerdo, genial, sí, punto pequeño, usar efecto, usar efecto. Y voy a llamar a, sí, autocompletarlo. Ahí vamos. Y luego queremos encontrar si, no, no ese. GitHub co-pilot, eso es increíble, ¿verdad? Enlace de Twitter punto índice de JavaScript.

7. Explorando vulnerabilidades XSS - Solución y Prueba

Short description:

¿Qué opinas de esto? ¿Es una buena solución? Vamos a probarlo. Así que parece que lo arreglamos. ¿Lo arreglamos? ¿Qué sucede si alguien se vuelve un poco astuto y hace algo como eso? Lo hacen en mayúsculas. Ahora, si lo hago, ¿se recargó? Así que arreglamos las mayúsculas, arreglamos las minúsculas, pero ¿qué más podría haber, verdad? Cualquier otra cosa. Quitamos, recortamos, espacios y todas esas cosas. Podemos probar todo eso, pero ¿funcionaría realmente? Podríamos intentar una forma diferente de escaparlo, pero eso tal vez sea un poco complicado.

¿Qué opinas de esto? ¿Es una buena solución? Vamos a probarlo. Me gusta este autocompletado, vamos con ese. Básicamente, esto dice que si el enlace de Twitter allí en la database que obtenemos como entrada de usuario tiene, tiene JavaScript en él, en realidad lo establecerá a, no sé, establecerlo en algo como esto, ¿verdad? Solo un hashtag y eso es todo. Espero no haber olvidado cerrar nada. Se ve bien, creo que se ve bien, vamos a probarlo. ¿Se recargó, no tengo idea, vamos a ver. No se recargó, se recargó, lo recargaré. Ahí vamos. Entonces, no, todavía lo tenemos. Aún no funciona. ¿Oh, no guardé este? Algo aquí, no guardé, intentemos de nuevo. Oh, te diré qué no hicimos. Ahora necesitamos establecer el enlace de Twitter en lugar del enlace de Twitter de la database, ¿verdad? Esto es codificación de la vida real, depuración de la vida real, ahí vamos. Tenemos que usar la nueva variable. Bueno, ¿ahora se está cargando lo suficientemente rápido? Ahí vamos, ahora se cargó lo suficientemente rápido y puedes ver eso en la parte inferior izquierda, en realidad puedo hacer clic en él y no sucede nada porque solo agrega un hashtag y eso es todo. Así que parece que lo arreglamos. ¿Lo arreglamos? ¿Qué sucede si alguien se vuelve un poco astuto y hace algo como eso? Lo hacen en mayúsculas. Ahora, si lo hago, ¿se recargó? Espera a que se recargue, ahí tienes. Así que lo recargué y ahora tenemos el XSS nuevamente, así que la solución no fue realmente buena para nosotros. Intentemos algo más. Digamos que queremos capturarlo. Entonces, ¿qué crees que deberíamos hacer así? ¿Deberíamos convertirlo todo a minúsculas y probarlo así? ¿Convertirlo todo a minúsculas funcionaría? Así, como esto. Y como puedes ver, este es básicamente el proceso de pensamiento de un desarrollador y sería genial si tuvieran una herramienta que los ayudara en el IDE a seguir las API correctas. Se cargará. Déjame ver. ¿A dónde voy? Se cargó bastante rápido, creo. Y parece que lo arreglamos. ¿Lo arreglamos? Lo sabemos, ¿verdad? Así que arreglamos las mayúsculas, arreglamos las minúsculas, pero ¿qué más podría haber, verdad? Cualquier otra cosa. Quitamos, recortamos, espacios y todas esas cosas. Podemos probar todo eso, pero ¿funcionaría realmente? Podríamos intentar una forma diferente de escaparlo tal vez, pero eso tal vez sea un poco complicado.

8. Explorando caracteres de control y problemas de seguridad

Short description:

Vamos a explorar qué sucede cuando agregamos un carácter de control, como slash r slash, para escapar el subíndice en minúsculas. Esto puede hacer que todo se desmorone, resaltando la importancia de aprender a hacer las cosas correctamente.

Lo que no hemos intentado es, qué sucede si agregamos cosas como un carácter de control. Y eso es algo que realmente podría agregar un carácter de control aquí y escapar algo como, slash r slash algo así. Y eso realmente escaparía todo el subíndice en minúsculas y el subíndice index y todo estará bien. Permíteme mostrarte a qué me refiero con eso. Si solo hago slash, no aquí, aquí, comienzo con slash X nueve 10, que es un carácter de control. Si lo intento, todo se desmorona. Recárgalo de nuevo. Ahí vamos. Entonces, mientras aprendemos a hacer una cosa y la otra y la otra, todos estos intentan mitigar un problema, pero todavía hay algunos problemas, algunos problemas que debemos resolver cómo hacerlo. Por lo tanto, aprender a hacer las cosas correctamente es importante.

9. Explorando una Solución Alternativa para el Análisis de JSON

Short description:

Ahora vamos a explorar una solución alternativa para manejar archivos JSON. En lugar de construir un analizador personalizado, podemos utilizar paquetes existentes como React-JSON-Pretty. Aunque está inactivo y no se mantiene, tiene un número significativo de descargas. Al verificar la popularidad y la última versión, podemos garantizar la seguridad. Sumergámonos en el perfil del paquete y juguemos con el analizador del paquete. Demostraremos cómo puede ocurrir XSS desde otras fuentes.

Ahora déjame hablar de algo más. Digamos que en realidad quiero, oh, evitemos esto por un segundo, para poder intentar otro ejemplo. Dije que en realidad quiero, bueno, Libby realmente quiere seguir adelante y hacer esta vista de paquete JSON. Y bueno, ella no va a ir y, quiero decir, no voy a ir y escribir un analizador que indente cosas y resalte. Podrías tener temas y colores geniales, ¿verdad? Así que no voy a construir todo esto. Voy a buscar algo fuera donde pueda darle un archivo JSON, como el PackageManifest para tu paquete npm. Vamos a hacer todo esto con una sintaxis de resaltado genial porque tampoco soy una persona de CSS. Así que todo esto no es para mí. Voy a ir a algo como el Snyk Advisor y buscaré algunos paquetes, ya encontré algo llamado React-JSON-Pretty. Desafortunadamente, parece inactivo. No se mantiene o algo así, pero tiene alrededor de 40K descargas, lo cual es mucho. Así que, ya sabes, tal vez lo intente y lo use. Puedes intentar verificar si esto es popular por versión o no. Así que esperemos, quiero decir, esperemos que todos estén en la última versión, que lo están. Así que eso es algo bueno en términos de seguridad. Si esto fuera vulnerable, esto fuera vulnerable, sabrías a qué actualizar. También parece que esto se usa principalmente como un paquete directo, lo cual tiene sentido, en lugar de ser un paquete indirecto. Así que lo usaré. La versión más popular de hecho no tiene correcciones de seguridad. Veamos qué está pasando. Voy a usar esto. Así que voy a ir al perfil del paquete. Ahí está. Hace el análisis del paquete, estoy bastante seguro. Ahí vamos. Lo he importado como analizador de paquetes y le he proporcionado el manifiesto del paquete, que básicamente es todo este JSON del archivo de la base de datos que tengo aquí. Juguemos un poco con esto aquí. Es un componente simple. Solo toma alguna configuración y luego las aplica de forma predeterminada, eso es todo. Y puedo seguir adelante. Y lo que quiero mostrarte es cómo, intentemos hacer XSS desde otros lugares.

10. Explorando la Entrada de JSON y las Dependencias de Terceros

Short description:

Vamos a explorar posibles vulnerabilidades en la entrada de JSON desde fuentes externas, como paquetes de NPM. Al manipular el JSON del paquete, podemos introducir código malicioso y probar cómo la aplicación lo maneja. Esto resalta la importancia de escanear y asegurar las dependencias de terceros. Además, ten cuidado al usar los atributos href de HTML, ya que no se codifican por defecto al generar la salida.

Digamos que el nombre no es ahora Gibson Explorer. Volvamos aquí, ¿de acuerdo? Ya no es Gibson Explorer. Eso va a ser, de nuevo, esa cosa que vimos. Bueno, hagamos, no sé, bueno, hagamos. Quiero decir, JavaScript alert no funcionará allí. Eso no es un enlace, así que puedo probar este vector en su lugar, como alert y ver qué sucede. Y lo cambié, pero quiero decir, sin alerta. Ni siquiera veo una etiqueta de imagen, así que está bien. Intentemos algo más.

Lo que diría es que no recuerdo qué había aquí, así que solo haré ABC, pero digamos esto, sabes, si estuviera pensando cómo explotar esto, diría, si este paquete fue escrito por alguien, tal vez no se preocuparon lo suficiente por sanitizar los data o codificar la salida yendo a todos los elementos recursivos que realmente están dentro del JSON, todos los elementos que están dentro de otros campos en otros campos. Entonces, ¿qué pasa si intento ponerlo aquí? Como tal vez este nivel en el JSON está sanitizado, pero este no, o la mejor manera de hacer esto sería codificar la salida Pero parece que sí está codificado. Así que eso parece estar bien. Ahí vamos, volviendo a la normalidad. Ahora, parece que esto está funcionando, y si esta es una entrada JSON de un paquete NPM que obtienes, también, que no está controlado por ti, que está controlado por otra persona, ¿verdad? Entonces, ¿qué pasa si esa persona te da un mal paquete JSON, verdad? Como voy a hacer algo como esto y decir, oye, como estás obteniendo este paquete JSON. Ahí lo tienes. Así que manifiesto del paquete. Ahí lo tienes. Ahora, ya no es un JSON. Ahora es una cadena. Es una cadena, que controlo, porque puedo definir lo que quiera en mi paquete JSON y el mío es solo un archivo TAR y te lo enviaré, ¿de acuerdo? Entonces, si esta es la entrada ahora, veamos qué sucede. Cambió todo el significado de lo que es el paquete JSON, pero la pregunta es, ¿la aplicación está lista para manejar algo así? No parece, porque parece que intenta renderizarlo. Probablemente deberías haber puesto una caja de alerta en algún lugar allí. Y alertar, en nuestro alerta, probablemente debería haber funcionado. Oh, ahí vamos. Así que ahora vemos lo que está sucediendo, ¿verdad? Ahora estás usando un componente, una biblioteca de código abierto que puede tener vulnerabilidades, aunque pensabas que podría estar bien, probablemente, ya sabes, probablemente no lo esté, pero no, tienes que probar todas esas cosas. Entonces, nos adentra en el mundo de, ya sabes, gestionar componentes, aprender sobre todas esas cosas. Así que aquí están mis conclusiones.

Volvamos a las diapositivas. Sí, ahí vamos. Entonces, conclusiones para nosotros, ¿verdad? Esto es, ya sabes, evita todo esto, ya sabes, dangerously inner HTML, obviamente no quieres hacer esto, pero el hecho de que lo evites no significa que otros también lo eviten, como hemos visto aquí. Así que realmente debes escanear tus dependencias de terceros si estás haciendo algo como npm audit, ya sabes, está bien. Es una excelente manera de, ya sabes, tener conciencia de las vulnerabilidades de seguridad. Pero en mi caso, descubrí cuando estaba usando React.JSON en mi demostración aquí que no lo encontró cuando estaba haciendo npm install y npm audit, no aparecía nada para eso. Sabes, afortunadamente estaba usando una prueba de sneak y pude encontrarlo. Así que ten en cuenta lo que estás poniendo en esto, si tengo que resumir, ¿verdad? Ten en cuenta lo que estás poniendo en tus, diría dependencias en general, colección de bibliotecas o tus aplicaciones, componentes, ten en cuenta lo que estás poniendo allí, sé capaz de escanearlo todo el tiempo y solucionarlo. Y la otra cosa es, por supuesto, ten cuidado con lo que pones en esos atributos href de html porque no se codifican por defecto al generar la salida. Así que gracias, React, como diría, React de manera responsable y segura. Y si quieres comunicarte, soy Liran Tal, gracias y que tengas un buen tiempo, Adiós.

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn