





السمعة:
- إنضم17 يونيو 2023
- المشاركات 497
- الحلول 10
- مستوى التفاعل 1,078
- النقاط 93
1. عرض المصدر ( View Source )
2. المفتش ( Inspector )
3. مصحح الأخطاء ( Debugger )
4. الشبكة ( Network )
عرض المصدر ( View Source )
كيفية مشاهدة مصدر صفحة الويب على الإنترنت والمعلومات المفيدة التي يمكن العثور عليها من خلال ذلك.
- مصدر الصفحة: هو الكود الذي يمكن قراءته بواسطة الإنسان والذي يتم إرجاعه إلى متصفحنا .الكود يككون عباره عن لغه ال HTML و CSS و JavaScript
- كيفية مشاهدة مصدر الصفحة: يمكنك ببساطة النقر بزر الماوس الأيمن على الصفحة واختيار “عرض مصدر الصفحة” أو يمكن الظغط على CTRL + U يمكن اظهاره بشكل اسرع.
- الكود والتعليقات: يمكن العثور على تعليقات في الصفحة توضح أشياء في الكود أو ملاحظات للمطورين. تبدأ التعليقات بـ “
<!--
” وتنتهي بـ “-->
”. يمكن أن تحتوي هذه التعليقات على معلومات مفيدة. - الروابط: الروابط إلى صفحات أخرى مكتوبة باستخدام عناصر HTML تسمى “anchor tags”. يمكن العثور على روابط الصفحات في الكود وعناوينها مخزنة في سمة “href”.
- الملفات الخارجية: يمكن تضمين ملفات خارجية مثل CSS وJavaScript والصور في الكود. في بعض الأحيان يمكن العثور على معلومات خاصة في هذه الملفات.
- الأطار والإصدارات: يمكن معرفة إذا كان الموقع يستخدم إطار عمل وما هي إصداراته. هذه المعلومات يمكن أن تكون مفيدة لاكتشاف ثغرات أمان وتحديث الموقع.
حل اسئله
نجد في سطر 2 اعطاني صفحه خارجيه /new-home-beta بعد فتحهاما هو العلم من تعليق HTML ؟
THM{HTML_COMMENTS_ARE_DANGEROUS}
نجد في سطر 41 يوجد به رابط صفحه اسمه /secret-pageما هو العلم من الرابط السري؟
THM{NOT_A_SECRET_ANYMORE}
نجد في اكثر من سطر يوجد ملفات وصور في صفحه assets بعد فتحها نجدما هي علامة قائمة الدليل؟
THM{INVALID_DIRECTORY_PERMISSIONS}
ما هو العلم الـ framework ؟
THM{KEEP_YOUR_SOFTWARE_UPDATED}
نجد في سطر 51 يوجد رابط بخصوص ال Framework بعد فتحه
نذهب للسورس كود
نقوم بتنزيل الملف عن طريق نظام كالي بالامر التالي
wget http://10.10.234.10/tmp.zip
ثم نفك الضغط ونقرأ ما بداخل المستند

