Permíteme mostrarte cómo las aplicaciones de React son hackeadas en el mundo real

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

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

Entonces, ¿aquí hay un ejemplo, verdad? Esto es XSS, esto es este año. ¿Qué está pasando, vamos a ver. Parece que alguien está intentando construir un contador. Pero algo está desordenado allí. ¿Estás viendo lo que estoy viendo? Porque cuando me acerco un poco, veo todo el elegante tipo de cosas de use effect. ¿Todavía es elegante? No lo sé, ya es unas cuantas versiones en React. Pero de todos modos, puedes ver que hay una variable de conteo que tal vez viene desde el exterior. La estamos metiendo. No tenemos idea de lo que hay en ella. ¿Está saneada? ¿No lo está? ¿Deberíamos emitir y code? ¿Qué significa incluso emitir y code cosas? Aprenderemos sobre ello 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 realmente causa ataques de scripting entre sitios o vulnerabilidades, 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. Así que esta persona estaba tratando de evitar la función de Evaluación en Tiempo de Ejecución Eval básicamente aceptando también la entrada del usuario y ejecutándola. Porque cuando estás haciendo return A plus B y A es un IIFE o una función o lo que sea, bueno, se va a ejecutar. Se va a evaluar. Así que eso realmente no resuelve el problema tampoco. Así que tenemos muchas de esas cosas diferentes. Que si no estamos usando las APIs correctas, no somos conscientes de cuáles son las APIs seguras o cuáles son las APIs inseguras? No estoy hablando solo de, ya sabes, cosas peligrosamente internas de HTML. Estoy hablando de otras cosas también. Y lo verás en un segundo.

Así que presentándome, mi nombre es Iran Tal. Soy un Defensor de Desarrolladores 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 algo de JS code, escribiendo algo de Node.js code, Java, lo que sea, te ayudaremos a encontrarlo, mejoraremos tu experiencia al hacerlo diciéndote en tiempo real, si realmente tienes algunas vulnerabilities y códigos inseguros justo allí. Bueno, esto es realmente genial, pero también estoy haciendo otras cosas. Ya sabes, estrella de GitHub, activista en temas de web security. Así que, ya sabes, Node.js probablemente me envía activamente allí también, haciendo todo tipo de cosas. Pero realmente, si solo quieres contactar y hablar sobre cualquiera de esto o algo más en Twitter, Iran underscore Tal, y contacta y di, hola.

Entonces, vamos a continuar 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 estos hacen las cosas bien en el lado del cliente, ¿verdad? En lo que respecta a XSS y quizás algunas otras cosas cuando algunos frameworks toman, ya sabes, un poco más voluminoso y dan un paso más también. Pero, ¿por qué digo en su mayoría seguro, verdad? ¿Qué está pasando? ¿Por qué está Iran en este escenario ahora diciendo en su mayoría seguro? ¿Qué me queda por proteger? Porque pensé que usar React en realidad me protege de todas estas cosas extrañas de XSS que suceden en mis aplicaciones.

Entonces, para darnos cuenta de eso, necesitamos, ya sabes, explorar algo más. Estoy diciendo 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 de la jerga y ahí es donde voy a subir de nivel y simplemente decir qué es XSS para que todos aquí puedan estar en el mismo nivel de juego.

Entonces, cuando escribes este code y lo renderizas en el DOM, la entrada del usuario aquí, como el primer nombre, por ejemplo, ¿qué le sucede? En el caso general donde esta es una entrada de usuario insegura, podría llevar a potenciales, bueno vulnerabilidades, como XSS en la página web, pero con React, estás bastante seguro. Ahora, ¿por qué es eso? Y entonces veamos qué sucede cuando realmente ponemos algo como un script de alerta o fuente de imagen o lo que sea en este fragmento de code JSX. Bueno, en realidad, si miras una página, obtienes algo como esto, que parece un script o cualquier elemento que hubieran puesto allí, pero no lo es. Eso es porque si miras muy cuidadosamente con tu inspector de herramientas de desarrollo en este componente específico, elemento específico en la página, verías que todos esos corchetes angulares, no son corchetes angulares reales. Son en realidad entidades HTML que codifican y le dicen a la página que necesita renderizar, necesita renderizar como los corchetes angulares a la izquierda y a la derecha, pero no son corchetes angulares completos. Por eso es que cuando pones eso en la página y como entrada del usuario, no sucedería nada, ningún script se evaluaría realmente, ninguna evaluación de JavaScript en tiempo de ejecución, porque este no es un elemento HTML real o algo alrededor de él. Y el navegador lo sabe, y esto es lo que quiero decir cuando digo que React es en su mayoría seguro por defecto. React es en su mayoría seguro por defecto significa que sabe codificar. Así que ahora tenemos esta nueva jerga que nos dice lo que esto realmente es. Esto es seguro por defecto si realmente haces codificación de salida por defecto en cualquier entrada de usuario.

