Элемент HTML iframe¶

iframe (от англ. inline frame — «встроенный фрейм») — это HTML-элемент, предназначенный для встраивания одного HTML-документа внутрь другого. Он позволяет отображать на веб-странице сторонний контент (веб-страницы, видео, карты, документы) в виде отдельной прямоугольной области, не покидая текущую страницу. Технология является частью стандарта HTML и поддерживается всеми современными браузерами.

¶История и развитие

Концепция фреймов появилась в середине 1990-х годов. В 1996 году компания Microsoft представила элемент iframe в Internet Explorer 3.0, а вскоре он был включён в черновую спецификацию HTML 4.0. В отличие от классических «фреймов» (frameset), которые делили окно браузера на независимые части и требовали отдельной структуры документа, iframe создавал плавающую область внутри обычной страницы, что оказалось более гибким решением. С приходом стандарта HTML5 элемент был стандартизирован и получил дополнительные атрибуты для безопасности и производительности.

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

Базовый синтаксис элемента выглядит следующим образом:

``html <iframe src="https://example.com"; width="600" height="400" title="Описание"></iframe> ``

Основные атрибуты:

• src — обязательный атрибут, указывающий URL встраиваемого ресурса.
• width и height — задают размеры области в пикселях или процентах (в CSS).
• title — обеспечивает доступность для скринридеров, описывая содержимое фрейма.
• allowfullscreen — разрешает полноэкранный режим (например, для видео).
• loading — принимает значения lazy (отложенная загрузка) или eager (немедленная загрузка).
• sandbox — ограничивает функциональность встроенного документа (запрет скриптов, форм, всплывающих окон).
• referrerpolicy — управляет передачей HTTP-заголовка Referer.
• allow — задаёт политику разрешений для функций браузера (камера, микрофон, геолокация) через Permissions Policy.

¶Применение

iframe используется для решения широкого круга задач:

• Встраивание мультимедиа — видеоплееры YouTube, Vimeo, аудиоплееры SoundCloud.
• Интерактивные карты — сервисы Яндекс Карты и Google Maps предоставляют код для встраивания.
• Рекламные баннеры — рекламные сети используют фреймы для изоляции рекламного кода от основного сайта.
• Платёжные системы и виджеты — формы оплаты, чаты поддержки, кнопки социальных сетей.
• Документы и приложения — просмотр PDF-файлов, офисных документов (Google Docs, Microsoft Office Online).
• Интеграция сторонних сервисов — комментарии (Disqus), формы (Google Forms), редакторы кода (CodePen).

¶Безопасность

Встраивание стороннего контента создаёт риски безопасности. Основные механизмы защиты:

¶Атрибут sandbox

Позволяет ограничить права встроенного документа. Пустое значение атрибута включает все ограничения; для их снятия используются флаги: allow-scripts, allow-forms, allow-same-origin, allow-popups, allow-top-navigation. Важно помнить, что одновременное использование allow-scripts и allow-same-origin позволяет встроенному документу удалить родительскую рамку, что делает эту комбинацию небезопасной.

¶Политика безопасности контента (CSP)

HTTP-заголовок Content-Security-Policy с директивой frame-src (или child-src) позволяет администратору сайта указать список разрешённых источников для встраивания. Например: frame-src 'self' https://www.youtube.com`.