يُعد المحتوى المضمّن أفضل طريقة لإبقاء المستخدمين على موقعك الإلكتروني مع مشاركة محتوى من صفحات أو مواقع إلكترونية أخرى. يمكن أن يكون هذا المحتوى صغيرًا جدًا، مثل تغريدة مضمّنة، تُعرض بأسلوب 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 بعض واجهات برمجة التطبيقات المهمة للمحتوى المضمّن. للسماح باستخدام واجهة برمجة تطبيقات تم إيقافها، يمكنك إضافة وسيطة بشكل صريح إلى السمة 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 مصدرًا مبهمًا، وهو نظام أسماء موارد موحّد (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>. كان كلا العنصرَين يُستخدمان بشكل شائع لعرض مكوّنات Flash الإضافية، ولكن كانا يُستخدمان أيضًا لعرض عناصر HTML أخرى (على غرار الإطارات المضمّنة).
أصبحت عناصر أخرى، مثل <canvas> و<audio> و<video> و<svg>، غير صالحة للاستخدام بسبب توفّر العنصرين <object> و<applet>.
على الرغم من أنّه لم يتم إيقاف <object> و<embed> نهائيًا بعد، من الأفضل تجنُّبهما، لا سيما أنّهما يتضمّنان بعض السلوكيات الغريبة.
تم إزالة <applet> من مواصفات HTML في عام 2017.
الخاتمة
يمكنك تضمين المحتوى بشكل آمن على أي موقع إلكتروني باستخدام مواصفات إطار iframe الحالية. تم اقتراح المزيد من عناصر HTML، بما في ذلك <fencedframe> و<portal>، لتحسين الأمان والأسلوب. سنواصل مشاركة معلومات عن مستوى تقدّمنا في اقتراح Fenced Frames مع تقدّمه.