Элемент iframe: src и sandbox

Элемент <iframe> встраивает другой HTML-документ в текущую страницу. Каждый iframe имеет собственный контекст просмотра, DOM и область видимости JavaScript. Содержимое iframe не может обращаться к DOM родительской страницы без явного разрешения.

Укажите URL для встраивания в атрибуте src: <iframe src="https://example.com" width="800" height="600">. iframe создаёт новый контекст просмотра. Для доступности требуется атрибут title: title="Embedded map".

sandbox применяет ограничения к содержимому iframe: по умолчанию отключает скрипты, формы, всплывающие окна и плагины. Добавьте отдельные разрешения, чтобы восстановить нужные возможности: sandbox="allow-scripts allow-same-origin".

allow-scripts включает JavaScript. allow-same-origin позволяет считать iframe имеющим тот же источник, что и родительский документ (это необходимо для доступа к localStorage). allow-forms включает отправку форм. allow-popups разрешает window.open(). Предоставляйте только минимально необходимые разрешения.

Кросс-доменные iframe не могут обращаться к DOM родительской страницы: parent.document вызывает ошибку безопасности. Для связи между фреймами с разными источниками используется postMessage: iframe.contentWindow.postMessage(data, origin).

Отправляйте сообщения из родительской страницы в iframe: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). В iframe настройте прослушивание: window.addEventListener("message", handler). Всегда проверяйте event.origin перед обработкой сообщения.

loading="lazy" у iframe откладывает загрузку, пока iframe не окажется рядом с областью просмотра, и уменьшает время начальной загрузки страницы. Это полезно для карт, видео и виджетов социальных сетей, расположенных ниже первого экрана и не видимых сразу.

Каждый фрейм загружает отдельный документ HTML, CSS, JavaScript и ресурсы — это существенно увеличивает расход ресурсов. Не используйте фреймы для содержимого, которое можно встроить как фрагмент. Для фреймов, расположенных ниже видимой области, применяйте отложенную загрузку. Рассмотрите паттерны фасада (сначала показывайте заполнитель, а загружайте содержимое по нажатию).

Управляйте прокруткой фрейма: scrolling="no" отключает полосы прокрутки (устарело; используйте в CSS свойство overflow: hidden для фрейма). Современный подход: задавайте высоту фрейма равной высоте содержимого, устраняя необходимость во внутренних полосах прокрутки.

Атрибут allow предоставляет фрейму функции политики разрешений: allow="camera; microphone; fullscreen". Благодаря этому фрейм может запрашивать доступ к камере, микрофону и API полноэкранного режима, даже если источник-родитель не использует эти функции.

YouTube и Карты Google предоставляют код для встраивания фреймов. В этот код входят атрибуты allow для полноэкранного режима и автоматического воспроизведения. Для доступности программам чтения с экрана всегда добавляйте title="Video title". Атрибут sandbox обычно не добавляется в коды встраивания от сторонних сервисов — ознакомьтесь с их документацией по рекомендациям безопасности.

Что по умолчанию делает атрибут sandbox с фреймом, если ему не заданы значения?

Фреймы встраивают внешние документы в изолированных контекстах просмотра. Атрибут sandbox ограничивает возможности фрейма — предоставляйте только минимально необходимые разрешения. postMessage обеспечивает безопасное межисточниковое взаимодействие. Отложенная загрузка откладывает затратную загрузку ресурсов для фреймов ниже видимой области. Атрибут allow предоставляет функции политики разрешений доверенным встраиваемым объектам сторонних источников.