Вебсправочник
Справочник HTML

Тег <iframe>: вложенная страница и ограничения sandbox

Элемент iframe встраивает отдельный документ со своим окружением. Атрибут sandbox позволяет ограничить возможности вложенного содержимого, но требует осознанного выбора разрешений.

Назначение

Элемент iframe встраивает отдельный документ со своим окружением. Атрибут sandbox позволяет ограничить возможности вложенного содержимого, но требует осознанного выбора разрешений.

Как это работает

Пустой sandbox включает набор ограничений, в том числе запрет скриптов и отправки форм. Srcdoc задаёт разметку прямо в атрибуте. Понятный title описывает назначение фрейма для пользователя вспомогательных технологий.

Пример

<iframe title="Предпросмотр учебной заметки" sandbox="" referrerpolicy="no-referrer"
 srcdoc="&lt;h1&gt;Заметка&lt;/h1&gt;&lt;p&gt;Только текст и разметка.&lt;/p&gt;"
 style="width:100%;height:160px;border:1px solid #aaa"></iframe>

Что должно получиться

В рамке показывается отдельная заметка без выполнения JavaScript. Внешняя страница и содержимое фрейма остаются разными документами. Сам iframe не создаёт безопасный серверный обработчик и не проверяет чужой HTML.

Граница применения и частая ошибка

Для недоверенного same-origin содержимого опасно бездумно сочетать allow-scripts и allow-same-origin: это может позволить снять ограничения. Sandbox также не гарантирует запрет любых сетевых загрузок; для этого нужны дополнительные меры, например политика CSP.

Самостоятельная проверка

Проверьте заголовок фрейма и поведение клавиши Tab. В отдельной локальной странице добавьте в srcdoc простую кнопку со скриптом: при пустом sandbox скрипт не должен выполняться. Не ослабляйте ограничения на рабочем сайте ради теста.

HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.

Попробуйте сами

HTML + CSS песочница
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.