المفتش ( Inspector )
أدوات المطور:
هي أدوات موجودة في كل المتصفحات الحديثة ,هاي الادوات بتساعد مبرمجي الويب على إصلاح مشاكل المواقع وفهم طريقة عملها.
الـInspector بيساعدك تشوف الصفحة اللي بتشوفها على المتصفح وتعرف تفاصيل دقيقة عنها. وممكن تعدل فيها وتجرب اشياء على الصفحة.
مثلاً، لو دخلت على موقع مثلا ورحت لقسم الأخبار، مثلا لقيت في خبر محجوب ومكتوب إنك لازم تكون زبون خاص عشان تشوفه. هاد اسمه “paywall”، وهو عبارة عن جدار افتراضي بيمنعك من دخول الصفحة إلا لو دفعت فلوس.
لو بدك تخترق الجدار هاد، اضغط بزر الفأرة الأيمن على الإعلان واختار “Inspect”. بفتحلك نافذة فيها معلومات عن الصفحة والعناصر اللي عليها. ابحث عن كلمة مثل “premium-customer-blocker” واضغط عليها. بتشوف تفاصيل كتير زي الألوان والمسافات، واللي هما بيسموها “CSS styles”. الأهم بالنسبة النا هو السطر اللي مكتوب فيه “display: block”. لو انت اضغطت عليه بتقدر تغيره لأي قيمة بتحبها. جرب تكتب “none” عشان تخلي الإعلان يختفي وتشوف الخبر.
استخدم الـInspector وجرب، وافهم إن التغييرات اللي بتعملها هاي بتكون فقط على متصفحك ومش هتأثر على الموقع الأصلي. ولما تعمل refresh للصفحة بترجع كما كانت.
طرق فتح ادوات المطور في المتصفحات
تجربه كيف يمكن نخترق جدار paywall
نجد بالسطر الذي تحت المؤشر عليه يوجد premium-customer-blocker
يمكن بسهوله الظغط على اخفاء او يمكن حذفها

تظهر الصفحه

مصحح الأخطاء ( Debugger )
القسم هاد في Developer Tools بنستخدمه عشان نصلح ونفهم الأخطاء في الجافا سكريبت على موقع الويب. فيه خاصية اسمها Debugger (أو Sources في جوجل كروم)، وهاي شغله مفيدة جدا لمطوري المواقع اللي بدهم يعرفوا اذا في شغله مش شغالة.
مثلا على موقع دعم Acme IT، لو كبست على صفحة الاتصال، هتلاقي إن فيه مربع احمر بظهر بسرعة كل مرة بحمل الصفحة. الشغله اللي بنعملها راح نستخدم الDebugger عشان نعرف ليه المربع او المستطيل الاحمر بظهر ولو فيه فيه اشي مهم يعني نص …
في كل متصفح، هتلاقي على الجهة اليسرى قائمة فيها كل الملفات والموارد اللي الصفحة بتستخدمها. بعد الضغط على اتصل بنا بعدها روح لمجلد assets راح تلاقي ملف اسمه “flash.min.js”. لما تفتحه، راح تشوف الجافا سكريبت اللي جواه.
بس نقدر نعيد بعض التنسيق باستخدام خيار “Pretty Print” اللي بظهر زي معاكسين فتحتين “{}”. بس برضه بسبب التعقيد ممكن يبقى صعب نفهم الكود.
بتلاقيها تحت

في النهاية، الجزء الصغير هاد من الجافا سكريبت هو اللي بيشيل المستطيل الاحمر من الصفحة، وهاد بيمكننا نعمل Breakpoint عليه، يعني نقطة في الكود نقدر نوقف فيها تنفيذ الجافا سكريبت ونشوف الأشياء ببطء.
لما نعمل Breakpoint ونحمل الصفحة هتشوف إن المستطيل الاحمر ما بختفي .
كيف تعمل الـBreakpoint هعن طريق الظغط على سطر FLASH على اشاره الناقص -


ويظهر المستطيل

الشبكة ( Network )
هاي شغله في البرمجة بتساعدك تشوف كل الاشياء اللي الموقع بيتصل فيها من برا. لما تفتح الشاشة هاي وتعيد تحميل الصفحة، هتلاقي كل الاشياء اللي الموقع بيطلبها.
جرب تعمل هيك على صفحة اتصل بنا .
ومع الشاشة هاي المفتوحة، جرب تعبي استمارة الاتصال وتضغط على زر “أرسل رسالة”. سوف تلاحظ شغله في الشاشة هناك، هاي الاستمارة بتنرسل في الخلفية باستخدام شغله اسمها . “AJAX”: هي طريقة لإرسال واستقبال البيانات على الإنترنت في موقع ويب بدون ما تتدخل وتغير الصفحة.
كما بالصوره يظهر سطر contact-msg
عند الضغط عليه يظهر الحل

المرفقات
التعديل الأخير: