janhalendk/reactEin OSINT-Projekt, das untersucht, wie Daten aus React ausgelesen werden können.
Dieses Tool ist ein schnelles und einfaches Benutzerskript für Tampermonkey, das ein paar Ebenen tief in jede React-Seite eindringt und nach einem oder mehreren vom Benutzer bereitgestellten Begriffen sucht.
Das Tool erleichtert es, die richtige Stelle im DOM zu finden, an der React große Blöcke von JSON-Daten anhängt.
Diese Stellen manuell zu finden, kann sehr zeitaufwendig sein, da es stark vom Entwickler, von der React-Version und von der Komplexität der jeweiligen Website abhängt, wie die Daten gespeichert und weitergereicht werden.
Dieses Benutzerskript zielt darauf ab, diesen Prozess erheblich zu erleichtern.
Unten ist ein Video des Skripts in Aktion.
Weitere Hintergründe dazu, wie und warum das funktioniert, finden Sie im Tutorial zu diesem Thema an anderer Stelle in diesem Repository.
Kopieren Sie das Benutzerskript aus diesem Repository und befolgen Sie die Anweisungen in der Tampermonkey-Dokumentation zur Installation des Skripts.
Im Kern geht es darum, dass Sie Create a new userscript auswählen, den von Tampermonkey vorgeschlagenen Boilerplate-Code löschen, das Benutzerskript einfügen und speichern. Dann kann es auch schon losgehen.
Nach der Installation stellt das Benutzerskript ein Rechtsklick-Kontextmenü mit zwei Schaltflächen bereit, die auf allen Websites mit React aktiviert sein sollten (falls Sie eine finden, auf der das nicht der Fall ist, lassen Sie es mich bitte wissen):
reactPropsreactFiberDas ist unten zu sehen.
Die Schaltflächen sind nach zwei internen Eigenschaften benannt, die React an HTML-Knoten im regulären DOM anhängt. React verwendet diese, um Daten intern weiterzugeben, die Seite aufzubauen, den Zustand der Seite mit dem eigenen Virtual DOM (VDOM) synchron zu halten, auf Benutzeraktionen zu reagieren usw.
Über diese Eigenschaften können wir auch auf Rohdaten zugreifen und diese in großen Mengen ausgeben – und zwar massenhaft Daten, die sonst nicht im DOM exponiert sind.
Um das Tool zu verwenden, öffnen Sie einfach die JavaScript-Konsole in den Entwicklertools und wählen eine der beiden Optionen. Wenn eine keine Daten liefert, versuchen Sie die andere. Wie bereits erwähnt, scheint es stark von der jeweiligen Website abzuhängen, was funktioniert.
In diesem Beispiel suche ich nach Daten zu den TikTok-Videos des SANS Institute. Als Eingabe habe ich einen der Begriffe – four days – verwendet, der unter dem ersten der Videos zu finden ist:
Die Eingabe, die Sie dem Benutzerskript geben, wird vor dem Vergleich mit den an den HTML-Knoten hängenden Eigenschaften in Kleinbuchstaben umgewandelt und Leerzeichen werden entfernt. Geben Sie also einfach ein, was Sie möchten.
Wenn Sie möchten, können Sie auch mehrere Begriffe verwenden, trennen Sie diese einfach durch ein Komma. Wenn Sie im TikTok-Beispiel mehrere Videos anvisieren möchten, könnte das four days,congratulations,thank you sein.
Das Skript verwendet OR und nicht AND als Suchoperator.
Sie können auch einen Platzhalter * verwenden, der alles ausgibt.
Eine kleine Warnung dazu allerdings:
Eine *-Suche kann dazu führen, dass Ihre Entwicklertools abstürzen, weil dabei leicht Zehntausende von Datenzeilen ausgegeben werden können. Nutzen Sie diese Funktion also nur als letztes Mittel. Vor allem auf Facebook werden Sie dabei in Daten geradezu begraben.
Im Allgemeinen sind nützliche Dinge, nach denen man suchen kann, bestimmte Benutzernamen/Benutzer-IDs, von denen Sie wissen, dass sie vorhanden sein sollten – oder wenn Sie wissen, dass es irgendwo eine Eigenschaft namens videoData gibt, verwenden Sie einfach diese.
Wenn das Skript auf TikTok (reactProps) ausgelöst wird, wird eine Menge Daten in der JavaScript-Konsole protokolliert – und auch in Ihrer Zwischenablage. Unten sehen Sie einen Zähler, wie viele Treffer die Suchmuster ergeben haben (in diesem Fall 5).
Wenn Sie die JSON-Daten untersuchen möchten, fügen Sie sie einfach in einen Editor ein – idealerweise einen mit JSON- und Syntax-Hervorhebung. Das erleichtert die Durchsicht erheblich.
Die wirklich nützliche Funktion jedoch – wenn Sie planen, React-basierte Tools für eine bestimmte Website zu entwickeln – ist nicht der Zwischenablage-Dump. Neben der Ausgabe der Daten protokolliert das Skript auch sowohl den HTML-Knoten, der den Treffer geliefert hat, als auch den genauen Eigenschaftspfad, an dem der Treffer gefunden wurde.
Diese Funktion löst eine der größten Herausforderungen beim Versuch, Reacts VDOM auf das reguläre DOM abzubilden, mit dem wir – anders als mit dem VDOM – mit Vanilla-JavaScript interagieren können.
In diesem Fall sagt uns die Ausgabe, dass die gewünschten Daten als Eigenschaften unter anderem an den HTML-Knoten <div class="css-x6y88p-DivItemContainerV2 e19c29qe8"> angehängt sind, und zwar als Eigenschaft im Pfad: __reactProps$xunlb5k9rwt | children | 1 | props.
Mit diesem Wissen wissen wir nun genau, an welchem Knoten – und an welchem Pfad – wir die Daten abrufen können.
Das | ist nur ein von mir gewähltes Trennzeichen. Wenn Sie dies in ein Skript übertragen, ersetzen Sie es durch Punktnotation, etwa so __reactProps$xunlb5k9rwt.children[1].props – oder durch Klammernotation, etwa so ["__reactProps$xunlb5k9rwt"]["children"][1]["props"].
Wie im React-Tutorial an anderer Stelle in diesem Repository erwähnt, enthält der __reactProps-Teil eine 10 Zeichen lange Zeichenfolge, die bei jedem Laden der Seite zufällig generiert wird.
Im Tutorial finden Sie ein funktionierendes Beispiel, wie Sie den benötigten Schlüssel aus einem der HTML-Knoten ziehen können.
Was das Skript tatsächlich tut, ist, ein paar Ebenen tief in jede Eigenschaft der gewählten Kategorie (__reactFiber oder __reactProps) zu gehen und zu versuchen, alles darin in JSON zu konvertieren (JSON.stringify()). Wenn die Objekte darin zirkuläre Referenzen enthalten (was bei vielen der Fall sein wird), können sie nicht als JSON geparst werden. Der Konvertierungsversuch löst einen Fehler aus, der abgefangen wird, und die Schleife ignoriert dies einfach und fährt fort.
Das Skript betrachtet derzeit außerdem nur Eigenschaften für <div>- und <article>-Tags. Wenn Sie feststellen, dass es aus diesem Grund etwas übersieht, lassen Sie es mich bitte wissen. Dies ist ausdrücklich Work-in-Progress.
Das Skript geht außerdem nicht besonders tief in Eigenschaften hinein. Erstens bin ich nicht gut in Rekursion. Zweitens bin ich nicht besonders an Dingen interessiert, die tief in Eigenschaften verschachtelt sind, da darauf aufbauende Konstrukte wahrscheinlicher brechen, selbst bei kleinen Änderungen an den Plattformen, die man anvisieren könnte. Meiner Erfahrung nach sollte es möglich sein, die Daten nahe am HTML-Knoten zu finden.
Dieses Skript dient nur zu Bildungszwecken. Missbrauchen Sie es nicht. Verhalten Sie sich angemessen. Seien Sie nett. Und brechen Sie keine Gesetze.