تعلم تطوير الويب آليات إدراج المحتوى والوسائط المتعددة في صفحة HTML

لا بد وأنك قد امتلكت فكرةً واضحةً عن مفهوم إدراج المحتوى في صفحات الويب بما في ذلك إدراج الصور والفيديو والصوتيات، إذ سنتخذ في هذا المقال خطوات جانبيةً لنلقي نظرةً على العناصر <object> و <embed> و <iframe> التي تسمح بإدراج محتويات متنوعة في صفحات الويب، إذ يُستخدَم <iframe> في إدراج صفحات الويب أخرى؛ أما العنصران الباقيان فيسمحان لك بإدراج ملفات PDF و SVG وحتى ملفات فلاش التي تُعَدّ في نهاياتها ومع ذلك قد تراها.

لا بد قبل البدء بقراءة هذا المقال أن تكون على دراية بأساسيات عمل الحاسوب وطريقة تثبيت البرمجيات الأساسية ودراية بطريقة عمل الملفات، ولا بد أيضًا من الدراية بأساسيات اللغة HTML كما عرضناها في مقال تعرَّف على HTML، وطريقة إدراج الصور في صفحة HTML وطريقة إدراج المحتوى البصري والسمعي في صفحة HTML.

لمحة موجزة عن تاريخ إدراج المحتوى

زادت فيما مضى شعبية استخدام الإطارات frames لإنشاء مواقع الويب، وهي أجزاء صغيرة من موقع ويب مخزنة ضمن صفحات HTML مستقلة، وقد أدرجت هذه الأجزاء في ملف رئيسي دُعي مجمِّع الإطارات frameset يعطيك إمكانية التحكُّم بالمكان الذي يشغله كل إطار بصورة مشابهة نوعًا ما لتحديد أبعاد الصفوف والأعمدة في جدول، وقد عُدّ هذا الأسلوب الأكثر جمالًا في بداية تسعينات القرن الماضي، كما لوحظ أن تقسيم الصفحة إلى أجزاء أصغر سيزيد من سرعة تحميلها وخاصةً مع سرعات الاتصال المنخفضة في تلك الفترة، ولكن مع ذلك، فقد عانى هذه الأسلوب من مشاكل عدة ألغت معها إيجابية السرعة، فلم تَعُد تراها في أيامنا.

ازدادت شعبية تقنية الإضافات plug-ins بعد فترة -أي أواخر التسعينات وبداية الألفية الجديدة- مثل جافا أبليت Java Applets وفلاش، مما يسمح لمطورِي الويب من إدراج محتوى غني في صفحات الويب مثل مقاطع الفيديو والرسوم المتحركة التي لم تكن متاحةً باستخدام HTML وحدها، وقد أدرجت هذه التقنيات باستخدام عناصر مثل <object> والعنصر الأقل استخدامًا <embed>، ولقد كانا شديدي الفائدة حينها، لكن سرعان ما خبى تألقهما لأسباب عديدة يتعلق بعضها بسهولة الوصول والأمان وحجم الملفات، وقد توقفت معظم المتصفحات الحديثة في أيامنا عن دعم هذه الإضافات مثل تقنية فلاش.

ظهر أخيرًا العنصر <iframe> مع طرق أخرى لإدراج المحتوى مثل <canvas> و <video> الذي يتيح إمكانية إدراج صفحة ويب بأكملها ضمن أخرى كما لو كانت صورةً أو أيّ عنصر آخر، وتستخدَم كثيرًا حاليًا.

لننتقل بعد هذا الدرس التاريخي لنرى كيف نستخدِم بعض هذه العناصر.

تطبيق: الاستخدامات التقليدية لإدراج العناصر

سنقفز مباشرةً في هذا المقال إلى التطبيق لكي نعطيك فكرةً واقعيةً عن فائدة تقنيات إدراج المحتوى في صفحات ويب، إذ يشتهر موقع اليوتيوب كثيرًا في عالم الويب، لكن لا يعلم الكثيرون عن إمكانيات المشاركة التي يتيحها، فلنلق نظرةً إذًا على الطريقة التي يسمح فيها اليوتيوب بإدراج فيديو في أيّ صفحة باستخدام العنصر <iframe>.

1. انتقل إلى موقع اليوتيوب واختر الفيديو الذي تريد.
2. ستجد تحت الفيديو زر مشاركة Share، انقر عليه لتعرض خيارات المشاركة.
3. اختر زر إدراج Embed وستشاهد شيفرة تضم العنصر <iframe>.
4. انسخ هذه الشيفرة والصقها في الصندوق Input لمحرر الشيفرة الذي تراه في الأسفل وراقب ما يحدث في منطقة الخرج output.

