Исполняемые доки HTML: Тег iframe

Q: Почему iframe пишет, что сайт отказался подключаться?

Сайт отправляет заголовок X-Frame-Options или Content-Security-Policy: frame-ancestors, который запрещает другим сайтам показывать его во фрейме. Многие сайты делают так для защиты от кликджекинга. Со своей страницы это не обойти; используйте официальный URL для встраивания, если он есть.

Q: Как убрать рамку у iframe?

Задайте в CSS border: 0. Старый атрибут frameborder="0" устарел, хотя многие скопированные коды встраивания его еще содержат.

Q: Как сделать iframe адаптивным?

Задайте ему в CSS width: 100% и aspect-ratio, например aspect-ratio: 16 / 9 для видео, и не указывайте фиксированную высоту. Тогда iframe масштабируется вместе с контейнером и сохраняет форму.

Q: Что делает атрибут sandbox у iframe?

Пустой атрибут sandbox блокирует внутри фрейма скрипты, отправку форм, всплывающие окна и многое другое и считает его содержимое пришедшим из уникального источника. Затем вы разрешаете только то, что нужно встраиванию, ключевыми словами вроде allow-scripts или allow-forms.

Как использовать iframe

<iframe> показывает другую страницу внутри вашей. Укажите адрес страницы в src, title с ее описанием и размер:

<iframe src="https://example.com/" title="Example site" width="600" height="400"></iframe>

Фрейм загружает страницу как отдельный документ со своими стилями и скриптами. Примеры на этой странице используют srcdoc вместо src: он помещает HTML фрейма прямо в атрибут, поэтому примеры работают без загрузки другого сайта:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

Внешний абзац синий и жирный; абзац внутри фрейма нет, хотя на странице то же правило для p. Стили никогда не пересекают границу фрейма ни в одну сторону. Рамка по умолчанию и размер 300×150 по умолчанию задает браузер; атрибуты width и height переопределяют размер.

Встроить видео YouTube или карту

Видеосайты и картографические сервисы дают готовый код iframe. На YouTube нажмите «Поделиться», затем «Встроить»:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Для Google Maps откройте место, нажмите «Поделиться», затем «Встраивание карт» и так же скопируйте iframe. Оставьте title (программы чтения с экрана объявляют его при входе во фрейм) и замените фиксированные размеры адаптивным CSS ниже. Атрибут allow дает фрейму возможности вроде автовоспроизведения или полноэкранного режима, которые у встроенных страниц по умолчанию выключены.

Размер, рамка и адаптивные iframe

Скопированные коды встраивания используют фиксированные размеры в пикселях, которые на телефонах вылезают за экран. width: 100% вместе с aspect-ratio заставляет фрейм заполнять контейнер и сохранять форму, а border: 0 убирает рамку по умолчанию:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

Замените max-width: 480px на другое значение, и фрейм сохранит пропорцию 16:9 при любой ширине. Уберите border: 0, чтобы увидеть рамку браузера по умолчанию. Старые атрибуты frameborder, scrolling и marginheight устарели; используйте CSS.

sandbox: ограничьте возможности фрейма

Фрейм может выполнять скрипты, отправлять формы и открывать всплывающие окна, как любая страница. Атрибут sandbox отнимает эти возможности; пустой sandbox блокирует почти все, а каждое ключевое слово возвращает одну из них. Оба фрейма ниже получают одинаковый HTML с небольшим скриптом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

Первый фрейм сохраняет текст-заглушку, потому что его скрипт не выполняется (консоль Chrome выводит для него сообщение «Blocked script execution»). Используйте sandbox всегда, когда показываете во фрейме содержимое, которому не доверяете полностью, например HTML, написанный пользователями, и добавляйте только нужные ключевые слова:

