Как вы использовали элемент iframe в своих проектах?

Использовал <iframe> для:

• Отображения контента с других доменов: Встраивание сторонних виджетов (карт, видеоплееров), рекламных блоков, интеграций с сервисами.
• Создания изолированных сред: Запуск стороннего JavaScript-кода или стилей без риска влияния на основную страницу. Например, для песочницы при просмотре пользовательского контента или запуска редакторов кода.
• Междоменного взаимодействия: Передача данных между родительской страницей и содержимым <iframe> с использованием window.postMessage.
• Встраивания статических HTML-страниц: Отображение части сайта или документа без полной навигации.

Пример использования с window.postMessage:

Родительская страница:

// Отправляем сообщение в iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('hello from parent', 'https://trusted-domain.com');

// Принимаем сообщение из iframe
window.addEventListener('message', (event) => {
  // Проверяем источник сообщения для безопасности
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Message from iframe:', event.data);
  }
});

Страница внутри iframe:

// Принимаем сообщение из родительской страницы
window.addEventListener('message', (event) => {
  // Проверяем источник сообщения для безопасности
  if (event.origin === 'https://parent-domain.com') {
    console.log('Message from parent:', event.data);

    // Отправляем ответ родительской странице
    event.source.postMessage('hello from iframe', event.origin);
  }
});

Пример использования для встраивания видео:

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

При работе с <iframe> всегда уделял внимание вопросам безопасности, особенно sandbox атрибуту и проверке event.origin при использовании window.postMessage. Также учитывал SEO-аспекты, так как содержимое <iframe> отдельно индексируется поисковыми системами.