وضع الحماية لإطارات iframe وسياسة الأذونات

يجب ألا يمتلك المحتوى غير الموثوق داخل iframe، مثل أدوات الجهات الخارجية ومعاينات HTML التي يرسلها المستخدم والألعاب المضمّنة، كامل إمكانات المتصفح. تقيّد السمة sandbox ما يستطيع iframe فعله، ما يقلل الضرر إذا اتضح أنه خبيث.

يطبّق <iframe sandbox src="..."> جميع القيود من دون قيمة: لا برامج نصية، ولا نماذج، ولا نوافذ منبثقة، ولا تنقّل على مستوى الصفحة، ولا مكونات إضافية، ويُعامل على أنه مصدر فريد. استخدم هذا كنقطة بداية، ثم أضف فقط ما يحتاج إليه المحتوى المضمّن.

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

تفعّل allow-scripts لغة JS. وتفعّل allow-forms إرسال النماذج. وتفعّل allow-popups استخدام window.open. وتمنع allow-same-origin معاملة iframe كمصدر فريد، وهي مطلوبة لاستخدام localStorage. ويسمح allow-top-navigation بالتنقّل في النافذة الأصلية.

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

تتحكم Permissions Policy، التي كانت تُعرف سابقًا باسم Feature Policy، في واجهات برمجة التطبيقات في المتصفح، مثل الكاميرا والميكروفون وتحديد الموقع الجغرافي وملء الشاشة والتشغيل التلقائي، التي يمكن للصفحة وإطارات iframe فيها استخدامها. اضبطها على الصفحة الأصلية: تمنع Permissions-Policy: geolocation=() تحديد الموقع الجغرافي في كل مكان.

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

المواصفات قائمة متطورة باستمرار — camera وmicrophone وgeolocation وaccelerometer وgyroscope وmagnetometer وpayment وusb وmidi وfullscreen وautoplay وpicture-in-picture، إلى جانب عشرات الميزات الأخرى. راجع القائمة وامنع صراحةً كل ما لا تحتاج إليه صفحتك.

تُبلغ Permissions-Policy عن الانتهاكات إلى نقطة نهاية مهيّأة، مثل report-uri في CSP. استخدم ذلك أثناء عملية ترحيل: فعّل سياسة صارمة، وراقب ما يتعطل، ثم خففها تدريجيًا وبطريقة مدروسة للميزات المشروعة.

بالنسبة إلى الصفحات الحساسة، اضبط Cross-Origin-Opener-Policy: same-origin وCross-Origin-Embedder-Policy: require-corp. يعزل ذلك الصفحة عن النوافذ من مصادر مختلفة، ويحميها من هجمات التوقيت على نمط Spectre، ويمكّن SharedArrayBuffer.

تعمل sandbox وPermissions Policy وCSP وCOOP/COEP معًا كطبقات حماية. تحمي كل واحدة منها من فئة مختلفة من الهجمات. إن تضمين محتوى من جهات خارجية محفوف بالمخاطر إلى حد لا تكفي معه أي وسيلة تخفيف واحدة — فاجمع بينها حتى يعالج أحدها أي تجاوز لوسيلة أخرى.

استخدم لوحتي Network وIssues في Chrome DevTools لكشف انتهاكات sandbox والأذونات. تكون انتهاكات كثيرة صامتة، إذ تعيد واجهة API القيمة undefined أو ترفض الـ promise فحسب؛ وتساعد نقاط الإبلاغ الصريحة في اكتشافها في بيئة الإنتاج.

فعّل sandbox لإطارات iframe افتراضيًا، وأضف فقط الرموز التي يحتاج إليها المحتوى. تجنّب allow-scripts+allow-same-origin مع المحتوى غير الموثوق. استخدم Permissions Policy لمنع واجهات API القوية على مستوى الموقع، واستخدم سمة allow في iframe لمنح الاستثناءات. ادمج ذلك مع CSP وCOOP/COEP لتحقيق دفاع متعدد الطبقات.