حاول إدراج خريطة من خرائط جوجل لتكسب نقاطًا إضافيةً:

1. انتقل إلى جوجل ماب وانتق خريطةً ما.
2. انقر على أيقونة القائمة الرئيسية -أي أيقونة الخطوط المتلاحقة- في الزاوية العليا اليسارية من واجهة المستخدِم.
3. اختر مشاركة أو إدراج خريطة Share Embed map.
4. اختر إدراج خريطة Embed map والذي سيزوّدك بشيفرة تضم العنصر <iframe>، انسخها.
5. الصقها في الصندوق Input لمحرر الشيفرة الذي تراه في الأسفل وراقب ما يحدث في منطقة الخرج output.

إذ ارتكبت خطأً، فيمكنك مسح ما كتبته بالنقر على زر إعادة الضبط Reset، في حين إذا وجدت نفسك تائهًا كليًا، فانقر على زر أظهر الحل Show solution لترى الحل الصحيح.

العنصر iframe بالتفصيل

لقد كان الأمر مسليًا وسهلًا حتى الآن، وقد صُمم العنصر <iframe> ليسمح بإدراج صفحات ويب خارجية ضمن صفحة الويب التي تعمل عليها، كما تقدِّم هذه التقنية فائدةً عظيمةً لإضافة محتوى مصدره طرف ثالث في الصفحة لا يمكنك التحكّم به مباشرةً ولا تريد في الوقت نفسه إدراج نسخة خاصة بك من هذا المحتوى مثل الفيديوهات التي تقدمها مزودات الفيديو على الإنترنت مثل يوتيوب أو أنظمة إدراج التعليقات مثل Disque أو الخرائط أو لوحات الإعلانات وغيرها، وما سنعمل عليه في مقالنا هو استخدام العنصر <iframe> في إدراج محتوى مثل هذا في صفحات ويب.

لكن، هنالك بعض الهواجس الأمنية فيما يتعلق باستخدام <iframe> كما سنناقش لاحقًا، لكن هذا لايعني ألا تستخدِمه في مواقعك، وإنما لدفعك إلى القليل من التفكير المتأني، ولنتفحّص الشيفرة التالية بشيء من التفصيل، فلنقل أنك تريد إدراج "قائمة مصطلحات شبكة مطوري موزيللا MDN glossary"، إذ يمكنك محاولة العمل على الشيفرة التالية:

<head>
  <style> iframe { border: none } </style>
</head>
<body>
  <iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
          width="100%" height="500" allowfullscreen sandbox>
    <p>
      <a href="/en-US/docs/Glossary">
         Fallback link for browsers that don't support iframes
      </a>
    </p>
  </iframe>
</body>

يضم المثال السابق الأساسيات الضرورية لاستخدام <iframe>:

• border: none: إذا استخدمت هذه السمة، فسيُعرَض العنصر <iframe> دون إطار محيط به، وإلا فسيعرض المتصفح افتراضيًا إطارًا حوله.
• allowfullscreen: إذا استخدمت هذه السمة، فسيُعرَض العنصر <iframe> داخل شاشة كاملة، وذلك باستخدام الواجهة البرمجية التي تدير العرض على شاشة كاملة Fullscreen API.
• src: تشابه نظيرتها في العنصر <video> وتضم مسارًا يدل على عنوان URL الخاص بالمحتوى المُدرج.
• height و width: وهما سمتان تحددان طول وعرض المنطقة التي تعرض محتوى العنصر <iframe>.
• المحتوى الاحتياطي Fallback content: كما هو الحال مع العنصر <video>، إذ يمكنك إدراج محتوى احتياطي بين وسمَي البداية والنهاية للعنصر <iframe> سيظهر في حال لم يدعم المتصفح هذا العنصر، وقد زودنا المستخدِم في حالات مثل هذه برابط مباشر إلى الصفحة التي لم يتمكن المتصفح من إدراجها، لكن من غير المحتمل أن تصادف متصفحًا حديثًا لا يدعم <iframe>.
• sandbox: تعمل هذه السمة في متصفحات أكثر حداثةً مثل إنترنت إكسبلورر 10 موازنةً بغيرها من ميزات <iframe>، كما تتطلب إعدادات أمان متشددة أكثر، وسنتحدث عن ذلك في القسم التالي.

