iframe: встраивание контента

<iframe> (inline frame) — элемент для встраивания другого HTML-документа или веб-страницы внутрь текущей страницы в отдельном browsing context.

Зачем нужно

<iframe> позволяет встраивать сторонний контент — видео, карты, виджеты оплаты, интерактивные демо — без необходимости воспроизводить его логику на своём сайте. При этом встроенный контент изолирован от родительской страницы: JavaScript внутри iframe не имеет доступа к DOM родителя (если не тот же origin).

Где используется

  • Встраивание YouTube / Vimeo видео
  • Карты Google Maps, Яндекс.Карты
  • Виджеты оплаты (Stripe, PayPal)
  • Демо кода (CodePen, StackBlitz, JSFiddle)
  • Виджеты обратной связи, чатов, форм сторонних сервисов

Синтаксис и атрибуты

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560"
  height="315"
  title="Rick Astley - Never Gonna Give You Up"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

Ключевые атрибуты:

Атрибут Назначение
src URL встраиваемого документа
title Обязателен для a11y — screen reader читает его
width, height Размеры (лучше управлять через CSS)
loading="lazy" Отложенная загрузка — важно для производительности
allowfullscreen Разрешает полноэкранный режим
sandbox Ограничивает возможности iframe
allow Политика разрешений (Permissions Policy)
referrerpolicy Управляет заголовком Referer

Атрибут sandbox — безопасность

<!-- Максимальные ограничения (почти полная изоляция) -->
<iframe src="untrusted.html" sandbox></iframe>

<!-- Разрешить скрипты и формы, запретить всё остальное -->
<iframe src="widget.html" sandbox="allow-scripts allow-forms"></iframe>

Значения sandbox:

  • allow-scripts — JavaScript
  • allow-forms — отправка форм
  • allow-same-origin — доступ к cookies и localStorage
  • allow-popups — открытие новых окон
  • allow-top-navigation — переход в родительский фрейм

Адаптивный iframe (16:9)

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/..." title="Видео" allowfullscreen loading="lazy"></iframe>
</div>

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

Частые ошибки

Ошибка Почему плохо Как правильно
Нет атрибута title Screen reader не может идентифицировать iframe Всегда добавляй осмысленный title
Нет loading="lazy" Iframe загружается сразу, блокирует LCP Добавляй loading="lazy" для нижних iframe
Нет sandbox для чужого контента Потенциальная XSS-атака Добавляй sandbox с минимальными разрешениями
Встраивание через <object> или <embed> Устаревший подход, хуже поддержка a11y Используй <iframe>

Связанные темы

Ресурсы