Какие проблемы могут возникать при использовании postMessage для коммуникации между окном и iframe?

postMessage — это API браузера для безопасного обмена сообщениями между окнами, iframe и воркерами, в том числе между разными origin. Несмотря на встроенные механизмы защиты, разработчики часто допускают ошибки, которые превращают удобный инструмент в источник уязвимостей и багов.

Основные проблемы

• Отсутствие проверки origin. Если обработчик не проверяет event.origin, любая враждебная страница может отправить сообщение и, например, инициировать действие или получить данные.
• Wildcard targetOrigin. Отправка с targetOrigin = "*" раскрывает содержимое сообщения любому, кто встроил ваш iframe.
• Гонки инициализации. Родитель может отправить сообщение до того, как iframe загрузился и подписался на message, и оно потеряется.
• Утечки слушателей. Если не удалять addEventListener('message'), при пересоздании iframe накапливаются обработчики и утечки памяти.
• Отсутствие проверки event.source. Даже при верном origin нужно убедиться, что сообщение пришло именно от ожидаемого окна.
• Сериализация. Передаются только структурируемые данные; функции, DOM-узлы и классы не пройдут.

Пример безопасного обмена

// Родитель
const iframe = document.querySelector('iframe');
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://child.example.com') return;
  if (e.source !== iframe.contentWindow) return;
  console.log('from child:', e.data);
});
iframe.addEventListener('load', () => {
  iframe.contentWindow.postMessage({ type: 'init' }, 'https://child.example.com');
});

// Внутри iframe
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://parent.example.com') return;
  if (e.data?.type === 'init') {
    e.source.postMessage({ ok: true }, e.origin);
  }
});

Как избегать проблем

1. Всегда указывайте точный targetOrigin вместо "*".
2. Проверяйте и origin, и source входящих сообщений.
3. Используйте протокол с полем type и версией, чтобы отличать свои сообщения.
4. Дожидайтесь события load iframe перед отправкой.
5. Снимайте слушатели при размонтировании компонента.

Итог: postMessage стоит применять для кросс-доменного взаимодействия окон и iframe, но только с явной проверкой origin и source, точным targetOrigin и аккуратным управлением жизненным циклом слушателей — иначе легко получить уязвимость или трудноуловимый баг.