iframe и встраивание

Ифреймы: встраивание сторонних страниц, sandbox, lazy, безопасность и понятие embed/object/canvas.

Уровень: средний 8 разделов 1 час

1. Что такое iframe

<iframe src="…"></iframe> вставляет внутрь страницы другую веб-страницу — изолированное окно браузера. Так грузятся карты, видео, виджеты, платежи.

<iframe src="https://map.site/embed?q=Нева" width="600" height="400"
        title="Карта Санкт-Петербурга" allowfullscreen loading="lazy"></iframe>

title обязателен для доступности (имя фрейма);
allowfullscreen разрешает полноэкранный ролик;
loading="lazy" не тянет виджет до нужного места.

2. Встраивание карт, видео

Большинство сервисов дают готовый embed-код (YouTube → Поделиться → Embed). Это всегда iframe с вашими src/path, где главное — размер и title.

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

3. sandbox: изоляция

sandbox ограничивает встроенный контент: запрет скриптов, форм, навигации родителя. Перечисляйте минимально необходимые разрешения.

<iframe src="widget.html" sandbox="allow-scripts allow-same-origin"></iframe>

без флагов — максимально строго (это безопасно);
allow-same-origin + allow-scripts вместе — риск (можно снять куки/порядок);
вообще: встраиваете своё — allowed больше, чужое —

4. Безопасность: никогда не доверяйте встроенному

iframe с sandbox — контейнер для чужих сценариев;
не встраивайте недоверенный HTML без sandbox;
CSP: frame-src 'self' https://карты.домены — список разрешений.

<meta http-equiv="Content-Security-Policy"
      content="frame-src 'self' https://www.youtube-nocookie.com; script-src 'self'">

sandbox="allow-scripts allow-same-origin" фактически отдаёт встроенной странице ваши ресурсы: она становится «вашей». Такой комбинации стороннему коду не давайте.

5. object и embed — старые подходы

<object data="doc.pdf" type="application/pdf" width="600" height="400">
  PDF не открылся — <a href="doc.pdf">скачайте</a>.
</object>
<embed src="clip.swf" type="application/x-shockwave-flash">

object/embed — подключение внешних ресурсов (PDF, Java, старого Flash). В подавляющем большинстве современного веба их заменяют iframe или просто ссылка+JS.

6. Встраивание своих страниц

<iframe src="/widgets/calculator.html" width="360" height="420"
        title="Калькулятор" sandbox="allow-scripts allow-forms"></iframe>

Точно также можно встраивать собственные виджеты. Бонус: если виджет отказался — встроенность с relat-в-любом-изоляции помогает решать сервисы («к сорсам твои») — но лучше сесть ряд.

7. Производительность iframe

каждый iframe — отдельный документ и груз на память;
за пределы экрана — lazy;
не встраивайте 40 виджетов — один-два главных;
проверяйте: не блокирует ли внешний скрипт рендер.

<iframe src="chart.html" loading="lazy" title="Отчёт"></iframe>

8. Чек-лист встраивания

title у каждого iframe;
allowfullscreen/allow — минимальны и к месту;
sandbox для чужого контента;
CSP ограничивает frame-src;
lazy-встраивание ниже экрана;
проверили, что фрейм не тянет страницу вниз.

Что дальше

Курс завершён.

← Вернуться к курсам