عنصر iframe وsrc وsandbox

يضمّن العنصر <iframe> مستند HTML آخر داخل الصفحة الحالية. ويملك كل iframe سياق تصفح وDOM ونطاق JavaScript خاصًا به. ولا يمكن للمحتوى داخل iframe الوصول إلى DOM الخاص بالصفحة الأب دون إذن صريح.

اضبط الخاصية src على عنوان URL المراد تضمينه: <iframe src="https://example.com" width="800" height="600">. ينشئ iframe سياق تصفح جديدًا. وتُعد الخاصية title مطلوبة لإتاحة الوصول: title="Embedded map".

تفرض sandbox قيودًا على محتوى iframe، إذ تعطل النصوص البرمجية والنماذج والنوافذ المنبثقة والإضافات افتراضيًا. أضف أذونات محددة لاستعادة الإمكانات المطلوبة: sandbox="allow-scripts allow-same-origin".

allow-scripts: يفعّل JavaScript. allow-same-origin: يسمح بمعاملة iframe على أنه من المصدر نفسه، وهو مطلوب للوصول إلى localStorage. allow-forms: يفعّل إرسال النماذج. allow-popups: يسمح باستخدام window.open(). امنح الحد الأدنى من الأذونات المطلوبة فقط.

لا يمكن لإطارات iframe من مصادر مختلفة الوصول إلى DOM الأب؛ إذ تؤدي parent.document إلى خطأ أمني. ويستخدم التواصل بين الإطارات من مصادر مختلفة postMessage: iframe.contentWindow.postMessage(data, origin).

أرسل رسائل من الصفحة الأب إلى iframe باستخدام: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). واستمع إليها داخل iframe باستخدام: window.addEventListener("message", handler). تحقّق دائمًا من event.origin قبل معالجة الرسالة.

تؤجل loading="lazy" على إطارات iframe تحميلها حتى تقترب من نافذة العرض، ما يقلل وقت التحميل الأولي للصفحة. وهي مفيدة للخرائط وتضمينات الفيديو وعناصر وسائل التواصل الاجتماعي الموجودة أسفل الجزء المرئي من الصفحة وغير الظاهرة فورًا.

يحمّل كل iframe مستند HTML وملفات CSS وJavaScript والأصول الخاصة به بشكل منفصل، ما يفرض تكلفة كبيرة على الموارد. تجنب استخدام iframes للمحتوى الذي يمكن تضمينه كمقتطف. حمّل iframes الموجودة أسفل الجزء الظاهر من الصفحة عند الحاجة. ضع في اعتبارك استخدام نمط الواجهة البديلة (اعرض عنصراً نائباً وحمّل المحتوى عند النقر).

تحكّم في سلوك تمرير iframe: scrolling="no" يعطّل أشرطة التمرير (وهو استخدام مهجور؛ استخدم CSS overflow: hidden على iframe). النهج الحديث هو ضبط ارتفاع iframe ليتطابق مع ارتفاع المحتوى، ما يلغي الحاجة إلى أشرطة التمرير الداخلية.

تمنح السمة allow ميزات Permissions Policy لـ iframe: allow="camera; microphone; fullscreen". يتيح ذلك لـ iframe طلب الوصول إلى الكاميرا والميكروفون وواجهة fullscreen API، حتى عندما لا يستخدم الأصل الحاوي هذه الميزات.

يوفّر YouTube وGoogle Maps رموز تضمين باستخدام iframe. وتتضمن هذه الرموز سمات allow لملء الشاشة والتشغيل التلقائي. أضف دائماً title="Video title" لإتاحة الوصول إلى قارئات الشاشة. لا تُضاف السمة sandbox عادةً إلى رموز تضمين الجهات الخارجية — راجع وثائقها للحصول على إرشادات الأمان.

ماذا تفعل السمة sandbox في iframe افتراضياً عند عدم تحديد أي قيم؟

تضمّن iframes مستندات خارجية داخل سياقات تصفح معزولة. تقيّد السمة sandbox إمكانات iframe — لذا امنح فقط أقل الأذونات المطلوبة. يتيح postMessage التواصل الآمن بين المصادر المختلفة. يؤجّل التحميل الكسول تكلفة الموارد الخاصة بـ iframes الموجودة أسفل الجزء الظاهر من الصفحة. وتمنح السمة allow ميزات Permissions Policy لعمليات التضمين الموثوقة من جهات خارجية.