Reverse-Engineering Todo para Deshacerte de los Problemas de Confianza

Correcto. Como ingeniero de JavaScript como ustedes, es posible que hayan visto una pregunta de entrevista similar a esta. Esta es una pregunta clásica, que es ¿en qué orden se mostrarán los registros de la consola? Y si eres un entrevistador, tal vez incluso hayas hecho una pregunta como esta durante la entrevista, y en ese caso, un poco de vergüenza para ti, pero quién soy yo para juzgar. Y creo que la forma correcta y buena, en mi opinión, de responder a esta pregunta es: no tengo idea, pero sé cómo averiguarlo. Mi nombre es Mikhail, y trabajo como ingeniero de experiencia de desarrollo en una empresa llamada TopTel.

¿Verdad? En estos días, estoy principalmente obsesionado con la felicidad del desarrollador y la infraestructura del frontend. Normalmente hablo de cosas tontas, pero hoy quiero decir que no tienes que saber todo. Sabes, cada dos semanas hay algo loco sucediendo en el mundo de JS, y sientes que te lo vas a perder si no te sumerges de inmediato, ¿verdad? Por ejemplo, por supuesto, si eres un desarrollador de React, obviamente has usado hooks, y espero que los uses ahora. ¿Y realmente sabes cómo funcionan los hooks bajo el capó? ¿Sabes cómo aparecen esas funciones mágicas? ¿Cómo saben cuándo deben ser llamadas, verdad? ¿O cuál es la fuente de la reactividad? ¿Cómo funciona? ¿Qué es este signo de dólar mágico? Y creo que está bien no saberlo. Con el tiempo y la experiencia, acumulas todos los, ya sabes, todos los casos especiales, cómo usarlos, cómo no usarlos. Con cualquier herramienta, aprendes cómo usarla, pero en realidad no tienes que saber, para entender cómo funciona debajo del capó para usarla de manera efectiva, ¿verdad? Pero es bueno saberlo, ¿no?

De todos modos, sin embargo, no sé cuántos últimos años que JavaScript ha tomado el control de todo el mundo como el lenguaje de programación elegido para aplicaciones de consumo. Es muy fácil encontrar desarrolladores de JavaScript para construir tu aplicación de escritorio, aplicación móvil, sitio web, aplicación web. Está en la vanguardia, en la nube, en todas partes. Incluso enviamos JavaScript al espacio y no culpo a las empresas por eso porque, ya sabes, es relativamente barato encontrar un buen desarrollador que haga muchas cosas al mismo tiempo. Eso es bueno. En su mayoría, esos casos de uso son lo suficientemente buenos para JavaScript, ¿verdad? Y no importa cómo lo cocines, al final, siempre sale JavaScript. Puede ser TypeScript, ReasonML, cualquier otro superset de JavaScript, pero lo que se ejecuta en tiempo de ejecución siempre es JavaScript. No hay forma de evitarlo. Algunos de ustedes pueden odiarlo. Podría decir que yo mismo estuve en un campamento similar, ¿verdad? Como que no necesitas esos 150 megabytes adicionales de navegador con tu Slack, ¿verdad? Y todo ese JavaScript es lento y yada yada yada. Lo sabes bien, ¿verdad? Pero en realidad creo que JavaScript, todo lo que se ejecuta en JavaScript, te brinda un poder nunca antes visto para modificar y cambiar el código en tiempo de ejecución. Puedes inspeccionar todo. Puedes sobrescribir todo. Es como, ya sabes, cambiar las llantas del coche. Vas. Tengo un muy buen ejemplo. Por ejemplo, digamos que quieres buscar qué son las cookies del navegador. Tú, ya sabes, lo usual.

Vas a Google, encuentras un artículo interesante, comienzas a leerlo, blah, blah, blah. Algo sucede. Y eso es algo que te impide navegar más. Y sabes qué, lo que suelo hacer, espero no ser el único que lo hace, pero simplemente voy a las herramientas para desarrolladores y lo elimino, ¿verdad? Tal vez algo relacionado con mi bloqueador de anuncios o cualquier otra cosa, pero eso es lo que haces, simplemente modificas el sitio web. Imagina hacer esto en una aplicación nativa. No es posible en absoluto.

