المحتوى المضمَّن هو أفضل طريقة لإبقاء المستخدمين على موقعك الإلكتروني وأن يشاركوا المحتوى من صفحات أو مواقع إلكترونية أخرى. وقد يكون حجمها صغيرًا مثل تغريدة مضمّنة تظهر بأسلوب Twitter وتنسيقه. وقد يصل حجمها إلى موقع إلكتروني منفصل تمامًا ومضمّن في موقعك الإلكتروني، مثل متجر مضمَّن في Shopify حيث يمكن للزوار إجراء عملية شراء بدون مغادرة موقعك الإلكتروني.
والآن أكثر من أي وقت مضى، من المهم أن تظل مواقعنا آمنة عند تضمين المحتوى.
هناك العديد من الطرق التي يمكن للمطورين من خلالها تضمين محتوى على موقع الويب. والأسلوب الأكثر شيوعًا هو استخدام <iframe> التي تتيح لك تضمين أي محتوى على موقعك الإلكتروني باستخدام عنوان URL فقط. ويمكن إضافة السمة sandbox لجعل iframe أكثر أمانًا.
بدلاً من ذلك، يمكنك استخدام عنصر HTML مقترَح:
- تم اقتراح
<fencedframe>كطريقة للحفاظ على الخصوصية لتضمين محتوى تابع لجهة خارجية. - تم اقتراح استخدام
<portal>لإجراء عمليات انتقال أكثر سلاسة للصفحات.
يمكنك مواصلة القراءة للتعرّف على كيفية تحسين أمان المحتوى المضمَّن.
التضمين مع إطارات iframe
يمكن استخدام إطارات iframe لجميع أنواع حالات الاستخدام، مثل إضافة خرائط أو نماذج إلى صفحة جهة اتصال وعرض الإعلانات.
<iframe src="https://example.com/maps"></iframe>
ويكون لكل إطار iframe سياق التصفح الخاص به، مع سجلّ الجلسة ومستند خاص به. ويُشار إلى السياق الذي يتضمّن إطار iframe على أنّه سياق التصفّح parent.
يمكن للمحتوى التابع لجهة خارجية المعروض في إطار 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>
قد يعمل وضع الحماية على عدم توفّر واجهات برمجة تطبيقات معيّنة مهمة بالنسبة إلى المحتوى المضمّن. للسماح بواجهة برمجة تطبيقات تم إيقافها، يمكنك إضافة وسيطة بشكل صريح إلى سمة وضع الحماية.
<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 للصفحة الرئيسية في شريط العناوين، بغض النظر عن مصدر الإطارات الفردية العديدة. وهذا جعل من الصعب مشاركة الروابط المؤدية إلى المحتوى داخل الموقع. ومنذ ذلك الحين، تم إيقاف
واجهات برمجة التطبيقات هذه.
وقد تم أيضًا استخدام تقنيات المكوّنات الإضافية، مثل عنصر <applet> في Java،
لتغطية حالات استخدام أخرى. وقد تم استبداله لاحقًا بالعنصر <object>. وكان هذان العنصران يُستخدمان بشكل شائع لعرض مكونات Flash الإضافية، ومع ذلك كانا يُستخدمان أيضًا لعرض عناصر HTML أخرى (على نحو يشبه إطارات iframe).
العناصر الأخرى، مثل <canvas> و<audio> و<video> و<svg>، عرضت عناصر <object> و<applet> قديمة.
على الرغم من أنّ <object> و<embed> لم يتم إيقافهما رسميًا بعد، ننصحك
بتجنُّبهما، خاصةً لأنّهما لديهما بعض السلوكيات الغريبة.
تمّت إزالة <applet> من مواصفات HTML في عام 2017.
الخلاصة
يمكنك تضمين المحتوى بشكل آمن في أي موقع إلكتروني باستخدام مواصفات إطار iframe الحالية. وتم اقتراح المزيد من عناصر HTML، بما في ذلك <fencedframe> و<portal>، لتحسين الأمان والنمط. وسنواصل مشاركة مستوى التقدُّم في
اقتراح الإطارات المعتمِدة أثناء تقدُّمه.
صورة رئيسية من إعداد جاكسون سو