Веб полон заимствований. Сегодня сложно представить сайт без встроенного видео, карты, документа или чата поддержки. И всё это — не магия, а работа одного старого, почти забытого элемента HTML —<iframe>.
Немного истории
Iframe появился в спецификации HTML 4.0 в 1997 году как ответ на устаревшие <frameset> и <frame>. Фреймы тогда использовались для разбиения страницы на области (например, меню слева и контент справа), но имели массу проблем: невозможно было сохранять состояние, работать с закладками, SEO рушилось.
Iframe решил часть этих проблем: он стал встраиваемым контейнером, который можно размещать где угодно в разметке, а не только в специальных наборах <frameset>.
Со временем фреймы из навигации исчезли, но остались как инструмент интеграции внешних сервисов.
Именно iframe позволил появиться первому поколению встраиваемых виджетов — от баннеров и платёжных форм до YouTube-плееров.
Как работает iframe
Каждый iframe создаёт новый контекст браузера — фактически это отдельная вкладка, только «внутри страницы».
Он имеет собственное дерево DOM, изолированные стили, cookies и политику безопасности.
Если встроенный сайт находится на другом домене, действует политика same-origin — это значит, что родитель и iframe не могут обращаться к данным друг друга напрямую.
Iframe используется даже для защиты от взлома. Некоторые сервисы помещают чувствительные формы в изолированные iframe, чтобы скрипты страницы не могли перехватить ввод.
Для контролируемого обмена между ними используется метод:
Он позволяет безопасно передавать данные между страницами, даже если они принадлежат разным сайтам.
Примеры использования
Если нужно встроить видео с YouTube — достаточно одной строки:
Для карты — похожим образом:
Никаких SDK, ключей и скриптов — всё работает «из коробки».
Также он используется, например, для размещения платёжных форм (Stripe, PayPal, YooKassa), которые изолируют все операции и токены, чтобы ваш сайт не касался пользовательских данных.
iframe подходит для виджетов — чатов, форм обратной связи или систем бронирования. Такие элементы работают автономно и не конфликтуют с вашими стилями и скриптами.
В админ-панелях iframe часто применяют для отображения редакторов и превью: администратор может видеть, как будет выглядеть страница до публикации, без риска повредить код.
Кроме того, iframe активно используется для встраивания документов и SaaS-сервисов — Google Docs, Figma, Notion, GitHub Gist и других, где требуется безопасно показать внешний контент прямо на вашем сайте.
Как использовать
Самый простой пример:
src — ссылка на страницу, которую вы хотите встроить.
width и height — размеры окна.
Если вы вставляете iframe в адаптивный макет, не задавайте фиксированные пиксели — используйте проценты и относительные размеры.
Iframe по умолчанию не подстраивается под экран. Чтобы сделать его адаптивным, оберните в контейнер с пропорциональным соотношением сторон:
Это распространённый приём для видео, карт и презентаций.
Контейнер держит пропорцию (в данном случае 16:9), а iframe растягивается на всю ширину родителя. Атрибут allowfullscreen разрешает переход в полноэкранный режим.
Если нужно не подгружать страницу, а вставить кусок HTML прямо в iframe. Для этого есть атрибут srcdoc, в который передают непосредственно HTML код. Так удобно показывать предварительный просмотр кода, шаблонов или сообщений.
Iframe — это чужой код в вашем DOM, поэтому важно ограничивать его права. Для этого служит атрибут sandbox. Без атрибутов sandbox блокирует почти всё: скрипты, формы, перенаправления. А разрешения (allow-forms, allow-scripts, allow-same-origin) добавляются вручную, только если они нужны.
Sandbox iframe стал прообразом современных механизмов безопасности браузеров. Позже на его принципах появились Content Security Policy (CSP) и другие меры защиты.
Также стоит упомянуть про атрибут loading="lazy" который откладывает загрузку iframe до его появления на экране, так как внешние сервисы бывают очень тяжелыми и могут повлиять на скорость загрузки страницы.
Немного о минусах
Iframe нельзя назвать идеальным решением. У него есть особенности, которые важно учитывать ещё на этапе проектирования.
Во-первых, поисковики не индексируют содержимое внутри iframe. Всё, что находится в нём, считается отдельной страницей, и поисковая система видит только сам контейнер, а не его контент. Поэтому использовать iframe для размещения важной информации — плохая идея: ни SEO, ни доступность от этого не выиграют.
Во-вторых, адаптивная вёрстка с iframe требует особого подхода. Встроенные ресурсы не подстраиваются под размеры контейнера автоматически, и чтобы iframe корректно выглядел на разных экранах, нужно дополнительно управлять его размерами через CSS или JavaScript. Без этого контент может обрезаться или создавать лишние полосы прокрутки.
Наконец, часть сайтов просто не разрешает своё встраивание. Это ограничение задаётся заголовком X-Frame-Options или политикой Content-Security-Policy. В таких случаях браузер просто не покажет страницу внутри вашего iframe — даже если код написан правильно.
Тем не менее, iframe остаётся надёжным инструментом для интеграции. Когда нужно встроить платёжную форму, виджет или защищённый интерфейс, он обеспечивает изоляцию, безопасность и независимость от кода основного сайта. Главное — использовать его осознанно: не для «удобной вставки», а для тех задач, где это действительно оправдано.
Выводы
Iframe остаётся актуальным инструментом веб-разработки, когда нужно встроить внешний контент безопасно и без вмешательства в код сайта. Он удобен для интеграции сервисов, виджетов и превью, но требует осознанного применения из-за ограничений с SEO, адаптивностью и политикой встраивания.
Используя iframe правильно, можно получить простой и надёжный способ расширить функциональность сайта, сохранив контроль и безопасность.