BroadcastChannel и postMessage

↑ 7.4 Browser API · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Коммуникация между вкладками, iframe и окнами: синхронизация выхода, тема, авторизация.

BroadcastChannel

Сообщения между контекстами одного origin (вкладки, iframe, воркеры).

const bc = new BroadcastChannel('auth')
bc.postMessage({ type: 'logout' })
bc.onmessage = e => { if (e.data.type === 'logout') router.push('/login') }
// bc.close() при размонтировании

Применение: единый выход из всех вкладок, синхронизация темы, уведомление об обновлении токена, общий SharedWorker.

window.postMessage

Связь между разными origin: окно, iframe, popup.

// родитель
iframe.contentWindow!.postMessage({ type: 'init', payload }, 'https://widget.example.com')
 
// iframe
window.addEventListener('message', e => {
  if (e.origin !== 'https://app.example.com') return   // ОБЯЗАТЕЛЬНО проверять origin
  handle(e.data)
})

Безопасность: указывайте точный targetOrigin (не *) и проверяйте event.origin при получении.

Другие способы

Способ	Особенности
storage event	срабатывает в других вкладках при изменении localStorage
SharedWorker	общий воркер для вкладок
Service Worker + clients.postMessage	рассылка от SW
Web Locks API	выбор лидера среди вкладок
MessageChannel	пара портов для прямой связи

Вопросы с ответами

Как синхронизировать logout во всех вкладках?

Через BroadcastChannel (или storage event): при выходе шлём сообщение, остальные вкладки очищают состояние и переходят на страницу входа.

Чем опасен postMessage?

Без проверки origin любой сайт может слать вашему окну данные и команды; с * в targetOrigin данные уйдут любому получателю.