janhalendk/reactUn projet OSINT qui explore comment extraire des données de React.
Cet outil est un userscript rapide et sale pour Tampermonkey qui creuse de quelques niveaux dans n'importe quelle page React et recherche une ou plusieurs phrases fournies par l'utilisateur.
L'outil permet de trouver facilement le bon endroit dans le DOM où React attache de gros morceaux de données JSON.
Trouver ces endroits manuellement peut prendre beaucoup de temps, car la manière dont les données sont stockées et transmises dépend beaucoup du développeur, de la version de React et de la complexité du site concerné.
Ce userscript a pour but de rendre ce processus beaucoup plus facile.
Vous trouverez ci-dessous une vidéo du script en cours d'utilisation.
Pour plus de contexte sur comment et pourquoi ce travail a été réalisé, reportez-vous au tutoriel sur le même sujet ailleurs dans ce dépôt.
Copiez le userscript depuis ce dépôt et suivez les instructions des docs Tampermonkey sur la façon d'installer le script.
L'essentiel est de sélectionner Create a new userscript, de supprimer le code passe-partout que Tampermonkey suggère, de coller le userscript, puis d'enregistrer. Ensuite, vous êtes prêt.
Une fois installé, le userscript fournit un menu contextuel au clic droit avec deux boutons, qui devraient être actifs sur tous les sites utilisant React (si vous en trouvez un où ce n'est pas le cas, merci de me le faire savoir) :
reactPropsreactFiberVoici à quoi cela ressemble.
Les boutons portent le nom de deux propriétés internes que React attache aux nœuds HTML dans le DOM classique. React les utilise pour faire circuler des données en interne, construire la page, maintenir l'état de la page synchronisé avec son propre DOM virtuel (VDOM), pour réagir aux actions de l'utilisateur, etc.
C'est également à travers ces propriétés que nous pouvons accéder aux données brutes et les déverser en masse. Et il y en a des tonnes qui ne sont pas exposées autrement dans le DOM.
Pour utiliser l'outil, ouvrez simplement la console JavaScript des outils de développement et choisissez l'une des deux options. Si l'une ne vous donne aucune donnée, essayez l'autre. Comme indiqué, ce qui fonctionne semble dépendre fortement du site concerné.
Dans cet exemple, je cherche des données sur les vidéos TikTok du SANS Institute. En entrée, j'ai fourni l'une des phrases — four days — trouvée sous la première des vidéos :
L'entrée que vous fournissez au userscript est convertie en minuscules et les espaces sont supprimés avant la comparaison avec le contenu attaché comme propriétés aux nœuds HTML. Tapez donc simplement ce que vous voulez.
Si vous le souhaitez, vous pouvez également utiliser plusieurs phrases, il suffit de les séparer par une virgule. Si vous vouliez cibler plusieurs vidéos dans l'exemple TikTok, cela pourrait être four days,congratulations,thank you.
Le script utilise OR et non AND comme opérateur de recherche.
Vous pouvez également utiliser un joker *, qui déversera tout.
Un petit avertissement à ce sujet cependant :
Effectuer une recherche * peut faire planter vos outils de développement, tout simplement parce que cela peut facilement déverser des dizaines de milliers de lignes de données. N'utilisez donc cette fonctionnalité qu'en dernier recours. Sur Facebook en particulier, vous serez submergé de données si vous le faites.
En général, les choses utiles à rechercher seraient certains noms d'utilisateur / identifiants utilisateur que vous savez devoir être présents — ou si vous savez qu'il y a une propriété quelque part nommée videoData, utilisez simplement celle-ci.
Lorsque vous lancez le script sur TikTok (reactProps), un tas de données est journalisé dans la console JavaScript — et également dans votre presse-papiers. En bas, vous verrez un compteur indiquant combien de correspondances les modèles de recherche ont données (5 dans ce cas).
Si vous souhaitez explorer les données JSON, collez-les simplement dans un éditeur — de préférence un qui prend en charge JSON et la coloration syntaxique. Cela rend l'analyse beaucoup plus facile.
La fonctionnalité vraiment intéressante, cependant — si vous prévoyez de créer des outils basés sur React pour le site en question — n'est pas le contenu du presse-papiers. En plus de déverser les données, le script journalise à la fois le nœud HTML qui a produit la correspondance et le chemin exact de la propriété où la correspondance a été trouvée.
Cette fonctionnalité résout l'un des vrais casse-têtes lorsqu'on essaie de faire correspondre le VDOM de React au DOM classique, avec lequel nous — contrairement au VDOM — pouvons interagir en utilisant du JavaScript vanilla.
Dans ce cas, la sortie nous indique que les données que nous voulons sont attachées comme propriétés, entre autres, au nœud HTML <div class="css-x6y88p-DivItemContainerV2 e19c29qe8">, en tant que propriété dans le chemin : __reactProps$xunlb5k9rwt | children | 1 | props.
Grâce à ces informations, nous savons maintenant exactement sur quel nœud — et à quel chemin — nous pouvons récupérer les données.
Le | est simplement un séparateur que j'ai choisi. Lorsque vous convertissez cela en script, remplacez-les par la notation par points comme ceci __reactProps$xunlb5k9rwt.children[1].props — ou par la notation entre crochets comme ceci ["__reactProps$xunlb5k9rwt"]["children"][1]["props"].
Comme indiqué dans le tutoriel React ailleurs dans ce dépôt, la partie __reactProps contient une chaîne de 10 caractères générée aléatoirement à chaque chargement de page.
Consultez le tutoriel pour un exemple fonctionnel de la façon d'extraire la clé dont vous avez besoin depuis l'un des nœuds HTML.
Ce que fait réellement le script, c'est descendre de quelques niveaux dans chaque propriété de la catégorie choisie (__reactFiber ou __reactProps) et tenter de convertir tout ce qui se trouve à l'intérieur en JSON (JSON.stringify()). Si les objets à l'intérieur contiennent des références circulaires (ce qui sera le cas pour beaucoup), ils ne peuvent pas être analysés comme JSON. Essayer de les convertir lèvera une erreur qui est interceptée, et la boucle l'ignorera simplement et continuera.
Le script ne s'intéresse également, pour l'instant, qu'aux propriétés des balises <div> et <article>. Si vous constatez qu'il manque quelque chose pour cette raison, merci de me le faire savoir. Ce projet est vraiment en cours de développement.
Le script ne descend pas non plus très profondément dans les propriétés. D'abord, je suis nul en récursivité. Ensuite, je ne suis pas très intéressé par ce qui est profondément imbriqué dans les propriétés, car construire des choses par-dessus risque davantage de casser en cas de modifications même mineures des plateformes que l'on pourrait cibler. D'après mon expérience, il devrait être possible de trouver les données à proximité du nœud HTML.
Ce script est uniquement à des fins éducatives. N'en abusez pas. Tenez-vous bien. Soyez gentil. Et n'enfreignez aucune loi.