Entonces, con eso dicho con este conocimiento, avancemos un poco y averigüemos ahora si React es seguro por defecto, y hace una salida segura de la entrada del usuario, ¿por qué dices que esto es en su mayoría seguro por defecto? ¿Qué me queda aún por proteger y dónde están realmente todos los huecos? Así que vamos a sumergirnos ahora en algo de codificación en vivo juntos y veamos lo que podemos aprender sobre algunas trampas. 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 algo así como la página web con paquetes en ella. Así que vamos a sumergirnos 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í. Bien, genial. Así que este es el sitio web que acabo de construir y parece que está funcionando bastante bien. Tiene algunos elementos en él, como la entrada del usuario aquí, lo siento, como el nombre, la descripción o algo así, 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 base para simplemente simular lo que podría salir mal. Así que echemos un vistazo a esto un poco más. Por ejemplo, esta database tiene todas las cosas de las que estaba hablando aquí. Y esto es lo que vamos a usar para simular lo que podría salir mal. Así que voy a cambiar algunos de ellos, por ejemplo, solo por el bien de las cosas.

Entonces puedo cambiar esto a mi nombre aquí. Y una vez que lo hago, ves que se cargan totalidades en la ejecución por todas partes aquí. Eso está bien, pero ¿qué pasa si lo cambio a algo como fuente de imagen X en error alerta uno, y esperemos que eso desencadene un XSS? No lo hace, aquí es donde react realmente te ayuda y asegura las cosas por defecto. Realmente codifica la salida, esto es lo que dijimos con el ejemplo del primer nombre. Por eso, si intentas esas cosas y en realidad no se ejecutan, está bien. Eso es porque está bien, el nombre total aquí en la database es simplemente algo que react sabe que ahora debe aplicar la codificación de salida y cambiar todo esto en entidades HTML. Hasta ahora todo bien.

Volvamos a Kate Levy y cambiemos algo más. Esto, intentemos un enlace. Bien, intentemos un enlace, que no es solo un poco de texto. Intentemos y cambiemos esto a bueno, esto está aquí. Entonces esto es si yo, ahí vamos. Solo lo paso por encima. Podrías ver el navegador en la parte inferior izquierda. Esto va a su cuenta de Twitter. Así que voy a cambiar esto a, intentemos ser un poco maliciosos aquí. Bien, digamos que alguien tiene este campo de forma libre y simplemente construyen una alerta de JavaScript, que es de nuevo, la forma clásica de quizás introducir algún XSS. Entonces, si hago esto, dejo que la página se recargue, supongo que lo hace, esto es lo que necesitas para ir aquí y tal vez hacer clic en él y ahora vemos un XSS, pero ¿por qué, qué está pasando? Esto es realmente bastante extraño. ¿Por qué tengo un XSS y una alerta si en realidad estoy usando React? Esta es una versión bastante nueva de React también. Bueno esto, ya sabes, 17 y más. Entonces, ¿qué está pasando aquí? Ahora, para entender qué está pasando allí, volvamos aquí. El enlace de Twitter, la database, el enlace de Twitter en realidad se inserta aquí. Y entonces lo que ahora entendemos es, bueno, React no aplica la codificación de salida y te protege de los valores href, como los atributos de HTML que van aquí. Y eso es algo de lo que debes estar consciente. Entonces, intentemos solucionarlo. Si, en primer lugar, ahora estás 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. Entonces, también echemos un vistazo a eso. Voy a ir aquí y quiero decir, podemos dejarlo así.

Y justo antes de aquí, un poco, tenemos suficiente espacio. Así que vamos a intentar todo esto, uso un factor como cambio y lo desinfecto juntos. Así que intentemos algo como esto es un enlace de Twitter. Lo ponemos allí. Bien, establezco el enlace de Twitter y use state. Lo voy a iniciar con la database, sí. Bien, genial, sí, pequeño punto, use effect, use effect. Y llamaré a, sí, autocompletar. 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.

