Атрибут onmessage тега <body>

Описание

Атрибут onmessage позволяет задать обработчик сообщений, отправляемых через механизмы межоконного взаимодействия, такие как:

  • Window.postMessage() - обмен между окнами/фреймами
  • Web Workers - обмен с фоновыми потоками
  • Service Workers - взаимодействие с PWA
  • BroadcastChannel - широковещательные сообщения
Пример использования:
<body onmessage="handleIncomingMessage(event)"> <div id="message-display"></div> <iframe src="child.html" id="child-frame"></iframe> <script> function handleIncomingMessage(event) { // Проверяем источник сообщения if (event.origin !== "https://trusted-domain.com") return; document.getElementById('message-display').textContent = `Получено сообщение: ${event.data}`; } // Отправка сообщения в iframe window.onload = function() { const frame = document.getElementById('child-frame'); frame.contentWindow.postMessage("Hello from parent", "https://child-domain.com"); }; </script> </body>

Свойства объекта события message:

Свойство Описание
data Переданные данные
origin Источник сообщения (протокол + домен + порт)
source Ссылка на окно-отправитель
ports Массив MessagePort для сложных сценариев

Рекомендации по использованию:

  • Всегда проверяйте event.origin для безопасности
  • Используйте JSON для сложных структур данных
  • Для частых сообщений используйте debounce/throttle
  • Документируйте форматы сообщений между компонентами
  • Обрабатывайте ошибки при парсинге данных

Важные замечания:

  • Сообщения передаются по значению (сериализуются)
  • Для больших данных используйте Transferable Objects
  • Разные источники требуют разных проверок origin
  • В Service Worker используется event.waitUntil
  • Для кросс-доменного взаимодействия требуется CORS

Современные альтернативы:

<script> // 1. Использование addEventListener window.addEventListener('message', (event) => { // Более современный синтаксис обработки }); // 2. BroadcastChannel API const channel = new BroadcastChannel('app-channel'); channel.onmessage = (event) => { console.log('Broadcast:', event.data); }; // 3. MessageChannel для прямого взаимодействия const {port1, port2} = new MessageChannel(); port1.onmessage = (event) => { console.log('MessageChannel:', event.data); }; port2.postMessage('Hello'); </script>

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

  • Никогда не доверяйте данным без проверки origin
  • Очищайте/санируйте входящие данные
  • Ограничивайте список разрешенных доменов
  • Используйте Content Security Policy (CSP)
  • Для чувствительных данных используйте дополнительные токены

Примечание: Механизм сообщений между окнами (postMessage) является мощным инструментом, но требует тщательной реализации мер безопасности. Всегда проверяйте источник сообщений и валидируйте полученные данные.