Проверка встраивания iframe

От чего зависит возможность встраивания страницы?

Быстрый справочник: настройка заголовков ответа

Если вы являетесь владельцем сайта, управляйте встраиванием напрямую через заголовки ответа.

Примечание: X-Frame-Options устарел и заменён директивой CSP frame-ancestors. Если оба заголовка присутствуют, приоритет отдаётся CSP — рекомендуется использовать frame-ancestors.

Как сервер определяет, что запрос пришёл из iframe?

• Sec-Fetch-Dest: document — навигация верхнего уровня, вне любых фреймов.
• Sec-Fetch-Dest: iframe — запрос загружается внутри элемента <iframe>.
• Sec-Fetch-Dest: frame — загружается внутри устаревшего тега <frame> (фреймсета).
• Sec-Fetch-Dest: embed / object — загружается внутри элементов <embed> или <object>.

Примеры конфигурации сервера: блокировка встраивания в iframe

Приведённые ниже примеры показывают, как настроить каждый веб-сервер или фреймворк для полной блокировки встраивания в 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.
• Диагностика защиты от кликджекинга: выясните, почему страница отображает `about:blank` или сообщение об отказе внутри iframe.
• Пакетная проверка потенциальных URL при агрегации контента или интеграции с порталом: используйте историю сеанса для возврата к результатам.
• Подготовьтесь к аудитам безопасности или тестированию на проникновение, задокументировав политику фрейминга внешних зависимостей.

Часто задаваемые вопросы