De acuerdo. Historia. Hay un sitio web llamado thegarden.com.us, que es una tienda de alimentos saludables y costosos con sede en Estados Unidos. Y hay una página de promoción en el sitio web, que se supone que facilita las ventas por cada $200 gastados. Tienes la oportunidad de participar en una lotería diaria. Así es como se ve. Inicias sesión como un cliente respetable. Inicias sesión con tu ID de lealtad, presionas el botón de inicio de sesión y comienzas el juego. Volteas algunas cartas y obtienes ofertas de descuento. Todo está bien. Luego, puedes ir y comprar tus barras veganas con un 40% de descuento en la tienda en persona. Al día siguiente, vuelves, hay un enfriamiento de 24 horas y luego vuelves a la tienda y haces todo de nuevo. ¿Verdad? Pensé, está bien, eso está bien. Parece bien. Fue interesante. Hay un 40%, hay un 35%. Eso estuvo bien. Parece que podría obtener algunos descuentos bastante buenos aquí. Un 60%. Un 87%. Imagina obtener eso. Eso está bien. Así que lo hice. Luego me fui.

Y luego al día siguiente volví, volví a obtener algunos de los descuentos. Hice esto durante dos o tres días. Y luego en el cuarto día pensé para mí mismo, vale, nunca parezco obtener esos descuentos realmente buenos. ¿Verdad? Así que me volví un poco sospechoso. No sé por qué, pero es algo que me sucede de vez en cuando.

En realidad, tengo un ID de lealtad diferente aquí. Así que veamos, lo que suelo hacer cuando quiero inspeccionar todos los detalles de cómo se ejecuta el sitio web, simplemente abro las herramientas para desarrolladores del navegador web. ¿Verdad? Abro la pestaña de red. Obviamente, no es posible ejecutar una promotion como esta sin que esté involucrado el servidor. En algún momento obtendrás los data de esas cartas emergentes o algo así, los obtendrás en la pestaña de red. Así que eso es lo que hice. Presioné iniciar sesión. Y puedes ver un par de solicitudes apareciendo aquí y allá. Así que obtenemos análisis, que en realidad es algo que no necesitamos ver aquí porque el análisis, ya sabes, cada vez que haces clic en cualquier lugar, se solicita el análisis. Así que filtramos el análisis para que solo podamos ver las cosas que importan. ¿Verdad? Limpiémoslo. Y luego voy a presionar iniciar aquí y obtuvimos dos solicitudes. Es justo. Ahora sigamos haciendo clic. Uno, obtuve una solicitud para la imagen. Boom, boom. Luego se cargan el resto de las imágenes, ¿algo sospechoso por aquí? No. Porque si te fijas, cuando hago clic en una carta, no se realiza la solicitud, lo que significa que estos estafadores amañaron el juego. Ya sabían lo que iba a obtener incluso antes de hacer clic en las cartas. ¿Verdad? Y eso no me gusta. Quiero decir, puedo entenderlo porque yo mismo, incluso trabajando en un equipo de crecimiento en algún momento de mi vida, sé que hice lo mismo en cada día festivo importante, como el viernes, haría algo así. Siempre es beneficioso para el negocio, pero ¿sabes qué? Como consumidor, tal vez aún puedas obtener algún beneficio de ello.

De acuerdo. Así que honestamente, te ahorraré algunos de los detalles, pero también descubrí que si simplemente vas a las cookies aquí, puedes ver algunas de ellas y esto aquí en el valor de la cookie es algo que se ve así. Eso es una marca de tiempo codificada en base64 de cuando jugaste por última vez el juego.

No parece realmente seguro, ¿verdad? No es algo que validarías en el lado del cliente. Es como, bueno, ¿qué pasa si elimino las cookies, que es lo que hice. Ahí está el sitio web. Boom. Inicié sesión de nuevo. ¿Y qué ves? Puedo jugar de nuevo. Eso me da el punto agradable de repetibilidad. Puedo simplemente eliminar la cookie y jugar de nuevo. Es como, wow. Podría obtener todas las mejores ofertas. Así que si simplemente hago clic aquí, boom, obtengo esto. Elimino la cookie, actualizo de nuevo, inicio. Ahí va. Es magia. Puedo obtener más ofertas, pero aún así nunca son buenas por alguna razón, ¿verdad?

Pensé, bueno, tal vez pueda, ¿sabes?, incluso evitar hacer clic si modifico el code del sitio web. Veremos eso. Hay varias formas en las que puedes hacerlo si quieres acceder al code del sitio web. Lo que quieres hacer es romper el code, lo que significa detener la ejecución de JavaScript en algún punto, ¿verdad? Y sabemos que obtenemos todas esas cosas buenas, todos estos data para las cartas desde el servidor, ¿verdad? No en el cliente. En qué punto haría esto, iría a mi segunda pestaña favorita de las herramientas para desarrolladores de Chrome, que es Fuentes. Y aquí mismo, tienes, ya sabes, todo el JavaScript. Déjame sacar esto. Es así. Tenemos todo el JavaScript aquí que vuelve del servidor a nuestro cliente y vive aquí ahora.

