Что такое <iframe>

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

ROMI

Типичные применения: встраивание видео (YouTube), карт (Google/Яндекс), форм, виджетов, чатов, платёжных страниц, A/B-инструментов.

Базовый синтаксис и ключевые атрибуты

<iframe
  src="https://example.com/widget"
  width="600" height="400"
  loading="lazy"
  title="Калькулятор стоимости"  <!-- важно для доступности -->
  referrerpolicy="strict-origin-when-cross-origin"
  allow="fullscreen; geolocation; clipboard-read"
  sandbox="allow-scripts allow-same-origin">
</iframe>

src — адрес встраиваемой страницы. Есть также srcdoc для встроенного HTML:

<iframe srcdoc="<h1>Привет</h1><p>Встроенный контент</p>" title="Демо"></iframe>

width/height — задайте размеры заранее, чтобы избежать CLS (скачков макета);
title — кратко описывает содержимое фрейма; обязательно для скринридеров;
loading="lazy" — отложенная загрузка, снижает нагрузку и улучшает FCP/LCP;
sandbox — капсулирует права (по умолчанию жёстко ограничивает всё). Добавляйте только нужные флаги:

allow-scripts — разрешить скрипты,
allow-same-origin — считать контент того же источника (нужно осторожно),
allow-forms, allow-popups, allow-modals, allow-downloads,
allow-top-navigation-by-user-activation — навигация верхнего окна по клику.

allow — Permissions/Feature Policy: какой доступ дать (например, fullscreen, geolocation, camera, autoplay);
referrerpolicy — какой реферер посылать фрейму (приватность);
allowfullscreen / fullscreen — разворачивание на весь экран (часто для видео).

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

1. Песочница по умолчанию. Вставляйте третьесторонний контент с sandbox и минимальным набором разрешений. Чем меньше флагов — тем безопаснее.
2. Коммуникация только через postMessage. Кросс-сайтовый доступ к DOM запрещён (Same Origin Policy). Для обмена данными используйте:

// Родитель
iframeEl.contentWindow.postMessage({type:'SET_COLOR', value:'#0ea5e9'}, 'https://widget.example');
// В фрейме
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://parent.example') return;
  // обработать e.data
});

3. Защита от встраивания вашего сайта. Чтобы вас не встраивали (кликджекинг), используйте CSP frame-ancestors:

Content-Security-Policy: frame-ancestors 'self' https://trusted.example (Устаревший X-Frame-Options: DENY/SAMEORIGIN — как запасной вариант.)
Куки и приватность. Браузеры всё чаще ограничивают third-party-куки в iframe. Для виджетов используйте современные подходы: Storage Access API, Partitioned Cookies (Partitioned; SameSite=None; Secure) — если это уместно и легально.

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

Каждый <iframe> — это отдельный контекст: память, сетевые запросы, JS. Чем их больше — тем тяжелее страница;
Фиксируйте размеры (или используйте aspect-ratio) — это снижает CLS;
Ставьте loading="lazy" и рендерьте тяжелые фреймы по взаимодействию (клик «Показать карту»);
Делайте плейсхолдер (картинка/скелет) вместо мгновенного встраивания карт и видео;
Для сторонних доменов добавляйте <link rel="preconnect"> к CDN/хосту, если фрейм важен выше сгиба.

Пример «ленивой» вставки видео:

<div class="video">
  <button class="video__play">▶ Смотреть</button>
</div>
<script>
document.querySelector('.video__play').addEventListener('click', (e) => {
  e.currentTarget.parentNode.innerHTML =
    '<iframe src="https://www.youtube-nocookie.com/embed/ID?autoplay=1" ' +
    'title="Видео" allow="accelerometer; autoplay; encrypted-media" allowfullscreen></iframe>';
});
</script>

Адаптивность

Используйте соотношение сторон через CSS:

.embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

<div class="embed">
  <iframe src="..." title="Видео" loading="lazy" allowfullscreen></iframe>
</div>

Доступность

Обязательно title у каждого iframe — что внутри («Карта офиса», «Форма оплаты»);
Управляйте фокусом: при открытии модалки с iframe сразу переводите фокус внутрь по необходимости, по Esc возвращайте;
Если контент критичен, предоставьте альтернативу без iframe (ссылка «Открыть на внешнем сайте», текстовое описание карты и т. п.).

SEO: как поисковики относятся к iframe

Содержимое внутри iframe не считается контентом вашей страницы для ранжирования. Поисковик обычно индексирует URL из src отдельно;
Поэтому не выносите основной текст/товары/навигацию в iframe. Для SEO-критичного — рендерите контент в самой странице;
Если встраиваете видео/карту — это нормально, но обеспечьте текстовую подводку (заголовок, описание, адрес/телефон рядом с картой и т. п.);
Ссылки внутри iframe относятся к его документу, а не к родителю.

Когда <iframe> уместен, а когда нет

Уместно: сторонние виджеты (видео, карты, платёжные формы), изоляция «чужого» JS, микро-приложения, которым нужен свой стек/релизы.

Неуместно: рутинные части вашего сайта — меню, контент, карточки товаров, важные тексты, критичные для SEO блоки.

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

Без title, width/height → проблемы доступности и CLS;
Без sandbox для третьестороннего источника → повышенные риски безопасности;
Вставка тяжёлых карт/видео выше сгиба без lazy → просадка LCP/INP;
Попытка кросс-доменного доступа к DOM (ломается на SOP) вместо postMessage;
Доверие ко всем message без проверки origin → уязвимости;
Использование iframe для основного контента → минус к SEO/индексации.

Мини-чек-лист внедрения

Нужен ли <iframe>? (если контент ваш — лучше без него);
Заданы фиксированные размеры или aspect-ratio; нет скачков макета;
Стоит loading="lazy"/встраивание по взаимодействию, где возможно;
Проставлены title, у третьих сторон — sandbox с минимальными правами и точный allow;
Коммуникация только через postMessage с проверкой origin;
Для приватности выставлен referrerpolicy, учтены ограничения third-party-куки;
Для SEO-критичных блоков — контент на странице, а не во фрейме.