إنّ المحتوى المضمّن هو أفضل طريقة لإبقاء المستخدمين على موقعك الإلكتروني، مع مشاركة المحتوى من صفحات أو مواقع إلكترونية أخرى. ويمكن أن يكون هذا المحتوى صغيرًا مثل تغريدة مضمّنة، تظهر بأسلوب وتنسيق 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>
"الإطارات المُحدودة" هي اقتراح ضمن "مبادرة حماية الخصوصية" يقترح أن تقسم المواقع الإلكترونية ذات المستوى الأعلى البيانات. تهدف العديد من اقتراحات "مبادرة حماية الخصوصية" إلى تلبية حالات الاستخدام على مستوى المواقع الإلكترونية، بدون استخدام ملفّات تعريف الارتباط التابعة لجهات خارجية أو آليات تتبُّع أخرى. قد تتطلّب بعض واجهات برمجة تطبيقات "مبادرة حماية الخصوصية" اختيار مستندات لعرضها ضمن إطار محدود.
على سبيل المثال، سيتم إنشاء إطار مُغلق للفائز في مزاد الإعلانات في 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>، لتحسين الأمان والأسلوب. سنواصل مشاركة أخبار التقدّم الذي أحرزناه في اقتراح استخدام إطارات محدودة.