janhalendk/reactA OSINT project that explores how to dump data from React
यह टूल Tampermonkey के लिए एक जल्दी-सा बना हुआ (quick and dirty) यूज़रस्क्रिप्ट है जो किसी भी React पेज में कुछ स्तरों तक गहराई से जाता है और उपयोगकर्ता द्वारा दिए गए एक या अधिक वाक्यांशों को खोजता है।
यह टूल DOM में उस सही जगह को ढूंढना आसान बनाता है जहाँ React JSON डेटा के बड़े हिस्से (chunks) संलग्न करता है।
इन स्थानों को मैन्युअल रूप से ढूंढना बहुत समय लेने वाला हो सकता है, क्योंकि डेटा कैसे संग्रहीत और पास किया जाता है यह डेवलपर, React के संस्करण और किसी विशेष साइट की जटिलता पर बहुत अधिक निर्भर करता है।
इस यूज़रस्क्रिप्ट का उद्देश्य इस प्रक्रिया को बहुत आसान बनाना है।
नीचे स्क्रिप्ट के उपयोग का एक वीडियो है।
इस कार्य के कैसे और क्यों के बारे में अधिक जानकारी के लिए इस रिपोज़िटरी में कहीं और मौजूद इसी विषय पर ट्यूटोरियल देखें।
इस रिपोज़िटरी से यूज़रस्क्रिप्ट कॉपी करें और स्क्रिप्ट को इंस्टॉल करने के तरीके के बारे में Tampermonkey docs में दिए निर्देशों का पालन करें।
इसका मूल सार यह है कि आप Create a new userscript चुनें, Tampermonkey द्वारा सुझाए गए किसी भी boilerplate को हटा दें, यूज़रस्क्रिप्ट चिपकाएँ और save दबाएँ। फिर आपका काम बन गया।
इंस्टॉल होने पर यूज़रस्क्रिप्ट एक राइट-क्लिक कॉन्टेक्स्ट मेनू प्रदान करता है जिसमें दो बटन होते हैं, जो React का उपयोग करने वाली सभी साइटों पर सक्षम होने चाहिए (यदि आपको ऐसी कोई साइट मिले जहाँ यह काम नहीं करता - तो कृपया मुझे बताएं):
reactPropsreactFiberइसे नीचे देखा जा सकता है।
बटनों का नाम दो आंतरिक गुणों के नाम पर रखा गया है जिन्हें React नियमित DOM में HTML नोड्स से जोड़ता है। React इनका उपयोग आंतरिक रूप से डेटा पास करने, पेज बनाने, पेज की स्थिति को अपने Virtual DOM (VDOM) के साथ सिंक में रखने, उपयोगकर्ता क्रियाओं पर प्रतिक्रिया करने आदि के लिए करता है।
इन्हीं गुणों के माध्यम से हम थोक में कच्चे डेटा तक पहुँच सकते हैं और डंप कर सकते हैं। साथ ही बहुत सारा डेटा जो अन्यथा DOM में उजागर नहीं होता है।
टूल का उपयोग करने के लिए बस डेवलपर्स टूल में JavaScript कंसोल खोलें और दो विकल्पों में से एक चुनें। यदि एक से कोई डेटा नहीं मिलता है - तो दूसरा आज़माएँ। जैसा कि कहा गया है - जो काम करता है वह विशिष्ट वेबसाइट पर अत्यधिक निर्भर करता है।
इस उदाहरण में मैं SANS Institutes के TikTok वीडियो पर डेटा ढूंढ रहा हूँ। इनपुट के रूप में मैंने पहले वीडियो के नीचे पाया गया एक वाक्यांश - four days - प्रदान किया:
आप यूज़रस्क्रिप्ट को जो इनपुट देते हैं, उसे HTML नोड्स पर गुणों के रूप में संलग्न सामग्री से तुलना करने से पहले lowercase किया जाता है और white spaces हटाए जाते हैं, इसलिए आप जो चाहें टाइप करें, सच में।
यदि आप चाहें, तो आप कई वाक्यांशों का भी उपयोग कर सकते हैं, बस उन्हें अल्पविराम से अलग करें। यदि आप TikTok उदाहरण में कई वीडियो को लक्षित करना चाहते हैं, तो वह four days,congratulations,thank you हो सकता है।
स्क्रिप्ट खोज ऑपरेटर के रूप में AND नहीं बल्कि OR का उपयोग करती है।
आप वाइल्डकार्ड * का भी उपयोग कर सकते हैं, जो सब कुछ डंप कर देगा।
फिर भी उसके खिलाफ एक छोटी सी चेतावनी:
* खोज करने से आपके डेवलपर टूल क्रैश हो सकते हैं, क्योंकि इससे आसानी से हजारों पंक्तियों का डेटा डंप हो सकता है। इसलिए उस सुविधा का उपयोग केवल अंतिम विकल्प के रूप में करें। खासकर Facebook पर ऐसा करने पर आप डेटा में दब जाएँगे।
सामान्य तौर पर खोजने के लिए उपयोगी चीजें कुछ उपयोगकर्ता नाम / उपयोगकर्ता आईडी हो सकती हैं, जिनके बारे में आप जानते हैं कि मौजूद होनी चाहिए - या यदि आप जानते हैं कि वहाँ कहीं videoData नाम की कोई प्रॉपर्टी है, तो बस उसका उपयोग करें।
TikTok पर स्क्रिप्ट चलाने पर (reactProps) JavaScript कंसोल में - और आपके क्लिपबोर्ड पर भी - बहुत सारा डेटा लॉग हो रहा है। नीचे आपको दिखाई देगा कि खोज पैटर्न ने कितने हिट दिए (इस मामले में 5)।
यदि आप JSON-डेटा का पता लगाना चाहते हैं, तो इसे किसी एडिटर में पेस्ट करें - अधिमानतः ऐसा एडिटर जो JSON और सिंटैक्स हाइलाइटिंग का समर्थन करता हो। इससे इसे देखना बहुत आसान हो जाता है।
हालाँकि, वास्तव में अच्छी विशेषता - यदि आप विशिष्ट वेबसाइट के लिए React आधारित टूल बनाने की योजना बना रहे हैं - क्लिपबोर्ड डंप नहीं है। डेटा डंप करने के अलावा स्क्रिप्ट उस HTML नोड को भी लॉग करती है जिसने मैच दिया, और सटीक प्रॉपर्टी पथ जहाँ मैच मिला था।
यह सुविधा React के VDOM को नियमित DOM के साथ मैप करने के वास्तविक झंझटों में से एक को हल करती है, जिसके साथ हम - VDOM के विपरीत - वेनिला JavaScript का उपयोग करके इंटरैक्ट कर सकते हैं।
इस मामले में आउटपुट हमें बताता है कि हमें जो डेटा चाहिए वह अन्य चीजों के अलावा HTML नोड <div class="css-x6y88p-DivItemContainerV2 e19c29qe8"> से पथ __reactProps$xunlb5k9rwt | children | 1 | props में एक प्रॉपर्टी के रूप में जुड़ा हुआ है।
इस जानकारी के होने का मतलब है कि अब हम ठीक-ठीक जानते हैं कि किस नोड से - और किस पथ पर - हम डेटा प्राप्त कर सकते हैं।
| केवल एक विभाजक है जिसे मैंने चुना है। इसे स्क्रिप्ट में परिवर्तित करते समय उन्हें डॉट नोटेशन से बदलें जैसे __reactProps$xunlb5k9rwt.children[1].props - या स्क्वायर ब्रैकेट नोटेशन जैसे ["__reactProps$xunlb5k9rwt"]["children"][1]["props"]।
जैसा कि इस रिपोज़िटरी में कहीं और React ट्यूटोरियल में उल्लेख किया गया है, __reactProps भाग में 10 अक्षरों की एक स्ट्रिंग होती है जो प्रत्येक पेज लोड पर यादृच्छिक रूप से उत्पन्न होती है।
किसी HTML नोड से अपनी ज़रूरत की कुंजी निकालने के एक कार्यशील उदाहरण के लिए ट्यूटोरियल देखें।
स्क्रिप्ट वास्तव में यह करती है कि चुनी गई श्रेणी (__reactFiber या __reactProps) की प्रत्येक प्रॉपर्टी में कुछ स्तरों तक गहराई से जाती है और अंदर की हर चीज़ को JSON (JSON.stringify()) में बदलने का प्रयास करती है। यदि अंदर के ऑब्जेक्ट में सर्कुलर रेफरेंस हैं (जो कई में होंगे) तो इसे JSON के रूप में पार्स नहीं किया जा सकता। इसे बदलने का प्रयास करने पर एक एरर उत्पन्न होगा जिसे पकड़ लिया जाता है और लूप इसे अनदेखा करके आगे बढ़ जाता है।
स्क्रिप्ट इस समय केवल <div> और <article> टैग्स के गुणों को देखती है। यदि आप पाते हैं कि इस कारण से यह कुछ छोड़ देती है, तो कृपया मुझे बताएं। यह अभी बहुत हद तक कार्य प्रगति पर (work in progress) है।
स्क्रिप्ट गुणों में बहुत गहराई तक रिकर्स भी नहीं करती है। पहली बात, मैं रिकर्सन में अच्छा नहीं हूँ। दूसरी बात, मुझे गुणों में गहराई से नेस्टेड चीजों में उतनी दिलचस्पी नहीं है, क्योंकि उसके ऊपर चीजें बनाने पर लक्षित प्लेटफार्मों में मामूली बदलावों से भी टूटने की अधिक संभावना होती है। मेरे अनुभव के अनुसार HTML नोड के करीब डेटा खोजना संभव होना चाहिए।
यह स्क्रिप्ट केवल शैक्षिक उद्देश्यों के लिए है। इसका दुरुपयोग न करें। अच्छा व्यवहार करें। विनम्र रहें। और कोई कानून न तोड़ें।