Тег iframe в HTML¶
iframe (от англ. inline frame — «строка встроенной рамки») — элемент разметки HTML, предназначенный для встраивания одного HTML-документа в другой. Создаётся тегом <iframe> и отображает содержимое указанного источника (URL) внутри прямоугольной области — «рамки» — на странице. Принадлежит к категории встроенных (страничных) элементов и регламентирован стандартами WHATWG HTML Living Standard и Рекомендациями W3C.
¶История
Тег <iframe> впервые появился в браузере Internet Explorer 2.0 (1995) как проприетарное расширение Microsoft. В 1997 году элемент был включён в спецификацию HTML 4.0, получив официальное название inline frame. В HTML 4.01 iframe был отнесён к «нестандартным» элементам, а для встраивания документов предлагался <object> с <embed>. Несмотря на это, поддержка iframe оказалась фактически универсальной, и в HTML5 элемент был официально реабилитирован и получил чёткое описание в стандарте WHATWG.
¶Устройство и синтаксис
Минимальный пример использования:
``html <iframe src="https://example.com"; width="640" height="360"></iframe> ``
Атрибут src задаёт URL встраиваемого документа. Внутри тегов можно поместить текст-запасной вариант: браузеры, не поддерживающие iframe, отобразят его вместо рамки.
¶Основные атрибуты
| Атрибут | Назначение |
|---|---|
src | URL встраиваемого документа |
srcdoc | HTML-код документа прямо в атрибуте (приоритетнее src) |
name | Имя рамки, используется как цель для ссылок с target |
width, height | Размеры области в пикселях или процентах |
sandbox | Ограничение возможностей встроенного документа |
allow | Управление разрешениями (камера, микрофон и т. д.) |
loading | Ленивая загрузка (lazy или eager) |
referrerpolicy | Политика передачи заголовка Referer |
allowfullscreen | Разрешение полноэкранного режима |
title | Текстовое описание для скринридеров |
¶Безопасность
iframe — основной вектор атак вида clickjacking: злоумышленник размещает легитимный сайт в прозрачной рамке поверх поддельной страницы, и пользователь, не подозревая, кликает по элементам настоящего сервиса. Для противодействия серверы выставляют заголовок X-Frame-Options со значениями DENY, SAMEORIGIN или ALLOW-FROM, а также используют политику Content-Security-Policy с директивой frame-ancestors.
Атрибут sandbox (появился в HTML5) позволяет ограничить встроенный документ: запретить скрипты, формы, модальные окна, доступ к плагинам и т. д. Значение sandbox="allow-scripts allow-same-origin" снимает большую часть ограничений и используется с осторожностью.
¶Применение
- Встраивание внешних сервисов — карты, видеоплееры, формы, виджеты. Платформы вроде YouTube и ВКонтакте предоставляют готовые фрагменты кода с iframe для встраивания роликов.
- Рекламные системы — большинство рекламных форматов размещается через iframe, что изолирует рекламный код от основной страницы.
- Предпросмотр документов — PDF, изображения, черновики страниц.
- Встраивание страниц других доменов — при условии, что сервер источника разрешает это заголовком
X-Frame-Options. - Микрофронтенды — iframe используется как механизм изоляции автономных интерфейсных модулей.
¶Ограничения
- iframe не наследует стили родительского документа; оформление встроенного документа задаётся внутри него самого.
- Высота содержимого не определяется автоматически — требуется явное значение или JavaScript-решения.
- Поисковые системы индексируют содержимое iframe хуже, чем основной документ.
- Часть функций (например, изменение адресной строки) недоступна из-за политики одинакового источника.
¶iframe и аналоги
<object> и <embed> решают схожие задачи, но ориентированы прежде всего на мультимедийные плагины (PDF, Flash). В HTML5 их функциональность частично перекрывается нативными элементами <video> и <audio>. Для встраивания HTML-документа iframe остаётся стандартным выбором.
Источники: спецификация WHATWG HTML Living Standard; документация MDN Web Docs (Mozilla); Рекомендации W3C по HTML 4.01; RFC 7034 (X-Frame-Options).