Какой опыт работы с postMessage

postMessage — это метод для безопасного обмена данными между разными источниками (окнами, фреймами, воркерами) с проверкой origin.

Основные сценарии:

1. Общение между окнами/фреймами:

   // Отправитель (parent.html)
   iframe.contentWindow.postMessage('Hello!', 'https://child.com');
   
   // Получатель (iframe)
   window.addEventListener('message', (e) => {
     if (e.origin === 'https://parent.com') {
       console.log(e.data); // 'Hello!'
     }
   });

2. Web Workers:

   // Main thread
   worker.postMessage({ action: 'calculate', data: 42 });
   
   // Worker
   self.onmessage = (e) => {
     if (e.data.action === 'calculate') { ... }
   };

Безопасность: Всегда проверяйте e.origin и e.source во избежание XSS.

Ограничения:

• Не поддерживает сложные объекты (например, DOM-элементы).
• Требует явного указания целевого origin ('*' — небезопасно).

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

• Встраивания виджетов с кросс-доменными данными.
• Оптимизации тяжелых вычислений через Web Workers.