iframe в HTML: что это, как работает, примеры использования

Iframe — это HTML-элемент, который встраивает другой HTML-документ в текущую страницу в качестве отдельного контекста просмотра. Минимальный синтаксис состоит из одной строки: <iframe src="https://example.com" title="Встроенная страница"></iframe>. На большинстве продакшн-сайтов iframe используются для встраивания видеоплееров, тайлов карт, платежных полей и сторонних виджетов, не предоставляя этим ресурсам доступ к DOM родительской страницы.

Этот элемент является частью HTML начиная с HTML 4 и остается первоклассным элементом HTML Living Standard, поддерживаемого WHATWG. Недавние дополнения, такие как loading="lazy" и атрибут allow для Permissions Policy, сохраняют актуальность элемента для задач производительности и безопасности.

Элемент iFrame в HTML

Элемент iframe создает вложенный контекст просмотра. Каждый фрейм содержит собственный документ, окно, историю навигации и цикл событий. Браузер обрабатывает встроенный документ как отдельную страницу, которая отображается внутри прямоугольной области родительской страницы.

Эта изоляция является источником всех сильных сторон и ограничений iframe. Родительская страница может читать iframe.contentWindow и iframe.contentDocument только в том случае, если обе страницы имеют одинаковый источник. Когда источники различаются, политика same-origin блокирует прямой доступ к DOM, и любое взаимодействие должно проходить через window.postMessage. Изоляция также означает, что сбои, нагрузка на память и выполнение вредоносных скриптов внутри фрейма остаются изолированными от основной страницы.

Каждый фрейм требует реальных ресурсов. В HTML Living Standard отмечается, что каждый контекст просмотра является полноценным окружением документа, и потребление памяти и CPU растет примерно линейно с увеличением количества фреймов на странице. Страница с 30 фреймами несет в 30 раз больше накладных расходов на документы, даже если большинство этих фреймов отображают небольшие элементы интерфейса. Именно эти затраты являются причиной существования атрибута loading="lazy" и того, что на большинстве продакшн-сайтов количество фреймов стараются минимизировать.

Рабочий пример с заголовком для доступности:

<iframe src="https://en.wikipedia.org/wiki/HTML" title="Статья в Википедии об HTML" width="600" height="400" loading="lazy"> </iframe>

Синтаксис и основные атрибуты

Каждому iframe нужен источник. Атрибут src указывает на URL, а атрибут srcdoc содержит встроенный HTML, который переопределяет src, если заданы оба. Пустой фрейм с srcdoc выглядит так:

<iframe srcdoc="<p>Встроенный контент, отображаемый как документ.</p>" title="Встроенная заметка"></iframe>

Атрибут title обязателен на практике. Скринридеры объявляют заголовок, когда пользователь входит во фрейм, а критерий успеха WCAG 2.1 4.1.2 (Имя, роль, значение) требует доступного имени для каждого фрейма. Фреймы без заголовка отмечаются в любой современной проверке доступности.

Справочник атрибутов

В таблице ниже перечислены атрибуты, определенные для элемента iframe в HTML Living Standard.

Атрибут	Назначение	По умолчанию	Примечания
src	URL встроенного документа	пусто	Обязателен для большинства случаев использования
srcdoc	Встроенный HTML, отображаемый как встроенный документ	пусто	Переопределяет src, если заданы оба
sandbox	Применяет дополнительные ограничения к фрейму	отсутствует (без доп. ограничений)	Пустое значение включает все ограничения; токены ослабляют конкретные
allow	Политика разрешений для фрейма	наследует политику родителя	Токены, такие как camera, microphone, payment
allowfullscreen	Разрешает запросы Fullscreen API	отсутствует	Логический атрибут
loading	Подсказка приоритета сети	eager	lazy откладывает загрузку до приближения фрейма к области просмотра
referrerpolicy	Политика заголовка Referer для подзапросов ресурсов	strict-origin-when-cross-origin	8 стандартных значений
name	Имя цели навигации	пусто	Позволяет target="frameName" загружаться во фрейм
title	Доступное имя	пусто	Обязателен для соответствия WCAG
width	Ширина в CSS-пикселях	300	Просто число, без единиц измерения
height	Высота в CSS-пикселях	150	Просто число, без единиц измерения