¿Qué opinas de esto? ¿Es una buena solución? Probémoslo. Me gusta este autocompletado, vayamos con ese. Básicamente, esto dice, si el enlace de Twitter allí en la database que obtenemos como entrada del usuario tiene, tiene JavaScript en él, lo establecerá en, no sé, lo establecerá en algo como esto, ¿verdad? Solo un hash y eso es todo. Espero no haber olvidado cerrar nada. Parece bien, creo que se ve bien, probémoslo. ¿Se recargó, no tengo idea, veamos. No se recargó, se recargó, lo recargaré. Ahí vamos. Entonces, todavía lo tenemos. Entonces esto aún no está funcionando. Oh, ¿no guardé este? Algo aquí, no guardé, probemos de nuevo. Oh, te diré lo que no hicimos. Entonces ahora necesitamos establecer el enlace de Twitter en lugar del enlace de Twitter de la database, ¿verdad? Esto es codificación en la vida real, depuración en la vida real, ahí vamos. Tenemos que usar la nueva variable. Bueno, ¿ahora lo está cargando lo suficientemente rápido? Ahí vamos, ahora sí lo cargó lo suficientemente rápido y puedes ver eso en la parte inferior izquierda, en realidad puedo hacer clic en él y simplemente no pasa nada porque solo agrega un hashtag allí y eso es todo. Entonces, parece que lo arreglamos. ¿Lo arreglamos? ¿Qué sucede si alguien se pone un poco, bueno, astuto y tal vez hacen algo así? Simplemente lo hacen como una cadena de tipo mayúscula. Entonces, ahora si lo hago, ¿se recargó? Espera a que se recargue, ahí tienes. Entonces, lo recargué y ahora tenemos el XSS de nuevo, por lo que la solución realmente no fue tan buena para nosotros. Probemos algo más. Digamos que queremos atraparlo. Entonces, ¿qué crees que deberíamos hacer así? ¿Deberíamos hacer un toLowerCase y probarlo así? ¿Funcionaría toLowerCase? Entonces, así. Y como puedes ver, este es básicamente el proceso de pensamiento de un desarrollador y sería genial si tuvieran una herramienta que les ayudara en el IDE para seguir básicamente las APIs correctas. Lo cargaré. Déjame ver. ¿A dónde voy? Entonces se cargó bastante rápido creo. Y parece que lo arreglamos. ¿Lo hicimos? Lo sabemos, ¿qué viene, verdad? Entonces, arreglamos la mayúscula, arreglamos la minúscula, pero ¿qué más podría entrar, verdad? Como cualquier otra cosa. Obtenemos caracteres de espacio de recorte, de recorte y todas esas cosas. Podemos probar todos esos, pero ¿funcionaría realmente, no lo harían? Podemos intentar una forma diferente de escapar de él tal vez, pero eso es tal vez un poco complicado.

Lo que no hemos probado es, qué sucede si agregamos cosas como un carácter de control. Y eso es algo que en realidad podría agregar un carácter de control aquí y escapar de algo como, slash r slash algo así. Y eso en realidad escaparía de toda la minúscula y el subíndice y todo estaría bien. Permíteme mostrarte a qué me refiero con eso. Si solo hago slash, no, no aquí, aquí, acabo de empezar con slash X nueve 10, que es un carácter de control. Si intento eso, todo se desmorona. Recárgalo de nuevo. Ahí vamos. Entonces, mientras aprendemos a hacer una cosa y la otra y la otra, todos estos están intentando mitigar un problema, pero todavía hay algunos problemas, todavía hay algunos problemas que deberíamos averiguar cómo hacerlo. Entonces, aprender a hacer las cosas correctamente es importante.

Ahora permíteme pasar a otra cosa. Digamos que en realidad quiero, oh, evitemos todo esto por un segundo, para poder probar otro ejemplo. Dije que en realidad quiero, bueno, Libby en realidad quiere seguir adelante y hacer toda 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 bastante geniales, ¿verdad? Así que no voy a construir todo esto. Voy a salir y encontrar algo donde pueda darle un archivo JSON, como el PackageManifest para tu paquete npm. Seguiremos adelante y haremos todo esto realmente genial resaltar la cosa de la sintaxis porque tampoco soy realmente una persona de CSS. Así que todo esto no es para mí. Voy a pasar a algo como el Asesor de Snyk y buscaré algunos paquetes, ya encontré algo llamado React-JSON-Pretty. Es, desafortunadamente, parece inactivo. No se mantiene o algo así, pero tiene algo como 40K descargas, que es mucho. Entonces, sabes, tal vez intentaré usarlo. Podrías intentar verificar si esto es popular por versión o no. Así que espero, quiero decir, espero que todos estén en la última versión, que lo están. Así que eso es algo bueno desde el punto de vista de la seguridad si hay como, esto era vulnerable, esto era vulnerable, sabías a qué actualizar. También parece que esto se usa principalmente como un paquete directo, lo cual tiene sentido, en lugar de como un paquete indirecto. Así que seguiré adelante y lo usaré. La versión más popular de hecho no tiene arreglos de seguridad. Veamos qué está pasando. Voy a ir y usar esto. Así que voy a entrar en el perfil del paquete. Ahí está. Hace el analizador de paquetes, estoy bastante seguro. Ahí vamos. Así que he importado esto como analizador de paquetes y le he proporcionado el manifiesto del paquete, que es básicamente todo este JSON del archivo database que tengo aquí. Juguemos con este aquí. Es un componente simple. Solo toma alguna configuración y luego las cosas se aplican por defecto, eso es todo. Y puedo seguir adelante. Y lo que quiero mostrarte es como, intentemos hacer XSS desde otros lugares.

Digamos que el nombre no es ahora Gibson Explorer. Volvamos aquí, ¿verdad? 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 alerta y ver qué pasa. Y lo cambié, pero quiero decir, no hay alerta. Ni siquiera veo una etiqueta de imagen, así que está bien. Probemos algo más.

Lo que diría es, no recuerdo qué estaba aquí, así que simplemente haré ABC, pero digamos esto, sabes, si estuviera pensando en cómo explotar esto, diría, si este paquete fue escrito por alguien, tal vez no se cuidó lo suficiente de sanear los datos o codificarlos para su salida al entrar en todos los elementos recursivos que realmente están dentro del JSON, así que todos los elementos que están viviendo dentro de otros campos en otros campos. ¿Qué pasaría si intentara ponerlo aquí? Tal vez este nivel en el JSON está saneado, pero este no lo está, o codificado para su salida sería la mejor manera de hacer esto. Pero parece que lo está. Así que eso parece estar bien. Así que volvemos a la normalidad. Ahora, parece que esto está funcionando, y si esta es una entrada JSON de un paquete NPM que también obtienes, que no está controlado por ti, que está controlado por alguien más, ¿verdad? ¿Qué pasaría si esa persona te da un mal paquete JSON, verdad? Como voy a ir y hacer algo como esto y decir, hey, 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 yo controlo, porque puedo definir lo que quiera en mi paquete JSON y el mío es solo un archivo TAR y te lo enviaré, ¿verdad? Así que si esta es la entrada ahora, veamos qué pasa. Cambió todo el significado de lo que es el paquete JSON, pero la pregunta es, ¿está la aplicación preparada para manejar algo así? No parece que lo esté, porque parece que intenta renderizarlo. Probablemente deberías haber puesto una caja de alerta en algún lugar allí. Y alertaré, en nuestra alerta, probablemente debería haber funcionado. Oh, ahí vamos. Así que ahora vemos lo que está pasando, ¿verdad? Así que ahora estás usando un componente, una biblioteca de código abierto que puede tener vulnerabilidades en ella, aunque estabas pensando que podría estar bien, sabes, probablemente, sabes, bueno, probablemente no lo está, pero no, tienes que probar todas esas cosas. Así que nos lleva al mundo de, sabes, gestionar componentes, aprender sobre todas esas cosas. Así que aquí están mis conclusiones.

Volvamos a las diapositivas. Sí, ahí vamos. Así que conclusiones para nosotros, ¿verdad? Esto es, sabes, evita todo esto, sabes, peligrosamente interno HTML, obviamente no quieres hacer esto, pero el hecho de que lo estés evitando no significa que los demás también lo estén evitando, como hemos visto aquí. Así que realmente deberías escanear tus dependencias de terceros si estás haciendo algo como npm audit, sabes, eso está bien. Es una gran manera de, sabes, tomar conciencia de las seguridad vulnerabilidades. Pero en mi caso, descubrí cuando estaba usando React.JSON en mi demo aquí es que no lo encontró cuando estaba haciendo npm install y npm audit, nada aparecía para él. Sabes, afortunadamente estaba usando una prueba de Snyk y pude encontrarlo. Así que ten en cuenta lo que estás metiendo en esto, si tengo que resumir, ¿verdad? Ten en cuenta lo que estás metiendo en tus, diría dependencias en general, colección de bibliotecas o tus aplicaciones, componentes, ten en cuenta lo que estás poniendo allí, ser capaz de escanearlo todo el tiempo y arreglarlo. Y la otra cosa es, por supuesto, ten cuidado con lo que pones en esos atributos href html porque no se codifican por defecto. Así que gracias, React, como diría, React de manera responsable y segura. Y si quieres ponerte en contacto, soy Liran Tal, gracias y que tengas un buen tiempo, Adiós.