ملاحظة: لتزيد من سرعة تحميل الصفحة يمكن إسناد قيمة السمة src باستخدام شيفرة جافاسكربت عند انتهاء تحميل المحتوى الرئيسي للصفحة، وبهذه الطريقة يمكن استخدام صفحتك مباشرةً ويقل زمن تحميلها الرسمي وهو معيار سيو SEO هام.

اعتبارات أمنية

لا نتوقع منك أن تفهم جيدًا جميع هذه الاعتبارات الأمنية من المرة الأولى التي تتعرف عليها، وإنما نريدك الانتباه إليها وأن يكون لديك مرجع لتعود إليه عندما تزداد خبراتك وتقرر استخدام العنصر <iframe> في أعمالك، ولا حاجة للخوف طبعًا من استخدام هذا العنصر وإنما لمزيد من الانتباه.

لقد تعلم صانعِي المتصفحات ومطورِي الويب من تجاربهم المريرة أنّ النوافذ الضمنية المتمثلة بالعنصر <iframe> هي هدف شائع -أو ضحية هجوم Attack vectom بالتسمية الرسمية- لأشخاص سيئون على الويب والذين يطلَق عليهم اسم مختطفين hackers أو مخترقين crackers، وذلك كي يهاجموك من خلالها عندما يحاولون تعديل صفحتك بطريقة غير سليمة أو أن يخدعوا آخرين لفعل أمور لا يريدون فعلها مثل إفشاء معلومات حساسة مثل اسم المستخدِم أو كلمة السر، ولهذا السبب يحاول المهندسون المختصون ومطورو المتصفحات ابتكار آليات حماية متنوعة لجعل استخدام العنصر <iframe> أكثر أمانًا وإيجاد طرق عملية مثلى يجدر اتباعها وسنغطي بعضًا منها في هذا القسم.

ملاحظة: يعد الاختطاف بالنقر هجومًا شائعًا يستهدف النوافذ الضمنية، إذ يُدرِج المخترق نافذةً غير مرئية في صفحتك أو يدرج صفحتك ضمن موقعه المشبوه، ثم يستخدِم ذلك في لفت انتباه المستخدِمين، وهي طريقة شائعة في تضليلهم أو لسرقة بياناتهم الحساسة.

سنقدم لك مثالًا سريعًا: حاول تحميل المثال الذي عرضناه في الأعلى في متصفحك، إذ يمكنك إيجاده ضمن المستودع المخصص له على جيت -هاب، كما يمكنك أيضًا الاطلاع على الشيفرة المصدرية، ما سيحدث أنه بدلًا من أن يعرض لك الصفحة المطلوبة وهي "قائمة مصطلحات MDN"‘ فقد تشاهد رسالة من قبيل "لا يمكن فتح هذه الصفحة I can't open this page"، فإذا انتقلت إلى "الطرفية Console" ضمن أدوات مطورِي الويب المدمجة مع المتصفح، فستجد رسالةً تفسِّر لك سبب ما حدث، إذ سيكون نص هذه الرسالة في فايرفوكس مشابهًا للتالي: (إنّ فتح المورد "https://developer.mozilla.org/en-US/docs/Glossary" في إطار مرفوض لأن التوجيه "X-Frame-Options" قد ضُبط على القيمة DENY)، ويعود السبب إلى أنّ المطورين الذين بنوا "شبكة مطور موزيللا MDN" قد أضافوا إعدادًا إلى الخادم الذي يستضيف MDN يمنع إدراج هذه الصفحات ضمن نوافذ ضمنية <iframe>، ويُعَدّ الأمر منطقيًا، فمن غير الوارد إدراج صفحة كاملة من MDN ضمن صفحات أخرى ما لم تحاول وضعها في موقعك الخاص ثم تدعي ملكيتك لها، أو أن تحاول سرقة بيانات حساسة من خلال هجوم الاختطاف بالنقر، وكلاهما أمر سيء، وبالإضافة إلى ذلك، سيكلِّف هذا الفعل موزيللا مبالغ طائلة عندما يتخطى استهلاك الموقع عرض حزمة التراسل المعتمدة.

لا تدرج ما ليس ضروريا

قد يبدو معقولًا في بعض الحالات إدراج محتوى مصدره طرف آخر مثل فيديوهات يوتيوب أو خرائط جوجل، لكن وفِّر على نفسك الكثير من المشاكل ولا تدرج أيّ محتوى مصدره طرف ثالث ما لم يكن ذلك ضروريًا جدًا، وتذكَّر دائمًا قاعدة أمان أساسية في ويب تقول: "لا شيء يُدعى زيادةً في الحرص، تحقق مجددًا حتى لو فعلت ذلك، وإذا تحقق أحدهم، فافترض أنك في خطر حتى يثبت العكس".

