Browser Server Communication

إيه هو الـ Browser-Server Communication

لما بنفتح متصفح زي Chrome أو Firefox وتكتب فيه موقع زي google.com، إنت بتبعت طلب (Request) من المتصفح بتاعك لسيرفر بعيد عشان يجيبلك الصفحة. السيرفر بيرد عليك بالبيانات (Response) اللي بتتحول لصفحة ويب تشوفها. التواصل ده بين المتصفح (Browser) والسيرفر (Server) اسمه Browser-Server Communication. ده زي مكالمة تليفون: إنت بتطلب حاجة، والطرف التاني بيرد عليك.

إزاي بيحصل الـ Browser-Server Communication؟

1. إنت بتبدأ بطلب (Request):

   • لما تكتب في المتصفح https://example.com، المتصفح بيبعت HTTP Request (أو HTTPS لو الموقع آمن) للسيرفر.
   • الـ Request ده بيكون فيه معلومات:
     • ءURL: العنوان اللي عايز تروحه (مثلًا /index.html).
     • ءMethod: نوع الطلب، زي GET (جيب بيانات) أو POST (ابعت بيانات، زي لما تملّي فورم).
     • ءHeaders: معلومات إضافية، زي نوع المتصفح (User-Agent)، أو الكوكيز (Cookies) اللي بتحدد هويتك.
     • ءBody ( وده يبكون في الـ POST بس): البيانات اللي بتبعتها، زي اسمك وباسووردك في فورم تسجيل دخول.

2. الـ DNS بيترجم العنوان:

   • المتصفح مش بيفهم example.com على طول، فبيروح يسأل DNS Server يقوله: “إيه الـ IP Address بتاع الموقع ده؟”.
   • الـ DNS بيرد بـ IP مثلا 93.184.216.34. ده بيحصل على Port 53 باستخدام DNS Protocol.
   • لو في ثغرة هنا، زي DNS Spoofing، بيكون فى امكانيه ان انت تتوجه لموقع مزيف!

3. المتصفح بيتوصل بالسيرفر:

   • دلوقتي المتصفح عنده الـ IP، فيبعت الـ Request للسيرفر على Port 80 (لو HTTP) أو Port 443 (لو HTTPS).
   • لو الموقع بيستخدم HTTPS، بيحصل TLS Handshake:
     • المتصفح والسيرفر بيتفقوا على Encryption Keys عشان البيانات تبقى مشفرة.
     • لو الـ TLS معمول إعداداته غلط (زي إصدار قديم مثلا )، فممكن يحصل اتاك Man-in-the-Middle والداتا تتسرق.

4. السيرفر بيستقبل الـ Request:

   • السيرفر بيفك الـ Request ويشوف إنت عايز إيه:
     • لو GET، بيجيب الصفحة (مثلًا ملف HTML).
     • لو POST، بيخزن البيانات (مثلًا تسجيل دخول أو تعليق).
   • السيرفر بيشتغل مع Backend (زي قاعدة بيانات Database أو تطبيق PHP) عشان يجهز الرد اللى هيتبعت.

5. السيرفر بيبعت الـ Response:

   • السيرفر بيرد بـ HTTP Response فيه:
     • الـ Status Code: زي 200 (تمام، الصفحة موجودة)، 404 (الصفحة مش لاقيها)، أو 500 (في مشكلة في السيرفر).
     • الـ Headers: معلومات زي نوع المحتوى (Content-Type، زي text/html) أو إعدادات الأمان (Content-Security-Policy).
     • الـ Body: البيانات الفعلية المطلوبه، زي كود HTML، CSS، أو JSON.

6. المتصفح بيعرض الصفحة:

   • المتصفح بياخد الـ Response ويحوله لصفحة تشوفها.
   • بيجيب ملفات إضافية زي Images أو JavaScript لو الموقع محتاجها (يعني بيبعت Requests تانية).