Cómo los Aplicaciones de React son Hackeadas en el Mundo Real

¿Cómo te gustaría hackear una aplicación React en vivo de RealWorld? Así que empecemos y veamos cómo hacerlo en siete minutos. Intentaré darte la mayor cantidad de consejos y mejores prácticas que pueda y mostrarte dónde están los problemas comunes cuando escribes código React.

Así que mi nombre es Iruntal, soy un defensor del desarrollo en Snyk, donde ayudamos a los desarrolladores a construir software seguro. Tengo un montón de cosas sobre OWASP y Node.js y la investigación de seguridad que estoy haciendo por mi cuenta. Si tienes alguna pregunta o quieres ayudarme con eso, solo contáctame después y estaré encantado de hablar contigo y hacer algunas cosas juntos.

Entonces, ¿cómo se pueden encontrar vulnerabilidades en React en vivo? Básicamente, piensa en XSS. Y lo explicaré rápidamente. ¿Por qué estoy hablando de XSS y cross-site scripting cuando tenemos React y los modernos frameworks de frontend? Considera este ejemplo de código, que tiene un nombre con una imagen XSS y el nombre es una entrada del usuario. Fluye hacia tu JSX de esta manera y React muestra algo como esto. Hasta aquí todo bien. Cosas básicas. Funciona. En realidad, React muestra esto y no lo otro que viste antes. Estas se llaman entidades HTML y permiten que el navegador entienda que son triángulos izquierdos y derechos con los símbolos menor que y mayor que, y todas esas cosas. Y así el navegador entiende que quieres imprimirlo y te muestra esto. Cosas básicas.

Pero React es seguro por defecto. O seguro por defecto, eso es lo que significa. Hace la codificación de salida. ¿Qué tal si te digo que a veces no lo hace? No siempre. Y ahí es donde las cosas se complican. Así que descubramos la primera cosa. Toma uno. Quiero agregar un enlace a una aplicación React. Imagina que esta es mi aplicación y la estoy construyendo en el lado derecho. Hay una historia de usuario, ¿verdad? Los gerentes de producto ponen una historia de usuario. Quieres agregar enlaces de Twitter. Tiene sentido. Agrego un enlace de Twitter. Puedes ver la entrada. Básicamente tengo mi enlace de Twitter que viene, tal vez, desde un JSON del backend o desde otro lugar.

Y tengo mi código React con un componente. Hay un botón en él. H ref. Le doy el enlace de Twitter. ¿Hasta aquí todo bien? Veamos.

Bueno, básicamente, si esto fluye hacia el enlace de Twitter tal como está, eso es una vulnerabilidad de cross-site scripting. Entonces, si hicieras eso, y realmente la entrada del usuario para el enlace de Twitter fuera la siguiente, obtendrías una alerta emergente. Esto es código React simple. No hice nada más que mostrarte el código de lo que realmente sucede. La cosa es que React no sanitiza ni muestra en el código esos atributos H ref.

Entonces intentemos solucionarlo. Tal vez intentemos solucionarlo y hagamos algo como, bueno, detectar todas esas JavaScript y dos puntos que se están introduciendo allí, índice de, ¿verdad? Estoy detectando y comenzando con esto en lugar de estar en otro lugar de la URL. Seguiré adelante y lo solucionaré con un hashtag ficticio. Así que hago eso, pero luego... Eso no funciona porque los hackers son inteligentes, así que intentan diferentes formas de probar la aplicación.

Entonces tal vez estoy pensando, bueno, sabes qué? Intentaré solucionarlo con minúsculas. Así que convertiré todo a minúsculas y luego los compararé. ¿De acuerdo? Así que hice esto. Muy simple. Lo puse en producción. Probé. Funciona. Pero luego alguien viene y hace algo como esto. ¿De acuerdo? Esto es un corrector de control. Si alguien lo introduce, significa básicamente el final del medio, el final de la línea. Esta es una forma para que alguien lo introduzca. Y así, todo eso simplemente deja de funcionar. Enlaces en aplicaciones React. Piensa en el hecho de que aquí las mejores prácticas no son negacionistas, ¿de acuerdo? Están tratando de descubrir cómo eliminarlo. También piensa en cosas como sanitizar las entradas de usuario donde corresponda.

Debido a que React no sanitiza ni codifica correctamente la salida de todo lo que se le ingresa. Hay contextos específicos como los atributos HTML, dos elementos y todas esas cosas. Dicho esto, veamos otra forma de hacerlo.

Descubriendo las vulnerabilidades XSS de otras personas. ¿Cómo se muestra un JSON de forma legible como esto? Porque no quiero escribir toda la lógica para imprimirlo y darle formato, etc. Así que hago una instalación de npm para un paquete que lo hace por mí. Tiene sentido. Este tiene 50K descargas a la semana. Así que me siento bastante seguro al instalar React JSON pretty. Lo hago. Lo importo. Todo eso tiene sentido. Luego lo uso de esta manera. Un componente muy genial, fácil y simple. Hasta ahora, todo bien. Eso es lo que haces todo el día. ¿Está libre de XSS?

Piensa en qué entrada puede fluir hacia la aplicación. Tal vez fluya de diferentes formas. Tal vez tu manifiesto de paquete o el JSON que quieres mostrar no sea realmente un JSON Tal vez sea una cadena. Aquí está el código para eso. Este es el código del componente React JSON pretty. La biblioteca npm. Puedes ver que tiene algunos HTML establecidos de manera peligrosa, pero en realidad llama a esta función pretty, que es un método interno que intenta codificar la salida correctamente. Hace esencialmente lo que hace React. Bueno, si observas más detenidamente lo que sucede con las cosas que intenta capturar y no hacer correctamente. En realidad, tiene esta área donde lo captura, pero no codifica la salida correctamente. Así que eso es lo que tenemos. Y han intentado hacer algo de XSS para intentar eliminarlo. Tal vez lo hayas intentado. Tal vez no funcione. Tal vez lo uses en un contexto específico. Y te encuentres con el mismo problema, porque si intentas hacer eso en XSS para un atributo, eso no va a funcionar. Necesitas hacer codificación de contexto.

Así que dicho esto, te diré que si quieres aprender más sobre todo esto Hay muchas cosas en el blog. Puedes buscar cosas como react-security-best-practices-sneak o algo así. Y hacer codificación segura. Muchas gracias. Diviértete.