المقدمة

في عالم الإنترنت، كل حاجة بتتم على الويب بتعتمد على تفاعل بين المتصفح والسيرفر، والعملية دي بتبدأ بمجرد ما المستخدم يكتب عنوان الـ URL في المتصفح او يضغط علي لينك لموقع معين، وبتنتهي لما محتوي الموقع يظهر قدامه على الشاشة، في المقال ده هنتكلم عن الخطوات اللي بيمر بيها المتصفح والسيرفر لحد ما يظهر محتوي الموقع للمستخدم.


ال navigation هو أول خطوة بنعملها علشان نعرض صفحة الويب ودا بيتم عن طريق اما الضغط علي لينك او من خلال كتابة رابط الموقع في ال search bar مباشرة.


DNS Lookup

تاني خطوة وهي ال DNS Lookup، كلمة DNS هي اختصار لـ Domain Name System، ودي ببساطة الخدمة اللي بتخلّي المتصفح يعرف عنوان ال Host  الي متخزن عليه ال resource بتاعت الموقع الي بندور عليه، فـ دور الـ DNS هنا هو إنه يحوّل اسم الموقع اللي بتكتبه في المتصفح زي google.com  او eqraatech.com إلى عنوان IP  زي  93.184.216.34 علشان المتصفح يعرف يروح للسيرفر الصح ويطلب منه الصفحة او ال Resources الي محتاجها علشان يعرض الموقع.

DNS Lookup
DNS Lookup

بعد ما ال DNS system بيحول الDomain ل IP address  بيبدأ ال browser يخزن ال IP address عنده في ال الكاش علشان في المرات القادمة يتستدعيه من ال Cache مباشرة بدون مايحتاج يبعت ل ال DNS systems مرة تانية، علي سبيل المثال متصفح زي chrome بيخزن ال ال cached DNS في ال path التالي .

chrome://net-internals/#dns

DNS Lookup
DNS Lookup


TCP Handshake

بعد ما المتصفح عرف عنوان الـ IP الخاص بالسيرفر، بيبدأ يعمل اتصال معاه عن طريق ال TCP 3-way Handshake، وده زي اتفاق مبدئي بين المتصفح و السيرفر علشان يجهّزوا للاتصال.

TCP Handshake
TCP Handshake

وبيتم علي 3 خطوات:

  1. المتصفح بيبعت للسيرفر: "اريد التواصل معك" (SYN).
  2. السيرفر بيرد: "مستعد للتواصل" (SYN-ACK).
  3. المتصفح بيأكد: "فلنبدأ الاتصال" (ACK).

بعد الخطوات دي، الاتصال بيبقى جاهز لنقل البيانات، سواء كانت على HTTP أو HTTPS .


TLS Handshake

بعد ماعرفنا ال IP  الخاص بال server الي موجود عليه ال resources بتاعة الموقع  واسسنا ال connection  مع ال server بيجي دول ال security وهو تأمين البيانات الي هيتم نقلها من ال server للمتصفح والعكس، ودي عن طريق ال TLS ودي اختصار ل  Transport Layer Security والخطوة دي بتم في حالة انه الموقع بيستخدم بروتوكول HTTPS مش ال HTTP وبيتم عن طريق الخطوات التالية.

TLS Handshake
TLS Handshake

 1. رسالة "Hello" من الـ browser  تسمي ال (Client Hello)

يبدأ ال  browser ال handshake بإرسال رسالة إلى ال server .الرسالة بتحتوي على:

  • إصدار TLS الي ال browser بيدعمه .
  • نوع التشفير (Cipher Suites) الي بيدعما ال browser .
  • مجموعة عشوائية من ال Bytes تُسمى Client Random Bytes.

 2. رد ال Server برسالة تسمي ال  (Server Hello) 

ال Server بيرد برسالة بتحتوي على:

  • شهادة SSL الخاصة بالموقع (SSL Certificate).
  • مجموعة التشفير الي ال server اختارها ومناسبة للمتصفح (Cipher Suites).
  • سلسلة عشوائية من Bytes تُسمى Server Random Bytes.

 3. التحقق من الهوية (Authentication) و إنشاء ال Parameter Secret

بيبدا ال متصفح يتأكد من أن الشهادة:

  • مش منتهية الصلاحية.
  • صادرة من Certificate Authority موثوقة  (المتصفح بيكون عنده قائمة جهات موثوقة  built-in وبيقارنها ب ال Certificate Authority بتاعت ال server).
  • بتأكد ال browser ان ال Domain Name في شهادة ال SSL هو نفسه ال Domain name الي بيتعامل معاه .
