Как организовать взаимодействие между основной страницей и страницей внутри iFrame, если прямой доступ к функциям друг друга невозможен?

Основы взаимодействия с iFrame через postMessage

Когда страница и iFrame находятся на разных доменах, прямой доступ к DOM или функциям друг друга блокируется политикой same-origin. Для безопасного обмена данными используется API postMessage, встроенный в браузеры.

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

Отправка сообщения происходит через метод postMessage целевого окна. Родитель обращается к iFrame через iframe.contentWindow, а iFrame — к родителю через window.parent. Вторым аргументом передаётся ожидаемый origin для безопасности.

// Родительская страница отправляет сообщение в iFrame
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage({ action: 'update', data: 'hello' }, 'https://child-domain.com');

// В iFrame слушаем сообщение
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://parent-domain.com') return;
  console.log('Получено:', event.data);
  // Отправляем ответ
  event.source.postMessage({ response: 'ok' }, event.origin);
});

Практическое применение

Этот подход используется для виджетов, встраиваемых платёжных форм, чатов поддержки и любых микросервисных интерфейсов, где части UI живут на разных доменах. Важно всегда проверять event.origin, чтобы не допустить утечки данных.

Вывод

postMessage — единственный стандартный способ кросс-доменного общения с iFrame. Он безопасен при правильной валидации origin и подходит для любых сценариев, где нужен обмен данными между окнами из разных источников.