Перевірка вбудовування 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' або конкретний список джерел — решта конфігурації залишиться без змін.

Відомі нюанси роботи платформ

Попри загальні правила роботи з заголовками, деякі відомі платформи мають свої специфічні особливості, про які варто знати, перш ніж робити висновок щодо блокування чи можливості вбудовування лише на основі заголовків.

Поширені випадки використання

• Визначайте, чи можна вбудувати сторонній віджет, панель керування чи документ у ваш власний продукт ще до написання інтеграційного коду.
• Переконайтеся, що ваш власний сайт надсилає заплановану політику X-Frame-Options або CSP frame-ancestors.
• Перевірка захисту від клікджекінгу: з'ясуйте, чому сторінка відображає about:blank або повідомлення про відмову всередині iframe.
• Пакетна перевірка потенційних URL-адрес під час агрегації контенту чи інтеграції порталу; використовуйте історію сеансу для повторного перегляду результатів.
• Підготовка до аудитів безпеки або тестувань на проникнення: задокументуйте політику фреймінгу для зовнішніх залежностей.

Часті питання (FAQ)