أداة فحص تضمين iframe

ما الذي يحدد إمكانية تضمين صفحة ما؟

دليل سريع: تهيئة رؤوس الاستجابة

إذا كنت تملك أو تدير الموقع، يمكنك التحكم في طريقة تضمينه مباشرةً عبر رؤوس استجابة الخادم.

ملاحظة: حلّ إعداد CSP frame-ancestors محل X-Frame-Options. وعند توفر الاثنين معًا، تكون لسياسات CSP الأولوية — لذا يُفضّل الاعتماد على frame-ancestors.

كيف يكتشف الخادم أن الطلب قادم من iframe؟

• Sec-Fetch-Dest: document — تنقل رئيسي (على مستوى الصفحة العليا)، وليس داخل أي إطار فرعي.
• Sec-Fetch-Dest: iframe — يتم جلب الطلب وعرضه داخل عنصر `<iframe>` الفرعي.
• Sec-Fetch-Dest: frame — يتم التحميل داخل عناصر `<frame>` القديمة (إطارات مجموعات الصفحات frameset).
• Sec-Fetch-Dest: embed / object — يتم التحميل داخل عنصر `<embed>` أو `<object>`.

أمثلة تكوين الخادم: منع تضمين iframe

توضح الأمثلة البرمجية أدناه كيفية ضبط الخادم أو البيئة البرمجية لمنع تضمين الصفحة في أي إطار فرعي كليًّا (X-Frame-Options: DENY + CSP frame-ancestors 'none')، وهو الإعداد الأكثر تشددًا مقارنة بالخيارات في الدليل السريع أعلاه.

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

إذا كنت ترغب في السماح لموقعك فقط (أو بقائمة سماح محدودة) بتضمين الصفحة بدلًا من حظر الكل؟ قم باستبدال DENY بـ SAMEORIGIN، واستبدال 'none' بـ 'self' أو بقائمة صريحة للموافقة — بينما تظل باقي إعدادات التكوين دون تغيير.

نقاط هامة حول المنصات الشائعة

بالإضافة إلى القواعد العامة لرؤوس HTTP، تختلف بعض المنصات العالمية في تعاملها الخاص — وهو أمر جدير بالعلم قبل الاستنتاج بأن المحتوى "مُحظور" أو "قابل للتضمين" اعتمادًا على الرؤوس وحدها.

حالات الاستخدام الشائعة

• حدد مسبقًا ما إذا كان بالإمكان تضمين أداة أو لوحة معلومات أو مستند تابع لجهة خارجية في منتجك قبل كتابة كود التكامل.
• تأكد من أن موقعك يرسل سياسة `X-Frame-Options` أو `CSP frame-ancestors` التي تقصدها.
• استكشاف أخطاء حماية النقر الخادع (Clickjacking): لفهم سبب عرض الصفحة لـ about:blank أو رسالة رفض داخل عنصر iframe.
• فحص عناوين URL المُرشّحة دفعةً واحدة أثناء تجميع المحتوى أو دمج البوابة، مع إمكانية الرجوع إلى النتائج سابقاً عبر سجل الجلسة.
• الاستعداد لمراجعات الأمان أو اختبارات الاختراق من خلال توثيق سياسة وضع الإطارات (Framing Policy) للمكونات الخارجية المعتمدة.

الأسئلة الشائعة