لو متعرفش POP Cat فهو موقع عليه صورة قطة وقرر اصحاب الموقع انهم يخلقوا شكل منافسة بين مواطنين العالم على مين اكتر دولة هتعرف تدوس اكتر عدد مرات على القطة سواء بmouse clicks، او بضغطات على زراير في الكي بورد.
الموقع انتشر وبقى فيه منافسة شغالة كدة والحوار ابتدى ينتشر في مصر على تويتر تحديدا والناس ابتدت تحاول توجد طرق لتزويد العدد ده باكبر قدر. تقدر تكون طرف في الخناقة بانك تزور موقع popcat.click وتبتدي تلعب وتشوف الاحصائيات والارقام وهي بتتغير.
المهم انا حبيت نستغل الموقف ده في اني اشارك ال thought process بتاعتي، وازاي ممكن نعمل حاجة تدينا اكبر عدد من الضغطات من غير ما نخبط في ال rate limit. لو عاوز فيديو خفيف يعرفك عن اللي بيحصل مع اسرع هاك ممكن تعمله ليها ممكن تشوف الفيديوهين بتوع يوسف هنا:
وانا باحاول افهم حاجة شغالة ازاي، باحاول دايما ابتدي من الاخر وامشي معاها للبداية لحد ما نفهم هي جت منين، في نفس الوقت بييجي لحظات كدة تحس ان بيجيلك حدس انك تنط حاجة وتتوقع وتمشي وراها، ده برضة بيكون مفيد، بس لازم نكون حاطينله وقت ولو معرفناش نوصل لنتيجة، ناخد بعضنا ونرجع تاني
المهم خلينا نبتدي من الاخر، احنا عارفين ان فيه ريكويست بيطلع من الموقع للباك ايند بيقوله عدد الضغطات، فتعالى نبتدي من هناك وندور عليه، طبعا هنفتح ال Dev Tools ونشوف اي حاجة في الrequest body بتاعها شايل عدد الضغطات اللي اتعملت
الخطوة الجاية اننا محتاجين نفهم الريكويست ده بيتكون ازاي في الكود، وايه الشروط اللي بتتحط عليه، والاهم من ده كله الرقم اللي بيتبعت ده متسجل فين والريكويست ده بيتبعت كل اد ايه. المهم بنحاول ندور على علامة مميزة في الريكويست ده ناخدها ونروح ندور بيها جوا الملف،
احيانا العلامات بتكون مش مميزة اوي ومتعبة، لو ده حصل بنروح نجيب علامة تانية ونجرب تاني.
العلامة دي عبارة عن string نقدر نعمل بيه بحث جوا ملفات الجافاسكريبت بحيث انها تقربنا من الاماكن اللي بندور عليها، انا هاختار هنا كلمة pop_count. وانا اخترت الكلمة دي لاسباب كتير،
العلامة دي عبارة عن string نقدر نعمل بيه بحث جوا ملفات الجافاسكريبت بحيث انها تقربنا من الاماكن اللي بندور عليها، انا هاختار هنا كلمة pop_count. وانا اخترت الكلمة دي لاسباب كتير،
اولها انها الباراميتر اللي احنا مهتمين بيه في الريكويست، ثانيا اسمها مميز جدا انها معمولة ب snake_case فغالبا مش هتتلخبط وسط ال java script اللي المفروض الناس بتكتبها camelCase.
طبعا الديفلوبر ممكن يكون مخالف ده، ولكن هي بداية كويسة ونبتدي نتحرك منها ونتعرف اكتر على الديفلوبر
طبعا الديفلوبر ممكن يكون مخالف ده، ولكن هي بداية كويسة ونبتدي نتحرك منها ونتعرف اكتر على الديفلوبر
بنروح نفتح ال source وبنفتح ملف الجافا سكريت اللي باسم app وبنعمله prettify عشان نعرف نقراه ونتحرك جواه.
المهم بعد ال pretty-print بنقدر نشوف الملف ومعموله indentation كويسة تخلينا نقدر نتفرج على محتوياته ونحاول نفهم اللوجيك بتاعه مكتوب ازاي وبيحاول ينفذ ايه.
المهم لما بنعمل سيرش عن الماركر بتاعنا بنلاقيه موجود ٣ مرات بس، اول مرتين واضح انه مستخدم في حاجة ليها علاقة بال state management بس انا لسه مش فاهم شغال ازاي، انما قادر اشوف ده من انه بيكتب ويقرا في نفس المكان this.counter
المكان التالت هو اللي احنا بندور عليه، ده POST request زي اللي احنا بندور عليه بالظبط، وفيه واضح قيمة الباراميتر جايه منين.
t.accumulator > 800 ? 800 : t.accumulator سطر الكود ده اول حاجة حقيقية بندور عليها، واضح ان فيه حد اقصى للريكويست هنا بيقول انه ٨٠٠
t.accumulator > 800 ? 800 : t.accumulator سطر الكود ده اول حاجة حقيقية بندور عليها، واضح ان فيه حد اقصى للريكويست هنا بيقول انه ٨٠٠
المهم باقي الكود، في ال then بنلاقي ابتدى يظهر كلام ليه علاقة بالmax_pops و ال bot. بنحاول ندقق اكتر ونمشي مع الكود بنلاقي ان القرار بتاع انه يعتبر السيشن دي بتاعة bot مرتبط بعدد ال sequential_max_pops
لو وصل لاكتر من ١٠ مرات، اللي هو اصلا بيتزود واحد مع كل مرة ال accumlator اكبر من او يساوي ٨٠٠. اللي هو الحد الاقصى اللي لقيناه قبل كده.
برضة بناخد بالنا ان هنا ظهر تاني الfunction اللي اسمها u وبنلاقي انها برضة شكلها بتاخد key و value و معلومة تالتة لسه مش عارفينها اللي هو بيخلينا متأكدين اكتر من الافتراض السابق.
وكمان ال token واضح انه بيتعمله update مع كل ريكويست ودي حاجة لو حبينا نعمل headless-bot.
وكمان ال token واضح انه بيتعمله update مع كل ريكويست ودي حاجة لو حبينا نعمل headless-bot.
المهم دلوقتي احنا فهمنا الريكويست ده بيتكون ازاي عاوزين نعرف مين بيبعته، فبنحاول نطلع فوق شوية في الكود لحد ما نلاقي اسم ال function اللي بتبعت الريكويست sendStats. دلوقتي المفروض نبتدي ندور على مين بيناديها وبيناديها امتى وكل اد ايه.
بنلاقيها وبنبتدي نفهم هي شغالة ازاي، بنلاقي ان فيه صوت بيتلعب، و العداد بيزيد واحد و ال accumlator بيزيد واحد برضة. وبعدها بنلاقي ال function اللي احنا شاكين فيها من الاول بتسجل ال state و بعدها بنلاقي sendStats متنادية وبعدها محطوطة في setInterval كل ٣٠ ثانية.
واضح كده ان ده ال event handler بتاعنا، كل الحاجات اللي ليها علاقة بايه المفروض يحصل لما ندوس على اي زرار هنا، واديتنا معلومة زيادة وهي ان الريكويست بيطلع كل ٣٠ ثانية، طبعا الدنيا مش واضحة، يعني فيه this.interval موجودة ومش عارف هي بتعمل ايه بس اكيد ليها علاقة بال debounce logic.
بس الاكيد ان دلوقتي عرفنا المعلومات دي:
1. عدد الضغطات في الريكويست بحد اقصى ٨٠٠
2. كل ريكويست ب ٨٠٠ او اكتر، بيزودلك عدة في ال bot detection
3. لما بتكمل ١٠ عدات الابليكيشن بيعتبرك bot
4. الريكويست بيطلع كل ٣٠ ثانية
1. عدد الضغطات في الريكويست بحد اقصى ٨٠٠
2. كل ريكويست ب ٨٠٠ او اكتر، بيزودلك عدة في ال bot detection
3. لما بتكمل ١٠ عدات الابليكيشن بيعتبرك bot
4. الريكويست بيطلع كل ٣٠ ثانية
وبالتالي من الذكاء اننا نتفادى الموضوع ده باننا نطلع ريكويست كل ٣٠ث ب٧٩٩ ضغطة، وده يكون الحد الاقصى اللي نعمله من غير ما القطة تقفش علينا وتطلع عينيها الحمرا.
طيب ازاي هنعمل ده؟
اسرع حل هو اننا نعمل for loop تطلع الايفنت بتاع ضغطة الماوس ٧٩٩ مرة كل ٣٠ ثانية
طيب ازاي هنعمل ده؟
اسرع حل هو اننا نعمل for loop تطلع الايفنت بتاع ضغطة الماوس ٧٩٩ مرة كل ٣٠ ثانية
بس دلوقتي احنا محتاجين نعرف ال event ده موجود فين، فنعمل نفس اللي عملناه قبل كده، ندور على مين بينادي الفانكشن اللي لقيناها دي
فبنلاقي الفانكشن بتتنادى من ايفنت keydown مثلا، فخلاص بنكتب كود سريع يناديها زي ماحنا عاوزين.
في حلول تانية كتير ممكن نلعب بيها، زي مثلا انك تحط debugger عند الريكويست وتبتدي تاخد reference من الاوبجت اللي اسمه t عن طريق حاجة زي window.t = t
وساعتها انت مش محتاج تعمل الايفنت اصلا، انت محتاج تعمل interval بيحافظ على t.accumlator دايما عند رقم ٧٩٩ وممكن تلعب العاب كتير.
وساعتها انت مش محتاج تعمل الايفنت اصلا، انت محتاج تعمل interval بيحافظ على t.accumlator دايما عند رقم ٧٩٩ وممكن تلعب العاب كتير.
برضة لو مشيت شوية ورا الفانكشن بتاعة uهتلاقي انها بتحتفظ بالقيم دي في الكوكيز.
برضة لازم تبقى عارف ان فيه مداخل تانية كتير، يعني لو انت مش عاوز تستخدم الريكويست كمدخل، ممكن تعمل زي ما @usfngm عمل في الفيديو وابتدى من الايفنت، المهم انت محتاج تلاقي entrypoint وتمشي وراها.
برضة لازم تبقى عارف ان فيه مداخل تانية كتير، يعني لو انت مش عاوز تستخدم الريكويست كمدخل، ممكن تعمل زي ما @usfngm عمل في الفيديو وابتدى من الايفنت، المهم انت محتاج تلاقي entrypoint وتمشي وراها.
لحد هنا وانا هاقفل الكلام ولكن في حاجات كتير ممكن تكمل فيها وتستكشفها في الابليكيشن ده، حاول تشوف ازاي ممكن تكتب سكريبت مثلا يبعت الريكويستات دي من غير ما يكون فاتح الويبسايت وازاي بيغير التوكينز وهكذا.
مهارة ال reverse engineering دي باشوفها من اهم المهارات اللي ممكن تساعدك في ال debugging في شغلك اليومي، بتعلمك ازاي تستكشف الكود اللي قدامك، وازاي تنظم تفكيرك ويكون عندك طريقة منهجية في انك توصل لنتيجة ازاي حاجة شغالة وايه العوامل اللي بتأثر فيها والشخص اللي عملها كان بيفكر ازاي
طبعا ال reverse engineering اكبر من كده بمراحل واكثر تعقيدا ولكن خلينا نقول ان دي بداية حلوة ممكن نبتدي منها ونحاول نطور ونبني عليها في اللي يفيد شغلنا اليومي. Happy Hacking!
جاري تحميل الاقتراحات...