Атрибуты frameborder, scrolling, longdesc, marginwidth, marginheight и align устарели. Границы, полосы прокрутки и поля теперь обрабатываются с помощью CSS.

Распространенные случаи использования с кодом

Продакшн-iframe обычно относятся к небольшому набору типов. У каждого типа свои требования к атрибутам.

Встраивание видео

Встраивание YouTube — классический пример. Провайдер предоставляет URL на sandbox-совместимом источнике, а родительская страница добавляет разрешения, необходимые плееру.

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Пример видеоплеера" width="560" height="315" loading="lazy" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>

Атрибут allow предоставляет фрейму определенные токены Permissions Policy, чтобы плеер мог запрашивать полноэкранный режим, автовоспроизведение и расширения для зашифрованных медиа, используемые для потоков, защищенных DRM. Без allow современные браузеры блокируют эти API в кросс-доменных фреймах по умолчанию.

Встраивание карт

Фрейм Google Maps соответствует той же схеме с более простыми разрешениями.

<iframe src="https://www.google.com/maps/embed?pb=…" title="Карта местоположения офиса" width="600" height="450" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe>

Пояснение: значение referrerpolicy генерируется конструктором встроенных карт Google, поскольку тайлам карт нужен Referer для проверки домена, на который они встраиваются.

Песочница для пользовательского контента

Блог или сайт сообщества, позволяющий пользователям отправлять HTML-фрагменты, никогда не должен отображать эти фрагменты напрямую. Iframe с песочницей — стандартный карантин.

<iframe srcdoc="<!– HTML, отправленный пользователем –>" title="Предпросмотр пользовательского контента" sandbox> </iframe>

Замечание по безопасности: пустое значение sandbox рассматривает документ как уникальный изолированный источник, блокирует скрипты и формы, предотвращает навигацию верхнего уровня и отключает всплывающие окна. Токены ослабляют конкретные ограничения. Предварительный просмотр только для чтения, который позволяет запускать скрипты, но никогда не разделяет хранилище с родительской страницей, выглядит как sandbox="allow-scripts". Избегайте комбинации sandbox="allow-scripts allow-same-origin" для контента из того же источника, потому что встроенная страница затем может удалить атрибут sandbox через манипуляции с DOM и потерять защиту.

Платежные виджеты

Платежные системы размещают формы сбора данных карт в iframe, чтобы страница продавца никогда не касалась необработанных данных карты. Это выводит продавца из-под действия стандарта PCI DSS в части хранения данных держателей карт.

<iframe src="https://payments.example.com/elements/card" title="Данные карты" width="100%" height="60" allow="payment 'self' https://payments.example.com"> </iframe>

Токен allow="payment …" требуется для работы Payment Request API внутри фрейма.

Вопросы безопасности

Кликджекинг является основной атакой на страницы, которые позволяют встраивать себя во фреймы. Злоумышленник загружает целевую страницу в невидимом iframe поверх поддельного интерфейса, так что клики жертвы попадают на скрытые элементы управления встроенной страницы. В OWASP Clickjacking Defense Cheat Sheet описана эта атака и рекомендуемые меры защиты.

Современной защитой является заголовок Content-Security-Policy с директивой frame-ancestors. Эта директива указывает, какие источники могут встраивать страницу.

Content-Security-Policy: frame-ancestors 'self' https://partner.example.com;

X-Frame-Options — это устаревший заголовок, принимающий значения DENY или SAMEORIGIN. CSP Level 2 заменил его в пользу frame-ancestors. Страницы, которым требуется поддержка старых клиентов, могут устанавливать оба заголовка; браузеры, поддерживающие frame-ancestors, игнорируют X-Frame-Options при наличии заголовка CSP.

Файлы cookie с пометкой SameSite=Lax или SameSite=Strict не отправляются с кросс-сайтовыми iframe-запросами. Эта единственная настройка предотвращает атаки кликджекинга на аутентифицированные сессии, так как скрытый фрейм злоумышленника загружается без сессионного cookie жертвы.

Для страниц, встраивающих сторонний контент, атрибут sandbox является защитой со стороны родительской страницы. Контроль на стороне фрейма и заголовок родительской страницы работают вместе. Директива frame-ancestors указывает, каким источникам разрешено встраивать страницу. Атрибут sandbox указывает, что разрешено делать встроенной странице после загрузки. Оба должны присутствовать на каждом сайте, который серьезно относится к безопасности.