Hay un par de formas de hacer eso. Por ejemplo, podrías decir que cuando hago clic en el botón, detenga el JavaScript, luego podemos ver si después de este botón se realiza una solicitud fetch. Y luego podemos romper el code de esa manera. Pero lo que me gusta es detenerme siempre que, sin importar lo que suceda, se realice cualquier tipo de solicitud fetch. Así que hago clic en esto. Boom. Y esto, como puedes ver, es el análisis.

Eso es justo. Mantengámoslo así. De acuerdo. Permíteme pausar esto por un segundo. En realidad, llegaremos al lugar que importa. Ya sabemos que podemos simplemente eliminar las cookies y repetir el proceso, ¿verdad? Iniciar sesión, llegar aquí. Y en este punto, habilitaré mi punto de interrupción que detendrá la ejecución de JavaScript en cualquier solicitud fetch que se realice. Así que comencemos, análisis, no es interesante. Sigamos adelante.

Y aquí está la segunda cosa, que podríamos ver en el depurador, podríamos ver que la URL es slash promo slash game. De acuerdo, algo interesante. Y pasemos a la pila de llamadas. Este hermoso lugar que me permite viajar en el tiempo durante un breve período de tiempo, por supuesto, para recorrer la pila de llamadas y ver cuál fue el iniciador de la solicitud. Y sabes, al revisar todo esto, todo esto parece ser un framework en términos, supongo, en realidad, quiero decir, ya lo sé. Pero al mirar todo esto, puedes ver que esto es Next.js, es una aplicación de Next.js, ¿verdad? Y todas estas cosas son internas del framework. Pero en algún lugar por aquí, puedo ver `on start`, que es algo que se puede leer. Y hace algo, hay una promesa, luego sucede algo. Y puedo ver que este tipo de archivo se parece a un código de lógica empresarial. Así que estoy interesado en eso. Eso es exactamente lo que voy a hacer. Así que hay esta función agradable en las Herramientas de Desarrollo de Chrome llamada reemplazos, puedes tomar cualquier archivo remoto, cualquier archivo que sea parte del paquete, por así decirlo, y puedes reemplazarlo con tu archivo local y decir, `ok, este archivo local ahora está reemplazando al del servidor`. Simplemente hará eso, puedes hacer clic en esto, hacer clic derecho, reemplazar contenido. Y ahí vamos. Ahora este archivo aquí, exactamente el mismo archivo, pero ahora está almacenado en algún lugar localmente, en una computadora. Y para continuar, en realidad iría a ID, que es lo que prefiero para las cosas que se mantendrán un poco más tarde.

De acuerdo, voy a omitir algunas cosas que no son relevantes, pero puedes descubrirlo cuando lo recorras por tu cuenta, ya sabes, y llegar a la función que realmente importa, lo cual, si alguna vez, no sé si alguna vez has experimentado esto, pero si alguna vez has intentado desensamblar código de máquina, es solo uno de mis tipos favoritos de videos de YouTube, simplemente vas y ves a la gente desensamblar el código de máquina. Y el proceso aquí es muy similar. Muchas de estas cosas no tienen sentido. Parece un código ilegible de fragmentos de webpack, codificación, enmascarado y todas estas cosas juntas. Pero aquí, hay algo, déjame ver.

Comencemos, ¿dónde estaba esta función? ¿Está aquí? Oh, sí, ahí está. Y ahí está la función que importa de nuevo. De acuerdo, lo que voy a hacer es utilizar este tipo de capacidades de refactorización de mi ID y simplemente empezar a cambiar el nombre de las cosas. Así que esto va a ser algún componente, y va a ser props. Así que podemos ver que esto es React, tenemos useState aquí, hay props, last played, has played props, y puedes ver que nuestro código se vuelve cada vez más legible para los humanos.