إضافة إلى عامل الأمان، لا بد من الانتباه إلى مواضيع الخصائص، إذ يتمتع المحتوى بمعظمه بحقوق نشر على الإنترنت أو خارجها حتى غير المتوقع منها مثل معظم صور ويكيميديا، لذلك لا تعرض محتوًى على صفحتك ما لم تمتلكه أو حصلت على إذن مكتوب وجلي، فعقوبات مخالفة حقوق النشر شديدة، ونقولها مجددًا: "لا شيء يُدعى زيادةً في الحرص"، فإذا كان المحتوى مرخصًا، فالتزم بشروط الرخصة، فمحتوى أكاديمية حسوب مثلًا مرخَّص بموجب الرخصة CC-BY-NC-SA، ويعني ذلك أنه عليك الإشارة إلى أكاديمية حسوب بصورة مناسبة عند اقتباس أيّ محتوى منها حتى لو أجريت تعديلات مهمة عليه واستعمال المحتوى بشكل غير تجاري.

استخدم بروتوكول HTTPS

يُعَدّ نسخةً مشفرةً من بروتوكول HTTP، وينبغي استخدامه ما أمكن في موقعك:

1. يقلل استخدام HTTPS فرصة التلاعب بالمحتوى عن بعد أثناء نقله.
2. يمنع HTTPS المحتوى الذي تُدرجه من الوصول إلى محتوى الصفحة الأساسية وبالعكس.

يمكِّن بروتوكول HTTPS موقعك من طلب تثبيت شهادات أمان خاصة، إذ تقدِم الكثير من مزودات الاستضافة استخدام HTTPS دون الحاجة إلى أية إعدادات من طرفك لتثبيت شهادة أمان في مكانها، وإذا أردت أيضًا إعداد خدمات HTTPS بنفسك على موقعك، فستجد أدوات وإرشادات تقدِّمها منظمة Let's Encrypt لإنشاء وتثبيت الشهادات المطلوبة تلقائيًا مع دعم مدمج لمعظم خوادم الويب الأكثر استخدامًا مثل Apache و Nginx وغيرها، وقد صممت تلك الأدوات لتجعل العملية سهلة قدر الإمكان، فلا سبب يمنع استخدامها أو غيرها من وسائل دعم HTTPS على موقعك.

ملاحظة: تدعم خدمة GitHub pages بروتوكول HTTPS افتراضيًا، فهي منتسبة إذًا لاستضافة المحتوى، فإذا كنت تستخدِم مزود استضافة آخر ولست واثقًا من دعمه للبروتوكول، فاسأله عن هذه التفاصيل.

استخدم السمة sandbox دائما

عليك منح المحتوى الذي تُدرجه في موقعك أقل مستوى من السماحيات التي تمّكنه من إنجاز عمله دون إعطاء فرصة للمخترقين بإحداث ضرر في موقعك، وينطبق الأمر أيضًا على المحتوى الخاص بك، كما تُدعى أي حاوية للشيفرات يمكن أن تُستخدَم فيها تلك الشيفرات بصورة ملائمة أو لأغراض اختبارية دون أن تسبب أذىً لبقية الشيفرة مصادفةً أو عمدًا بصندوق معزول أو محمي sandbox.

يمكن لأيّ محتوى لا يقيده صندوق عزل فعل الكثير على صفحاتك مثل تنفيذ شيفرات جافاسكربت أو إرسال استمارات أو عرض نوافذ منبثقة، لذلك لا بد من استخدام كل التقييدات المتاحة باستخدام السمة sandbox دون أية معاملات -أي قيم- كما عرضناها في مثالنا السابق.

لكن إذا كان الأمر ضروريًا، فتستطيع إضافة الأذونات واحدًا تلو الآخر داخل قيمة السمة ""=sandbox وسنتحدث عن هذه الأذونات تاليًا، كما تجدر الإشارة إلى عدم استخدام الخيارين allow-scripts و allow-same-origin معًا، فقد يلتف المحتوى الذي تُدرجه على الخيار allow-same-origin الذي يمنع المواقع من تنفيذ الشيفرة، ثم تُستخدم جافاسكربت في إلغاء عمل السمة sandbox كلها.

ملاحظة: لا يمكن لصندوق عزل تأمين الحماية من المخترقين إذا خدعوا المستخدِمين ودفعوهم لزيارة مواقع مشبوهة مباشرةً خارج العنصر <iframe>، فإذا كان هناك احتمال أن يكون المحتوى الذي تريد إدراجه مشبوهًا مثل المحتوى الذي ينتج عن تفاعل مستخدِمين، فحاول تقديمه لمتابعيك من نطاق domain مختلف عن نطاق موقعك.

