janhalendk/reactA OSINT project that explores how to dump data from React
Esta herramienta es un userscript rápido y sencillo para Tampermonkey que profundiza un par de niveles en cualquier página de React y busca una o más frases proporcionadas por el usuario.
La herramienta facilita encontrar el lugar correcto en el DOM donde React adjunta grandes fragmentos de datos JSON.
Encontrar estos lugares manualmente puede llevar mucho tiempo, ya que depende en gran medida del desarrollador, de la versión de React y de la complejidad de un sitio determinado cómo se almacenan y se transmiten los datos.
Este userscript pretende hacer este proceso mucho más fácil.
A continuación se muestra un vídeo del script en uso.
Para obtener más información sobre cómo y por qué funciona esto, consulta el tutorial sobre el mismo tema en el resto de este repo.
Copia el userscript de este repo y sigue las instrucciones de los documentos de Tampermonkey sobre cómo instalar el script.
El resumen de todo es que selecciones Create a new userscript, borres lo que sea que sugiera Tampermonkey como plantilla, pegues el userscript y pulses guardar. Entonces ya estás listo.
Una vez instalado, el userscript proporciona un menú contextual con el botón derecho con dos botones, que deberían estar habilitados en todos los sitios que usan React (si encuentras alguno en el que no estén, házmelo saber):
reactPropsreactFiberEsto se puede ver a continuación.
Los botones llevan el nombre de dos propiedades internas que React adjunta a los nodos HTML en el DOM normal. React las usa para pasar datos internamente, para construir la página, para mantener el estado de la página sincronizado con su propio DOM Virtual (VDOM), para reaccionar a las acciones del usuario, etc.
También es a través de estas propiedades que podemos acceder y volcar datos sin procesar en masa. También toneladas de datos que de otro modo no están expuestos en el DOM.
Para usar la herramienta, simplemente abre la consola de JavaScript en las herramientas de desarrollador y elige una de las dos opciones. Si una no te da ningún dato, prueba con la otra. Como se ha dicho, lo que funciona parece depender en gran medida del sitio web concreto.
En este ejemplo busco datos sobre los vídeos de TikTok del SANS Institute. Como entrada proporcioné una de las frases: four days, que se encuentra debajo del primero de los vídeos:
La entrada que le das al userscript se convierte a minúsculas y se le recortan los espacios en blanco antes de compararla con el contenido adjunto como propiedades en los nodos HTML, así que simplemente escribe lo que quieras, en serio.
Si quieres, también puedes usar varias frases; solo sepáralas con una coma. Si quisieras apuntar a varios vídeos en el ejemplo de TikTok, eso podría ser four days,congratulations,thank you.
El script usa OR y no AND como operador de búsqueda.
También puedes usar un comodín *, que volcará todo.
Una pequeña advertencia al respecto:
Hacer una búsqueda con * podría hacer que tus herramientas de desarrollador se bloqueen, simplemente porque podría volcar fácilmente decenas de miles de filas de datos. Así que usa esa característica solo como último recurso. Especialmente en Facebook te verás enterrado en datos si lo haces.
En general, cosas útiles para buscar serían ciertos nombres de usuario / ID de usuario que sepas que deberían estar presentes, o si sabes que hay una propiedad en algún lugar llamada videoData, simplemente usa esa.
Al ejecutar el script en TikTok (reactProps), se registra un montón de datos en la consola de JavaScript, y también en tu portapapeles. En la parte inferior verás un recuento de cuántas coincidencias dieron los patrones de búsqueda (5 en este caso).
Si quieres explorar los datos JSON, simplemente pégalos en un editor, preferiblemente uno que admita JSON y resaltado de sintaxis. Eso hace que sea mucho más fácil revisarlos.
La característica realmente buena, sin embargo, si planeas construir herramientas basadas en React para el sitio web específico, no es el volcado del portapapeles. Además de volcar los datos, el script también registra tanto el nodo HTML que dio la coincidencia como la ruta de propiedad exacta en la que se encontró la coincidencia.
Esta característica resuelve uno de los verdaderos dolores de cabeza al intentar mapear el VDOM de React al DOM normal, con el que nosotros, a diferencia del VDOM, podemos interactuar usando JavaScript vanilla.
En este caso, la salida nos dice que los datos que queremos están adjuntos como propiedades, entre otros, al nodo HTML <div class="css-x6y88p-DivItemContainerV2 e19c29qe8"> como una propiedad en la ruta: __reactProps$xunlb5k9rwt | children | 1 | props.
Tener este conocimiento significa que ahora sabemos exactamente qué nodo, y en qué ruta, podemos obtener los datos.
El | es solo un separador que elegí. Al convertir esto en un script, reemplázalos con notación de puntos así __reactProps$xunlb5k9rwt.children[1].props, o con notación de corchetes así ["__reactProps$xunlb5k9rwt"]["children"][1]["props"].
Como se señala en el tutorial de React en el resto de este repo, la parte __reactProps tiene una cadena de 10 caracteres que se genera aleatoriamente en cada carga de página.
Consulta el tutorial para ver un ejemplo funcional de cómo extraer la clave que necesitas de uno de los nodos HTML.
Lo que realmente hace el script es profundizar un par de niveles en cada propiedad de la categoría elegida (__reactFiber o __reactProps) e intentar convertir todo lo que hay dentro a JSON (JSON.stringify()). Si los objetos internos contienen referencias circulares (y muchos las tendrán), no se pueden analizar como JSON. Intentar convertirlos generará un error que se captura y el bucle simplemente lo ignorará y continuará.
El script actualmente también solo mira las propiedades de las etiquetas <div> y <article>. Si descubres que se pierde algo por esta razón, házmelo saber. Esto es muy trabajo en progreso.
El script tampoco recurre muy profundo en las propiedades. En primer lugar, soy malísimo con la recursión. En segundo lugar, no me interesa tanto lo que está profundamente anidado en las propiedades, ya que construir cosas sobre eso es más propenso a romperse debido incluso a cambios menores en las plataformas a las que uno podría apuntar. Por mi experiencia, debería ser posible encontrar los datos cerca del nodo HTML.
Este script es solo para fines educativos. No lo abuses. Compórtate. Sé amable. Y no infrinjas ninguna ley.