Última fecha props. Ahí lo tienes. Ahora tenemos un useState. Así que, React, sabes cómo funciona useState. Esto es un useState con el valor predeterminado de si has jugado de props, entonces se restaura. De lo contrario, es intro. Y al mirar esto, podemos asumir que este es algún tipo de estado del juego, estado. Y este va a ser set game state. Ahí lo tienes. Este, todavía no sabemos qué es, porque esto es solo un array. Lo voy a llamar algún array. Este va a ser set some array. Así, sin más. Todavía no sabemos qué hace, así que será algún array. Este, un x useState que es un objeto de entries, array, nueve, keys. Así que esto parece crear un objeto de valores Q con nulos de cero a nueve, de cero a ocho. Eso realmente se parece a nuestra pequeña cuadrícula de cartas aquí. Así que supongo que esto es algo como el estado de las cartas. Digámoslo, estado de las cartas. Y esto va a ser set card state. Ahí lo tienes. Este, sin comentarios, nada demasiado grande, es solo un cero. Lo vamos a llamar un número.

Se va a establecer un número, así como así. De acuerdo. Ahora hemos terminado con todos estos use states, obtenemos un use effect aquí. Si has jugado desde props, entonces es una promesa y establece un array a lo que sea que salga de ella. Tiene sentido, ¿verdad? Es justo.

Ahora está esta función. De hecho, también me gusta colapsar las funciones y ya terminé con eso. Esa también es una de las razones por las que puedes hacerlo más fácilmente en el IDE. Así que esta, hay una función grande que si un número es menor que dos, incrementas el número y estableces el estado de la carta en algo. Y al mirar esto, podemos entender que probablemente sea una función que se llama cuando haces clic en una carta. Así que simplemente lo haremos en el clic de la carta. Y esto probablemente sea un índice de carta, índice de carta. Y el número en este caso, el número se está convirtiendo en amped. Así que ya puedes ver, el número ahora está establecido en amped. Y ahí lo tienes. Este code ya puedes ver cómo todas estas cosas se van juntando poco a poco. Así que lo que hacemos es intentar menos que dos, revelamos una carta, revelamos una carta con el índice seleccionado y así sucesivamente hasta llegar al estado del juego terminado, ¿verdad?

Y luego está nuestra cosa que se llama en inicio que está haciendo algo, obteniendo, supongo que tal vez esas son las promesas que van hacia el servidor, blah, blah, blah. Pero esto es lo que sucede cuando comenzamos el juego, ¿verdad? ¿Qué pasa si, ya sabes, hacemos lo correcto y decimos console log E aquí, y guardamos el archivo. Y ahora si volvemos, déjame desactivar los puntos de interrupción aquí. No los necesitamos. Hemos encontrado el lugar. Así que volvamos, y recuerda, todavía podemos borrar las cookies a través de establecer nuestro temp, boom, ahí lo tienes. Así que presionas iniciar, abres una console aquí, y puedes ver, mira eso. Estas son todas las cosas que hemos solicitado al servidor. E incluso dice posible verdadero, lo cual es bastante divertido. Hay un descuento, precio con descuento, y para cada uno de ellos, ves que algunos de ellos son posibles. Supongo que los primeros tres son los que vas a abrir. Y los últimos son posibles falsos que tienen mayores descuentos, ¿verdad? Hay mucha diversión. Y al mirar esto, podemos ver que los productos que estamos obteniendo, supongamos los primeros tres, hay mezcla de batidos, chips de col rizada y té detox. Batido, chips de col rizada, té detox, todo está bien.

Y finalmente, solo, ya sabes, para refrescar, veamos, queremos seguir lanzando esos intentos. En realidad, si te fijas al principio, hay esta propiedad fina, el componente que dice, ha jugado desde props. Y el estado inicial es, si has jugado, entonces se restaura, de lo contrario es intro. ¿Qué tal si simplemente lo hacemos intro? Solo, ya sabes, solo para ver qué pasa. Y con eso en mente, actualiza la página, presiona iniciar, lanza tus descuentos, todo bien, actualiza la página, juega de nuevo al instante. Ni siquiera necesitas borrar la cookie. Y así es como lo hice en realidad. Lo disfruté mucho. Es como un pequeño juego de detectives, ya sabes, descubriendo cómo se conectan todas las piezas. Y ahí está eso. Y así es como modificas el sitio web, haz que haga lo que quieras. No seas tonto. No te dejes engañar por las promociones.

De acuerdo. Y con eso en mente, creo que es hora de la diapositiva final, en la que digo gracias por sintonizar esta divertida pequeña experiencia. Espero que hayas aprendido algo nuevo. Y si quieres ver mi tonto sitio web con toda la información de contacto, el código QR está ahí. Gracias.