تهيئة توجيهات سياسة أمن المحتوى CSP

تؤمن سياسة أمن المحتوى مجموعةً من ترويسات بروتوكول HTTP وهي بيانات وصفية تُرسل مع صفحات ويب عندما يعيدها الخادم مصممة لتحسين مستوى أمان صفحات HTML؛ أما فيما يتعلق باستخدام العنصر <iframe>، فبإمكانك تهيئة الخادم ليعيد ترويسة تضم خيار ملائم للتوجيه X-Frame-Options، إذ سيمنع ذلك مواقع الويب الأخرى من إدراج المحتوى الخاص بك في صفحاتها والذي قد يمكِّن هجمات الاختطاف بالنقر وغيرها من الهجمات، وهذا ما فعله تمامًا مطورو MDN كما رأينا سابقًا.

العنصران object و embed

لهذين العنصرين وظيفتين مختلفتين عن العنصر <iframe>، فهما أداتان عامتان لإدراج محتوى خارجي مثل ملفات PDF، ومع ذلك لن تستخدِم هذين العنصرين كثيرًا، إذ يستحسن إذا أردت مثلًا عرض ملف PDF أن تربطه بصفحتك بدلًا من إدراجه.

استُخدِم هذان العنصران تاريخيًا لإدراج محتوى تتعامل معه إضافات المتصفح plug-ins مثل أدوبي فلاش، لكنها تقنية في طريقها إلى الزوال حاليًا ولا تدعمها المتصفحات الحديثة، لكن إذا رأيت نفسك مضطرًا إلى إدراج إضافة، فإليك الحد الأدنى من المعلومات اللازمة لإنجاز الأمر:

لنلق نظرةً على مثال يستخدِم العنصر <object> لإدراج ملف PDF في صفحة ويب، كما يمكنك أيضًا تجريب المثال مباشرة والاطلاع على الشيفرة المصدرية:

<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200">
  <p>You don't have a PDF plugin, but you can
    <a href="mypdf.pdf">download the PDF file.
    </a>
  </p>
</object>

تُعَدّ ملفات PDF خطوةً انتقاليةً هامةً بين الورقيات والعالم الرقمي، لكنها تعرض الكثير من التحديات المتعلقة بسهولة الوصول، وقد يعاني البعض من قراءتها ضمن شاشات صغيرة، ومازالت هذه الملفات شعبيةً ضمن بعض حلقات المستخدِمين، مع ذلك، يفضَّل ربطها بصفحاتك ليتمكن هؤلاء من تنزيلها أو قراءتها في صفحة مستقلة بدلًا من إدراجها في صفحتك.

خلاصة

حاولنا في مقالنا هذا تقديم مفهوم إدراج محتوى في صفحاتك بطريقة مبسطة، لأنّ موضوعًا مثل هذا قد يتعقّد بسرعة إذا خضنا فيه بطريقة غير ملائمة، ولهذا اعتمدنا أسلوبًا مألوفًا يبدو متعلقًا مباشرةً بمضمون سلسلة المقالات، ومع ذلك يحاول شرح بعض الميزات المتقدمة المتعلقة بالتقنيات المستخدَمة، كما ننصحك في البداية بعدم إدراج محتوى خارج نطاق المحتوى الذي يقدمه طرف ثالث مثل الفيديوهات والخرائط، وسرعان ما ستبدأ البحث عن استخدامات أخرى لعناصر الإدراج عندما تصبح أكثر تمرّسًا.

ستجد الكثير من التقنيات المتعلقة بإدراج محتوى خارجي بالإضافة إلى ما ناقشناه، فقد رأينا بعضها في المقالات السابقة مثل العناصر <video> و <audio> و <img>، كما ستجد غيرها الكثير مثل <canvas> الذي يُستخدَم مع جافاسكربت لتوليد رسوميات ثنائية وثلاثية الأبعاد والعنصر <SVG> الذي يستخدَم في إدراج الرسوميات الشعاعية، وهذا هو موضوعنا في المقال القادم.

لمزيد من التفاصيل حول عناصر HTML، ارجع إلى توثيق لغة HTML العربي في موسوعة حسوب.

ترجمة -وبتصرُّف- للمقال From object to iframe - other embedding technologies.

اقرأ أيضًا

• مكونات الويب: عناصر HTML المخصصة وقوالبها
• إضافة محتوى سمعي ومرئي في صفحة HTML
• إضافة الصور في صفحة HTML