janhalendk/reactUn progetto OSINT che esplora come estrarre dati da React
Questo strumento è uno userscript rapido e sporco per Tampermonkey che scava un paio di livelli in qualsiasi pagina React e cerca una o più frasi fornite dall'utente.
Lo strumento rende facile trovare il punto giusto nel DOM in cui React collega grandi blocchi di dati JSON.
Trovare questi punti manualmente può richiedere molto tempo, poiché dipende molto dallo sviluppatore, dalla versione di React e dalla complessità del sito specifico come i dati vengano memorizzati e passati.
Questo userscript mira a rendere questo processo molto più semplice.
Di seguito un video dello script in uso.
Per ulteriori informazioni su come e perché questo funziona, fare riferimento al tutorial sullo stesso argomento altrove in questo repo.
Copia lo userscript da questo repo e segui le istruzioni nella documentazione di Tampermonkey su come installare lo script.
In sostanza, selezioni Create a new userscript, elimini qualsiasi boilerplate suggerito da Tampermonkey, incolli lo userscript e salvi. Poi sei pronto a partire.
Una volta installato, lo userscript fornisce un menu contestuale con il tasto destro con due pulsanti, che dovrebbero essere abilitati su tutti i siti che usano React (se ne trovi uno in cui non lo sono, per favore fammi sapere):
reactPropsreactFiberQuesto si può vedere qui sotto.
I pulsanti prendono il nome da due proprietà interne che React collega ai nodi HTML nel DOM normale. React le usa per passare dati internamente, per costruire la pagina, per mantenere lo stato della pagina sincronizzato con il suo Virtual DOM (VDOM), per reagire alle azioni dell'utente, ecc.
È anche attraverso queste proprietà che possiamo accedere e scaricare dati grezzi in grandi quantità. Anche tantissimi dati che altrimenti non sono esposti nel DOM.
Per usare lo strumento basta aprire la console JavaScript negli strumenti di sviluppo e scegliere una delle due opzioni. Se una non ti dà dati, prova l'altra. Come detto, ciò che funziona sembra dipendere molto dal sito specifico.
In questo esempio sto cercando dati sui video TikTok del SANS Institute. Come input ho fornito una delle frasi — four days — trovata sotto il primo dei video:
L'input che fornisci allo userscript viene convertito in minuscolo e gli spazi bianchi vengono rimossi prima del confronto con il contenuto collegato come proprietà ai nodi HTML, quindi scrivi semplicemente quello che vuoi, davvero.
Se vuoi, puoi usare anche più frasi, basta separarle con una virgola. Se volessi puntare a più video nell'esempio di TikTok, potrebbe essere four days,congratulations,thank you.
Lo script usa OR e non AND come operatore di ricerca.
Puoi anche usare un carattere jolly *, che scaricherà tutto.
Un piccolo avvertimento però:
Fare una ricerca con * potrebbe causare il crash degli strumenti di sviluppo, semplicemente perché potrebbe facilmente scaricare decine di migliaia di righe di dati. Quindi usa quella funzionalità solo come ultima risorsa. Soprattutto su Facebook verrai sepolto dai dati, se lo fai.
In generale, cose utili da cercare sarebbero determinati nomi utente / id utente che sai dovrebbero essere presenti — o se sai che da qualche parte c'è una proprietà chiamata videoData, usa semplicemente quella.
Quando si lancia lo script su TikTok (reactProps) un sacco di dati vengono registrati nella console JavaScript — e anche negli appunti. In fondo vedrai un conteggio di quante corrispondenze hanno dato i pattern di ricerca (5 in questo caso).
Se vuoi esplorare i dati JSON, basta incollarli in un editor — preferibilmente uno che supporti JSON e l'evidenziazione della sintassi. Questo rende molto più facile esaminarli.
La funzionalità davvero interessante, però — se hai intenzione di costruire strumenti basati su React per il sito specifico — non è il dump negli appunti. Oltre a scaricare i dati, lo script registra anche sia il nodo HTML che ha dato la corrispondenza, sia il percorso esatto della proprietà in cui è stata trovata la corrispondenza.
Questa funzionalità risolve uno dei veri grattacapi quando si cerca di mappare il VDOM di React al DOM normale, con cui — a differenza del VDOM — possiamo interagire usando JavaScript puro.
In questo caso l'output ci dice che i dati che vogliamo sono collegati come proprietà, tra gli altri, al nodo HTML <div class="css-x6y88p-DivItemContainerV2 e19c29qe8"> come proprietà nel percorso: __reactProps$xunlb5k9rwt | children | 1 | props.
Avere questa conoscenza significa che ora sappiamo esattamente quale nodo — e a quale percorso — possiamo recuperare i dati.
La | è solo un separatore che ho scelto. Quando converti questo in uno script, sostituiscili con la notazione a punti in questo modo __reactProps$xunlb5k9rwt.children[1].props — o con la notazione a parentesi quadre in questo modo ["__reactProps$xunlb5k9rwt"]["children"][1]["props"].
Come notato nel tutorial su React altrove in questo repo, la parte __reactProps ha una stringa di 10 caratteri che viene generata casualmente a ogni caricamento della pagina.
Vedi il tutorial per un esempio funzionante di come estrarre la chiave di cui hai bisogno da uno dei nodi HTML.
Ciò che lo script fa effettivamente è scendere di un paio di livelli in ogni proprietà della categoria scelta (__reactFiber o __reactProps) e provare a convertire tutto ciò che c'è dentro in JSON (JSON.stringify()). Se gli oggetti all'interno contengono riferimenti circolari (e molti lo faranno), non può essere analizzato come JSON. Provare a convertirlo solleverà un errore che viene catturato e il ciclo ignorerà semplicemente questo e continuerà.
Lo script al momento guarda anche solo le proprietà per i tag <div> e <article>. Se scopri che per questo motivo manca qualcosa, per favore fammi sapere. È molto un lavoro in corso.
Lo script inoltre non ricorre molto in profondità nelle proprietà. Prima di tutto faccio schifo con la ricorsione. In secondo luogo non sono così interessato a cose annidate in profondità nelle proprietà, poiché costruire qualcosa sopra è più probabile che si rompa a causa anche di piccoli cambiamenti sulle piattaforme che si potrebbero prendere di mira. Per la mia esperienza, dovrebbe essere possibile trovare i dati vicino al nodo HTML.
Questo script è solo a scopo educativo. Non abusarne. Comportati bene. Sii gentile. E non infrangere nessuna legge.