إنّ المحتوى المضمّن هو أفضل طريقة لإبقاء المستخدمين على موقعك الإلكتروني، مع مشاركة المحتوى من صفحات أو مواقع إلكترونية أخرى. ويمكن أن يكون ذلك صغيرًا مثل تغريدة مضمّنة يتم عرضها بأسلوب Twitter وتنسيقه. ويمكن أن يكون كبيرًا مثل موقع إلكتروني منفصل تمامًا مضمّن في موقعك الإلكتروني، مثل متجر Shopify مضمّن يمكن للزوّار إجراء عملية شراء فيه بدون مغادرة موقعك الإلكتروني.
من المهم الآن أكثر من أي وقت مضى أن تظل مواقعنا الإلكترونية آمنة عند تضمين المحتوى.
هناك عدة طرق يمكن للمطوّرين من خلالها تضمين المحتوى على موقع إلكتروني. إنّ الأسلوب الأكثر
شيوعًا هو استخدام علامة
<iframe>،
التي تسمح لك بتضمين أي محتوى على موقعك الإلكتروني باستخدام عنوان URL فقط. كان
بالإمكان إضافة سمة sandbox لجعل إطار iframe أكثر أمانًا.
بدلاً من ذلك، يمكنك استخدام عنصر HTML مقترَح:
- يتم اقتراح
<fencedframe>كطريقة تحافظ على الخصوصية لتضمين محتوى تابع لجهة خارجية. - تم اقتراح استخدام
<portal>لعمليات انتقال أكثر سلاسة في الصفحات.
يمكنك متابعة القراءة للتعرّف على كيفية تحسين مستوى أمان المحتوى المضمَّن.
التضمين باستخدام إطارات iframe
ويمكن استخدام إطارات iframe لجميع أنواع حالات الاستخدام، مثل إضافة خرائط أو نماذج إلى صفحة جهة اتصال وعرض الإعلانات.
<iframe src="https://example.com/maps"></iframe>
ولكل إطار من إطارات iframe سياق تصفُّح خاص به، مع سجلّ جلسات ومستند خاص. ويُشار إلى السياق الذي يتضمّن إطار iframe باسم سياق التصفح الأصلي.
يمكن للمحتوى التابع لجهة خارجية المعروض في إطار iframe أن يتفاعل مع الموقع الإلكتروني الرئيسي
من خلال postMessage(). يتيح هذا الإجراء للمطوّرين إرسال قيم عشوائية بين
سياقات التصفّح. يمكن لمستقبل الرسالة استخدام أداة معالجة الأحداث onmessage
لتلقّي القيم.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
أمان إضافي باستخدام سمة sandbox
في حال نشر محتوى ضار في إطار iframe، من الممكن أن يتم تنفيذ
إجراءات غير مقصودة (مثل تنفيذ JavaScript أو إرسال نموذج).
ولتجنُّب ذلك، تحدّ سمة sandbox من
واجهات برمجة التطبيقات القابلة للتنفيذ في إطار iframe وتوقِف الميزات التي يُحتمل أن تكون ضارة.
<iframe src="https://example.com" sandbox></iframe>
قد تجعل ميزة "المساحة الاختبارية" واجهات برمجة تطبيقات معيّنة غير متاحة، وهي واجهات مهمة للمحتوى المضمّن. للسماح بواجهة برمجة تطبيقات غير مفعّلة، يمكنك إضافة وسيطة صراحةً إلى سمة sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
هناك عدد من القيم المحتملة لملف مواصفات sandbox،
بما في ذلك allow-forms وallow-same-origin وallow-popups وغيرها.
سياسة الأذونات
مع تطوير ميزات أكثر فعالية للويب، تم إنشاء سياسات الأذونات لإدارة الأذونات لجميع هذه الميزات. يمكن تطبيق سياسة الأذونات على موقع رئيسي وعلى محتوى iframe. يمكن أيضًا منح الأذونات الممنوحة
للموقع الإلكتروني الرئيسي للإطار iframe باستخدام السمة allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
التضمين باستخدام إطارات مضمّنة مستقلة
الإطار المحدود (<fencedframe>) هو
عنصر HTML مقترَح للمحتوى المضمّن، يشبه iframe. على عكس ملف iframe، يفرض الإطار المحدود قيودًا على التواصل مع سياق التضمين للسماح للإطار بالوصول إلى البيانات على جميع المواقع الإلكترونية بدون مشاركتها مع سياق التضمين. وبالمثل، لا يمكن مشاركة بيانات الطرف الأول في صفحة أحد الوالدَين مع
الإطار المحدود.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames هو أحد اقتراحات ضِمن "مبادرة حماية الخصوصية" يقترح تقسيم بيانات المواقع الإلكترونية ذات المستوى الأعلى. تهدف العديد من اقتراحات "مبادرة حماية الخصوصية" إلى تلبية حالات الاستخدام على مستوى المواقع الإلكترونية المختلفة، بدون استخدام ملفات تعريف الارتباط التابعة لجهات خارجية أو آليات تتبُّع أخرى. قد تتطلّب بعض واجهات برمجة تطبيقات "مبادرة حماية الخصوصية" مستندات محدّدة لعرضها ضمن إطار محاط بجدار حماية.
على سبيل المثال، سيتم إنشاء إطار مُغلق للفائز في مزاد الإعلانات في FLEDGE API. ستوفّر FLEDGE API مصدرًا غير شفاف، وهو مخطّط URN غير معتمد على الموقع الجغرافي، ويمكن عرضه ضمن إطار محدود. تسمح المصادر غير الشفافة للمواقع الإلكترونية بعرض المحتوى على مواقعها الإلكترونية بدون كشف عنوان URL لمصدر الإعلان لمالك الموقع الإلكتروني.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
في النهاية، لن تحلّ الإطارات المُحدودة محلّ إطارات iframe. لن تحتاج إلى استخدامها. يتم اقتراح استخدام الإطارات المُفصَّلة لتوفير إطار أكثر خصوصية عند الحاجة إلى عرض بيانات من أقسام مختلفة من المستوى الأعلى في الصفحة نفسها.
تضمين مع البوابات
بوابة (<portal>) هي عنصر HTML مقترَح
يتضمّن سياق تصفّح مستقلّاً، ما قد يُحسِّن تجربة
الانتقال إلى الصفحة. تُضمِّن البوابات محتوى مثل إطار iframe، ولكن لا يمكن للمستخدم
الوصول إلى رمز البوابة. تكون البوابة للعرض فقط ولا يمكن للمستخدِمين التفاعل معها.
توفّر البوابات بساطة تطبيق متعدّد الصفحات مع عمليات النقل السلسة لتطبيق من صفحة واحدة. يمكن أن تكون هذه الانتقالات متحرّكة، ما يؤدي إلى استبدال المحتوى في نافذة المتصفّح بسرعة.
<portal src="https://example.com/"></portal>
لا تزال مواصفات البوابة في المراحل الأولى من التطوير.
عناصر HTML الأخرى المستخدَمة في عمليات التضمين
عبر سجل بحث الويب، تم اقتراح عدد من عناصر HTML
وواجهات برمجة التطبيقات التي تم إنشاؤها لتضمين المحتوى. في السابق، كان من الشائع إنشاء مواقع إلكترونية باستخدام عناصر <frame>
و<frameset>
متعدّدة. كانت المواقع الإلكترونية التي تتضمّن عدة عناصر <frameset> تعرِض عنوان URL للصفحة
الأساسية في شريط العناوين، بغض النظر عن مصدر الإطارات الفردية المتعدّدة. وقد كان هذا الأمر يصعّب مشاركة الروابط المؤدية إلى المحتوى داخل الموقع الإلكتروني. وتم إيقاف هذه واجهتَي برمجة التطبيقات نهائيًا منذ ذلك الحين.
كان هناك أيضًا وقت تم فيه استخدام تقنيات الإضافات، مثل عنصر Java <applet>
، لتلبية حالات استخدام أخرى. وتم استبداله لاحقًا بالعنصر
<object>. كان يتم استخدام هذين العنصرَين بشكل شائع لعرض فلاش
الإضافات، ولكن تم استخدامهما أيضًا لعرض عناصر HTML أخرى (مثل إطارات iframe).
أدّت عناصر أخرى، مثل <canvas> و<audio> و<video> و<svg>، إلى
جعل عنصرَي <object> و<applet> قديمَين.
على الرغم من أنّ <object> و<embed> لم يتم إيقافهما رسميًا بعد، من الأفضل
تجنُّبهما، خاصةً أنّهما يُظهران بعض السلوكيات الغريبة.
تمت إزالة العلامة <applet> من مواصفات HTML في عام 2017.
الخاتمة
يمكنك تضمين المحتوى بأمان في أي موقع إلكتروني باستخدام مواصفات iframe
الحالية. تم اقتراح المزيد من عناصر HTML، بما في ذلك <fencedframe> و<portal>، لتحسين الأمان والأسلوب. سنواصل مشاركة أخبار التقدّم الذي أحرزناه في اقتراح استخدام إطارات مثبّتة.