Практически важные токены песочницы: allow-scripts, allow-forms, allow-popups, allow-popups-to-escape-sandbox, allow-modals, allow-top-navigation, allow-pointer-lock, allow-presentation, allow-orientation-lock и allow-downloads. Каждый токен соответствует категории возможностей, которые блокирует пустое значение sandbox. Общее правило — начинать с sandbox без значений и добавлять только те токены, которые необходимы для работы встроенного контента.

Доступность и производительность

Каждый iframe должен иметь атрибут title. Скринридеры объявляют заголовок, когда пользователь входит во фрейм; без него фрейм объявляется как «фрейм» без дополнительной информации, что не соответствует критерию успеха WCAG 2.1 4.1.2.

Для производительности установите loading="lazy" на любом фрейме ниже сгиба. Браузер откладывает сетевой запрос до тех пор, пока фрейм не приблизится к области просмотра. Ленивая загрузка встраиваемого YouTube-видео экономит более 500 КБ при начальной загрузке страницы, согласно статье web.dev iframe-lazy-loading от команды Google Chrome. Этот атрибут безопасно деградирует: старые браузеры игнорируют его и загружают eagerly.

<iframe src="https://example.com" title="Example" loading="lazy"></iframe>

Альтернативы элементу iFrame

Элемент <embed> внедряет типизированные внешние ресурсы, такие как PDF, и предоставляет меньше контроля, чем iframe. Элемент <object> делает то же самое с запасным содержимым и параметрами, что подходит для устаревшего контента в стиле плагинов. Для медиа, в частности, правильными элементами являются <video> и <audio>; оба проще, чем iframe, и интегрируются со встроенными элементами управления браузера. API Picture-in-Picture отсоединяет элемент <video> в плавающее окно и иногда путают с встраиванием видео через iframe, но эти два элемента решают разные задачи.

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

Для чего используется iframe?

Iframe встраивает другой HTML-документ внутрь текущей страницы. Обычные случаи использования включают видеоплееры, тайлы карт, рекламные блоки, поля для оплаты, сторонние формы и изолированные предпросмотры пользовательского контента. Этот элемент предоставляет встроенному источнику полный контекст просмотра, сохраняя его изолированным от родительской страницы.

Используются ли iframe в 2026 году?

Да. Элемент iframe является частью текущего HTML Living Standard и широко применяется в видео, картах, платежах и доставке рекламы. Новые возможности, такие как loading="lazy", атрибут allow в Permissions Policy и frame-ancestors, поддерживают соответствие элемента современным требованиям производительности и безопасности.

В чем разница между iframe и embed?

Элемент iframe встраивает полный HTML-документ с собственным контекстом просмотра, скриптингом и DOM. Элемент embed обрабатывает типизированные внешние ресурсы, такие как PDF и устаревшие форматы плагинов, и предоставляет меньше возможностей управления. Iframe — правильный выбор для HTML, embed — для не-HTML-ресурсов, которым требуется средство просмотра.

Как предотвратить кликджекинг на моем сайте?

Установите заголовок Content-Security-Policy с директивой frame-ancestors, перечисляющей источники, которым разрешено встраивать вашу страницу. Добавьте X-Frame-Options: SAMEORIGIN в качестве запасного варианта для старых клиентов. Помечайте сессионные куки как SameSite=Lax или SameSite=Strict, чтобы они не отправлялись при межсайтовых iframe-запросах.

Стоит ли использовать loading="lazy" на iframe?

Да, для любых iframe ниже сгиба. Этот атрибут откладывает сетевой запрос до тех пор, пока фрейм не приблизится к области просмотра, и web.dev зафиксировал экономию более 500 КБ на одном встраиваемом YouTube-видео при начальной загрузке. Старые браузеры безопасно игнорируют этот атрибут и загружают фрейм eagerly.

Вредны ли iframe для SEO?

Поисковые системы индексируют содержимое внутри iframe отдельно от родительской страницы, поэтому встроенный контент не засчитывается для родительской страницы. Используйте iframe для вспомогательных материалов, таких как видео, карты и виджеты, и размещайте основной контент, который должен ранжироваться, вне любого фрейма.