في هذا الدرس 11تصفّح المواضيع
عندما يرسل خادم سلسلة من البايتات الخام عبر الشبكة، لا يستطيع المتصفح أو تطبيق العميل معرفة ما إذا كانت هذه البايتات تمثل صفحة أم ملف تنسيق أم بيانات أم صورة إلا إذا صرّحت الرسالة بنوع محتواها بشكل قاطع. وهنا يأتي دور أنواع الوسائط () التي توفر معياراً عالمياً موحداً يُرسل داخل حقل الرأس لإخبار الطرف المستقبل بكيفية تفسير البيانات ومعالجتها بأمان.
قبل الغوص في التفاصيل الهندسية، استعرض جدول المصطلحات التقنية الأساسية لهذا الدرس:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى الهندسي المبسط |
|---|---|---|---|
| نوع الوسائط | مايم تايب / ميديا تايب | معرف قياسي من جزأين يحدد طبيعة وتنسيق البيانات المنقولة في رسالة HTTP مثل text/html أو application/json. | |
| حقل نوع المحتوى | كونتنت تايب هيدر | حقل في رأس الرسالة يعلن عن نوع الوسائط الفعلي لجسم الرسالة المرسلة في الطلب أو الاستجابة. | |
| ترميز المحارف | تشارسيت باراميتر | معامل إضافي مثل charset=utf-8 يحدد جدول تحويل البايتات الثنائية إلى حروف نصية مقروءة. | |
| فاصل الأجزاء المتعددة | مالتي بارت باوندري | سلسلة نصية فريدة تفصل بين الحقول والملفات المختلفة داخل جسم طلب multipart/form-data. | |
| تخمين نوع المحتوى | مايم سنيفينج | محاولة المتصفح فحص أوائل البايتات في الملف لتخمين نوعه عند غياب حقل Content-Type أو الشك في صحته. | |
| منع تخمين النوع | نو سنيف دايركتيف | قيمة توضع في حقل X-Content-Type-Options لإجبار المتصفح على الالتزام الصارم بنوع المحتوى المعلن. |
يرمز الاختصار إلى امتدادات البريد الإلكتروني متعددة الأغراض (). وقد صُمم هذا المعيار في بداية التسعينيات لتمكين رسائل البريد الإلكتروني من إرسال النصوص غير الإنجليزية والمرفقات الثنائية كالصور والصوت، ثم تبناه بروتوكول ليكون الآلية القياسية لتعريف هوية كل ملف يمر عبر الويب:
- توجيه المحلل الصحيح في المتصفح (): عندما يستقبل المتصفح حقل الرأس فإنه يمرر البايتات إلى محلل لبناء شجرة الصفحة. أما إذا وصلت البايتات نفسها مع القيمة ، فإن المتصفح يعرض الوسوم كنص خام عادي دون تنفيذها.
- السجل العالمي الموحد (): تُسمى هذه الأنواع رسمياً في المواصفات القياسية الحديثة () باسم أنواع الوسائط ()، وتديرها هيئة أرقام الإنترنت المخصصة ().
يتكون كل نوع وسائط () من بنية قياسية دقيقة غير حساسة لحالة الأحرف وفق المواصفة :
- 1. النوع الرئيسي (): يحدد الفئة العامة للبيانات؛ وتشمل الفئات المفردة كلاً من النصوص () والصور () والصوتيات () والفيديو () والخطوط () والتطبيقات ()، بينما تمثل الفئة المركبة () وعاءً يجمع عدة أجزاء داخل رسالة واحدة.
- 2. النوع الفرعي (): يأتي بعد شرطة مائلة للأمام () ليحدد التنسيق الدقيق للبيانات داخل تلك الفئة (مثل أو أو ). كما تُستخدم اللواحق المهيكلة مثل أو (كما في و) لبيان البنية الأساسية للملف.
- 3. المعاملات الاختيارية (): تُضاف بعد فاصلة منقوطة () لتمرير خصائص إضافية مثل ترميز الحروف () أو حد الفصل ().
تأمل المخطط التوضيحي الآتي الذي يفصّل بنية نوع الوسائط وعائلاته القياسية المعتمدة:
Content-Type: text/html; charset=utf-8
Content-Type: application/json
Content-Type: application/problem+json; charset=utf-8
Content-Type: image/svg+xml
Content-Type: multipart/form-data; boundary=----CloseTagFormBoundary7MA4YWxkتُنقل جميع النصوص عبر الشبكة على هيئة أرقام ثنائية (بايتات). وحتى يتمكن المتصفح من عرض النصوص متعددة اللغات—وعلى رأسها اللغة العربية والرموز—بشكل سليم، يجب أن يتفق الخادم والمتصفح على جدول ترميز المحارف ():
- أهمية ترميز للنصوص العربية: يمثل معيار كل حرف عربي باستخدام بايتين اثنين. فإذا أرسل الخادم صفحة عربية بترميز دون التصريح بـ ، وافترض المتصفح ترميزاً قديماً أحادي البايت مثل ، فستظهر الحروف العربية مشوهة وغير مقروءة ( مثل ).
- أولوية حقل الرأس على وسم الصفحة: يتمتع معامل المرسل في حقل الرأس بأولوية أعلى دائماً من وسم المكتوب داخل ملف .
HTTP/1.1 200 OK
Server: nginx/1.26.0
Content-Type: text/html; charset=utf-8
Content-Length: 142
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head><meta charset="utf-8"><title>CloseTag</title></head>
<body><h1>HTTP Media Types</h1></body>
</html>في أنظمة التشغيل المحلية على حاسوبك، يعتمد النظام على امتداد اسم الملف (مثل أو أو ) لمعرفة البرنامج المناسب لفتحه. أما في بروتوكول ، فإن المرجع الحاكم في المتصفح هو حقل الرأس وليس امتداد الرابط:
- الروابط الحديثة الخالية من الامتدادات (): لا تنتهي روابط الويب الحديثة مثل أو نقاط نهاية الواجهات البرمجية مثل بأي امتداد ملف، ومع ذلك يعرف المتصفح بدقة هل يعرض صفحة ويب أم يقرأ كائن بالاعتماد الكلي على حقل الرأس .
- توليد الملفات والصور ديناميكياً: حتى لو كان الرابط ينتهي بمسار مثل ، فبمجرد أن يرسل الخادم حقل الرأس سيتعامل معه المتصفح فوراً كملف رسمي.
GET /api/v1/avatars/user-940 HTTP/1.1
Host: api.closetag.com
Accept: image/webp,image/png,*/*;q=0.8
HTTP/1.1 200 OK
Content-Type: image/webp
Content-Length: 4820
Cache-Control: public, max-age=86400يخلط كثير من المبتدئين بين حقل الرأس وحقل الرأس لأن كليهما يُكتب بداخله نوع وسائط ()، لكن وظيفتهما الهندسية مختلفة تماماً:
- حقل (في رأس الطلب فقط — للتفاوض على المحتوى): يرسله العميل ليخبر الخادم: «هذه هي الصيغ التي أفهمها وأفضّل أن ترسل لي الرد بها»، ويمكن أن يضم عدة أنواع مرتبة حسب معامل الأولوية ().
- حقل (حقل تمثيل المحتوى — في الطلب أو الاستجابة): يرسله أي طرف يرفق جسماً فعلياً () في رسالته الحالية (سواء كان العميل عند إرسال بيانات أو الخادم عند إرجاع الاستجابة) ليعلن: «هذا هو النوع الفعلي الوحيد للبايتات الموجودة داخل جسم هذه الرسالة الآن».
جرّب المختبر التفاعلي الآتي لمقارنة دور و في سيناريوهات الويب الحقيقية:
تضم الفئة الرئيسية جميع المستندات النصية والملفات البرمجية المقروءة للبشر، ويُنصح دائماً بإرفاق المعامل معها:
- النوع : نص خام غير منسق؛ يعرضه المتصفح حرفياً كما هو دون تفسير أي وسوم أو تشغيل أي سكربتات.
- النوع : مستندات القياسية التي يبني منها المتصفح شجرة عناصر الصفحة ().
- النوع : أوراق الأنماط المتتالية ()؛ وفي الوضع القياسي الحديث () يرفض المتصفح تطبيق ملف التنسيق الخارجي إذا لم يُرسل بالنوع .
- النوع : المعيار الرسمي المعتمد في سجل (وفق المواصفة ) لملفات الجافاسكريبت ووحدات ، وقد حل رسمياً محل الصيغة القديمة .
- النوعان و: الجداول النصية المفصولة بفواصل وملفات البيانات المهيكلة النصية.
HTTP/1.1 200 OK
Content-Type: text/css; charset=utf-8
Cache-Control: public, max-age=31536000, immutable
:root {
--brand-primary: #7750b2;
}تشمل فئة التطبيقات () البيانات المهيكلة التي تعالجها البرامج، والمستندات المحمولة، والملفات المضغوطة، والتدفقات الثنائية:
- النوع : العمود الفقري لواجهات البرمجة الحديثة ()، وتتفرع منه لواحق قياسية مثل لتفاصيل أخطاء الواجهات القياسية ()، و لبيانات محركات البحث المنظمة.
- النوع : مستندات التي تعرضها المتصفحات الحديثة داخل عارض مدمج معزول.
- النوع و: وحدات المترجمة (التي يشترط المتصفح إرسالها بنوع حصراً لتشغيل الترجمة التدفقية السريعة)، وملفات الأرشيف المضغوطة.
- النوع : النوع الافتراضي لأي ملف ثنائي عام أو غير معروف؛ ولا يحاول المتصفح عرضه داخل الصفحة بل يتعامل معه كملف جاهز للتنزيل.
HTTP/1.1 200 OK
Content-Type: application/octet-stream
Content-Disposition: attachment; filename="closetag-backup-2026.tar.gz"
Content-Length: 10485760عندما يرسل نموذج في صفحة الويب بياناته عبر طلب ، فإن خاصية تحدد نوع الوسائط الذي يصيغ به المتصفح جسم الطلب:
- 1. النوع (الوضع الافتراضي للنماذج النصية): يجمع كل حقول النموذج في سطر نصي واحد على شكل أزواج مفصولة بعلامة مع ترميز المسافات والمحارف الخاصة بنسبة مئوية (). وهو مثالي لنماذج الدخول النصية البسيطة، لكنه غير صالح لرفع الملفات الثنائية لأن حجم الملف سيتضخم ثلاثة أضعاف.
- 2. النوع (رفع الملفات والبيانات المختلطة): يُستخدم وجوباً عند وجود حقل رفع ملفات (). يولّد المتصفح سلسلة فاصلة فريدة () داخل حقل الرأس ، ويقسم جسم الطلب إلى مقاطع مستقلة يحمل كل مقطع منها حقول رأس خاصة به ( و)، مما يسمح بنقل الملفات الثنائية الخام بكفاءة تامة.
تأمل المخطط التوضيحي الآتي الذي يقارن بين صيغتي إرسال النماذج ويوضح آلية الحماية من تخمين النوع:
POST /profile/avatar HTTP/1.1
Host: www.closetag.com
Content-Type: multipart/form-data; boundary=----Boundary940
------Boundary940
Content-Disposition: form-data; name="username"
ali_dev
------Boundary940
Content-Disposition: form-data; name="photo"; filename="avatar.png"
Content-Type: image/png
------Boundary940--تعتمد الوسائط المرئية والصوتية وخطوط الويب على فئات قياسية مخصصة تتيح للمتصفح تشغيل مسرعات فك الترميز العتادية () بكفاءة:
- عائلة الصور (): تضم الصيغ النقطية مثل و و، والصيغ الحديثة عالية الضغط مثل و، والرسوميات المتجهة .
- عائلتا الصوت والفيديو ( و): تضم لملفات ، و، و، و، وتعمل غالباً مع طلبات النطاق الجزئي () لدعم تقديم وتأخير البث.
- عائلة الخطوط (): أُفردت لها فئة مستقلة في المواصفة ، وأهمها (المعيار القياسي المضغوط لخطوط الويب الحديثة) و.
HTTP/1.1 200 OK
Content-Type: font/woff2
Access-Control-Allow-Origin: https://www.closetag.com
Cache-Control: public, max-age=31536000, immutable
Content-Length: 38420يؤدي إرسال قيمة خاطئة في حقل الرأس سواء من جهة الخادم أو العميل إلى أعطال فورية في عمل التطبيقات:
- 1. ظهور كود كنص خام على الشاشة: إذا أرسل الخادم صفحة ويب مع حقل الرأس ، سيعرض المتصفح الوسوم البرمجية كنص عادي بدلاً من رسم عناصر الصفحة.
- 2. تجاهل ملفات التنسيق وحظر السكربتات: يرفض المتصفح في الوضع القياسي تطبيق ملفات إذا لم تُرسل بنوع ، كما يحظر تشغيل ملفات المرسلة بأنواع نصية أو ثنائية خاطئة عند تفعيل حماية .
- 3. فشل قراءة بيانات وظهور خطأ : عند إرسال نص في جسم طلب مع نسيان ضبط ، لن يقوم الخادم بتحليل الحقول أو سيرفض الطلب برمز الحالة .
- 4. تنزيل الصفحة بدلاً من فتحها: إرسال مورد ويب بنوع عن طريق الخطأ يجبر المتصفح على فتح نافذة حفظ الملف بدلاً من عرضه.
في بدايات الويب، كانت كثير من الخوادم تُضبط بشكل خاطئ فترسل حقل الرأس مع جميع الملفات. وللتغلب على ذلك، ابتكرت المتصفحات آلية تخمين نوع الملف () عبر فحص أول 512 بايتاً من الملف للبحث عن البصمة الثنائية () أو وسوم وتخمين نوعه الحقيقي.
غير أن هذا التخمين فتح ثغرة أمنية خطيرة تُعرف باسم هجوم التباس النوع ()؛ إذ يمكن للمهاجم رفع ملف نصي أو صورة تحتوي بداخلها على كود ، فإذا قام المتصفح بتخمين المحتوى وتجاهل حقل الرأس فسيُنفّذ السكربت الخبيث داخل حساب الضحية!
ولإغلاق هذه الثغرة نهائياً، يجب على كل خادم ويب إرسال حقل الرأس الأمني الصارم في استجاباته:
جرّب المحاكي الأمني التفاعلي الآتي لاختبار الفرق بين غياب وتفعيل :
curl -I https://www.closetag.com/tutorials/web-technology/http-overview
HTTP/2 200
content-type: text/html; charset=UTF-8
x-content-type-options: nosniff
cache-control: no-cache, privateملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس مفهوم أنواع الوسائط () وحقل الرأس ، وبنية النوع الرئيسي والفرعي والمعاملات، وأهمية ترميز ، وأولوية على امتداد الرابط، والفرق بين و، وعائلات النصوص والتطبيقات والوسائط، والفرق بين صيغتي النماذج و، وحماية المتصفح من تخمين النوع عبر . الخطوة التالية: انتقل الآن إلى الدرس التالي الكوكيز والجلسات في HTTP () لتكتشف كيف تحفظ تطبيقات الويب حالة المستخدم وهويته فوق بروتوكول عديم الحالة!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات12
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 MIME Type (Media Type) نوع الوسائط (MIME / Media Type)
- معرف قياسي مكون من جزأين (النوع الرئيسي والفرعي) مسجل لدى هيئة IANA لتحديد تنسيق البيانات المنقولة في جسم رسالة HTTP.
- للمراجعة
- 02 Content-Type Header حقل نوع المحتوى (Content-Type)
- حقل في رأس الرسالة يحدد نوع الوسائط الفعلي وترميز الحروف للبيانات المرفقة في جسم الطلب أو الاستجابة.
- للمراجعة
- 03 Charset Parameter (UTF-8) معامل ترميز المحارف (charset=utf-8)
- معامل يضاف إلى حقل Content-Type لتحديد جدول الترميز (مثل UTF-8) المستخدم لتحويل البايتات الثنائية إلى نصوص مقروءة.
- للمراجعة
- 04 Accept Header حقل قبول الأنواع (Accept)
- حقل يرسله العميل في رأس الطلب لإخبار الخادم بأنواع الوسائط التي يفضل استلامها في رسالة الاستجابة.
- للمراجعة
- 05 application/json نوع بيانات JSON (application/json)
- نوع الوسائط القياسي المعتمد لتبادل البيانات المهيكلة بصيغة JSON في واجهات البرمجة الحديثة.
- للمراجعة
- 06 application/octet-stream التدفق الثنائي العام (application/octet-stream)
- نوع الوسائط الافتراضي للبيانات الثنائية العامة أو غير المعروفة، ويدفع المتصفح عادةً لتنزيل الملف بدلاً من عرضه.
- للمراجعة
- 07 application/x-www-form-urlencoded ترميز النماذج القياسي (urlencoded)
- الصيغة الافتراضية لإرسال نماذج HTML النصية، حيث تُرتب الحقول على شكل أزواج مفتاح وقيمة مفصولة بعلامة &.
- للمراجعة
- 08 multipart/form-data بيانات النماذج متعددة الأجزاء (multipart/form-data)
- نوع وسائط مركب يقسم جسم الطلب بواسطة حدود فاصلة (boundary) لتمكين رفع الملفات الثنائية مع الحقول النصية بكفاءة.
- للمراجعة
- 09 Multipart Boundary حد الفصل (Boundary Parameter)
- سلسلة نصية فريدة تُعلن داخل حقل Content-Type لتحديد بداية ونهاية كل جزء مستقل داخل جسم الرسالة متعددة الأجزاء.
- للمراجعة
- 10 MIME Sniffing تخمين نوع المحتوى (MIME Sniffing)
- سلوك يقوم فيه المتصفح بفحص البايتات الأولى من الملف لتخمين نوعه الحقيقي بدلاً من الاكتفاء بحقل Content-Type المعلن.
- للمراجعة
- 11 X-Content-Type-Options: nosniff توجيه منع التخمين (nosniff)
- حقل رأس أمني يأمر المتصفح بتعطيل تخمين النوع والالتزام الصارم بنوع المحتوى المعلن في حقل Content-Type.
- للمراجعة
- 12 415 Unsupported Media Type حالة نوع وسائط غير مدعوم (415)
- رمز حالة خطأ يرجعه الخادم عندما يرفض معالجة الطلب لأن صيغة جسم الرسالة المعلنة في Content-Type غير مدعومة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 MIME MIME
- Multipurpose Internet Mail Extensions
- امتدادات البريد الإلكتروني متعددة الأغراض التي اعتمدها بروتوكول HTTP لتعريف أنواع الملفات والبيانات عبر الشبكة.
- للمراجعة
- 02 IANA IANA
- Internet Assigned Numbers Authority
- هيئة أرقام الإنترنت المخصصة المسؤولة عالمياً عن إدارة السجل الرسمي لأنواع الوسائط ورموز حالات HTTP.
- للمراجعة
- 03 UTF-8 UTF-8
- 8-Bit Unicode Transformation Format
- نظام الترميز القياسي العالمي القادر على تمثيل جميع حروف اللغات البشرية ومنها العربية والرموز بكفاءة عالية.
- للمراجعة
- 04 SVG SVG
- Scalable Vector Graphics
- الرسوميات المتجهة القابلة للتحجيم المبنية على لغة XML وتُرسل عبر الويب بنوع الوسائط image/svg+xml.
- للمراجعة
- 05 WOFF2 WOFF2
- Web Open Font Format 2.0
- الإصدار الثاني من تنسيق خطوط الويب المفتوحة المضغوطة، ويُرسل بنوع الوسائط القياسي font/woff2.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
شغّل الأمر curl -I https://www.closetag.com في الطرفية وتحقق من وجود حقل الرأس Content-Type: text/html; charset=UTF-8 وحقل الحماية X-Content-Type-Options: nosniff.
-
افتح أدوات المطورين في المتصفح (F12 ثم تبويب Network)، وأعد تحميل الصفحة، وقارن قيمة حقل Content-Type لكل من الصفحة الرئيسية وملف CSS وملف JS والصورة والخط.
-
استخدم المختبر التفاعلي أو نفّذ أمر curl -v -F على خادمك المحلي لملاحظة كيف يولّد العميل تلقائياً معامل boundary ويفصل بين الحقول داخل جسم الطلب.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.