Ключевое слово	Что разрешает
`allow-scripts`	Выполнение JavaScript
`allow-forms`	Отправку форм
`allow-popups`	`window.open` и ссылки с `target="_blank"`
`allow-modals`	`alert()`, `confirm()` и `prompt()`
`allow-same-origin`	Считать содержимое пришедшим из его настоящего источника (cookies, хранилище)
`allow-top-navigation`	Уводить всю вкладку с вашей страницы

Никогда не сочетайте allow-scripts и allow-same-origin для содержимого с вашего собственного источника: тогда скрипт во фрейме сможет снять с себя sandbox.

Общение с фреймом: postMessage

Внешняя страница и фрейм это разные документы. Когда их источники различаются, они не могут трогать DOM друг друга, но могут отправлять сообщения. Введите сообщение и отправьте его во фрейм:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

В настоящем коде передавайте точный источник фрейма (например, 'https://maps.example.com') вместо '*' и проверяйте e.origin у получателя, чтобы сообщения уходили только на ожидаемый сайт и приходили только с него.

Производительность и отказ сайтов

Ленивая загрузка. Добавьте loading="lazy" фреймам далеко внизу страницы; браузер загрузит их, только когда читатель прокрутит к ним. Каждый iframe это полная загрузка страницы, поэтому без этого страница с множеством встраиваний становится медленной.
«Отказано в подключении». Многие сайты (банки, большинство соцсетей, поиск Google) отправляют заголовок X-Frame-Options или frame-ancestors, который запрещает показ во фрейме, и браузер показывает во фрейме ошибку. Ваша страница не может это обойти. Используйте официальный URL для встраивания или ссылку.
Доступность. Всегда задавайте title. Так программа чтения с экрана называет фрейм, а по странице с несколькими безымянными фреймами трудно перемещаться.

Частые ошибки

Нет title. Программы чтения с экрана объявляют фрейм безымянным.
Фиксированная ширина из скопированного кода встраивания. Замените ее на width: 100% и aspect-ratio.
Обычный видеофайл во фрейме. Для собственного файла .mp4 используйте элемент video; iframe нужен для страниц.
Доверие содержимому во фрейме. Добавляйте sandbox для всего, что писали не вы.
Ожидание, что внешний CSS оформит фрейм. Оформляйте страницу во фрейме изнутри нее.

Часто задаваемые вопросы

Что такое iframe в HTML?

<iframe> (inline frame, встроенный фрейм) это блок, который показывает отдельную веб-страницу внутри текущей. У него собственный документ, стили и скрипты, поэтому его используют для встраивания видео, карт, рекламы и превью кода.

Как встроить видео YouTube через iframe?

На YouTube выберите «Поделиться», затем «Встроить» и скопируйте код. Это iframe, у которого src это https://www.youtube.com/embed/ плюс id видео. Оставьте атрибуты title и allowfullscreen, а чтобы сделать его адаптивным, используйте CSS aspect-ratio: 16 / 9 с width: 100%.

Почему iframe пишет, что сайт отказался подключаться?

Сайт отправляет заголовок X-Frame-Options или Content-Security-Policy: frame-ancestors, который запрещает другим сайтам показывать его во фрейме. Многие сайты делают так для защиты от кликджекинга. Со своей страницы это не обойти; используйте официальный URL для встраивания, если он есть.

Как убрать рамку у iframe?

Задайте в CSS border: 0. Старый атрибут frameborder="0" устарел, хотя многие скопированные коды встраивания его еще содержат.

Как сделать iframe адаптивным?

Задайте ему в CSS width: 100% и aspect-ratio, например aspect-ratio: 16 / 9 для видео, и не указывайте фиксированную высоту. Тогда iframe масштабируется вместе с контейнером и сохраняет форму.

Что делает атрибут sandbox у iframe?

Пустой атрибут sandbox блокирует внутри фрейма скрипты, отправку форм, всплывающие окна и многое другое и считает его содержимое пришедшим из уникального источника. Затем вы разрешаете только то, что нужно встраиванию, ключевыми словами вроде allow-scripts или allow-forms.

Связанные концепции

Iframe в HTML: встроить страницу, видео и карту