💡
ملحوظة: الـ Certificate Authority بتمثل الجهة اللي أصدرت الشهادة وممكن كل موقع ينشئ الشهادة الخاصة بيه وبتكون في الحالة Self Signed (يعني تم إنشاءها بشكل شخصي بدون الـ Certificate Authority) بس في الحالة دي المتصف لما بيروح يتأكد من الـ Certificate Authority بيلاقيها Self Signed وبالتالي بيعتبرها غير موثوقة.

ويبدأ بعد كده المتصفح يُنشئ سلسلة عشوائية ال Bytes  تُسمى Parameter Secret وبيقوم بتشفيرها باستخدام ال Public Key الموجود في شهادة SSL الخاصة ب ال  Server  ويتم إرسال Premaster Secret للسرفر مرة تانيه بعد ما تم تشفيرة.


 4. إنشاء ال Session Keys

ال server بيستقبل ال Parameter Secret  بعد ما تم تشفيرة من خلال ال browser  وبيتم فك الشفرة باستخدام ال Private key الي بيكون مع الشهاده وبيكون موجود بس علي ال server، ويبدأ  كل  من المتصفح وال server بإنشاء ال (Session Keys) الي هيتم استخدمه بعد كده لتشفير البيانات عن طريق ال symmetric Encryption، وبيتم انشاء ال Session key باستخدام 3 عناصر هم ال  Client Random (الي تم إنشاؤه في الخطوة رقم 1) و  Server Random   (الي تم إنشاؤه في الخطوة رقم 2 ) و Parameter Secret الي تم إنشاؤه في الخطوة رقم 3  وبكدا بيكون موجود عند ال Client وال Server نفس ال Session Key واللي هيُستخدم بعد كده في تشفير البيانات بين ال server وال browser  .


 5. Browser is Ready 

بيبدأ بعد كده المتصفح يبعت رساله "finished" بعد ما بيتم تشفيرها بواسطة ال Session Key .


 6. Server is Ready

بيستقبل ال server الرسالة من ال browser و بيعملها decrypt، وبيرد علي ال browser بنفس الرساله  "finish" بعد ما بيتم تشفيرها بال Session Key .

 7. Start symmetric Encryption 

اخيرا بيستقبل ال ال browser الرسالة وبيبدأ ال symmetric Encryption .


Server Response

بعد ما يتم إنشاء الاتصال الآمن من خلال ال  (TCP) و (TLS) بين ال browser وال server ، بيبدأ المتصفح بإرسال أول طلب HTTP GET نيابة عن المستخدم، غالبًا بيكون الطلب ده خاص بملف HTML الأساسي للموقع،  و بيبدأ ال Server يرسل الفايل في شكل segments وكل segment عبارة عن chunks of  bytes باستخدام بروتوكول ال TCP الي بيضمن وصول البيانات دي للطرف التاني بنفس الترتيب الي تم ارسالها به، وبتظهر هنا مشكلة وهي ان ال server هيبعت البيانات دي باي سرعة وهو مش عارف ال bandwidth الي عند ال user تقدر تتحمل قد اي وهنا بيجي دور algorithm اسمه TCP Slow Start .


كيف تعمل خوارزمية TCP Slow Start ؟

بيبدأ ال Server يرسل حجم بيانات صغير جدا عادة 14 كيلوبايت، وبيزوده تدريجيًا للضعف مع كل تأكيد استلام (ACK) يوصل من ال browser للسيرفر، لحد ما يوصل لأقصى سرعة تتحملها شبكة ال Client، ولو السرفر مستملش ال ACK من ال browser بيقلل حجم البيانات دي للنصف وبيرسلها مرة تاني، وبيتم التحكم في كمية البيانات المرسلة عن طريق ال Congestion Window أو CWND، ومن هنا بنلاحظ انه يُفترض انه مكونات صفحة ال HTML الأساسية الي محتاجها تظهر ل ال user الي في الاغلب بتكون ال Above  the Fold  تكون أقل من او تساوي ال 14  KB  علشان نضمن ظهور المحتوى الأساسي للمستخدم في أقل وقت ممكن ودا لان المتصفح بيبدأ يعمل parsing مع استلام أول Byte من ال server  . 


في الختام

بكده نكون خلصنا الرحلة اللي بتمر بيها البيانات من لحظة ما المستخدم يكتب رابط الموقع في المتصفح لحد ما المحتوى يظهر قدامه، من أول الـ DNS Lookup، مرورا ب الـ TCP و TLS Handshakes، ووصولًا لاستلام البيانات من خلال ال browser بشكل آمن، والي اللقاء في مقال آخر و دمتم سالمين.