Как использовать window.postMessage() правильно?

Как можно отправить сообщение между фронтенд приложениями, запущенными на разных поддоменах, используя `postMessage()` на JavaScript?
  • 30 мая 2024 г. 17:31
Ответы на вопрос 1
Для использования `window.postMessage()`, вы можете отправить сообщение между разными фронтенд приложениями, запущенными на разных поддоменах, следуя этим шагам:

1. В приложении, которое отправляет сообщение, используйте следующий код:

```javascript
const targetWindow = document.getElementById('target').contentWindow;
targetWindow.postMessage('Hello, другой фронтенд!', 'https://subdomain.example.com');
```

Здесь `target` - это iframe, через который отправляется сообщение, и `https://subdomain.example.com` - это адрес фронтенд приложения, которое должно получить сообщение.

2. В приложении, которое получает сообщение, используйте следующий код:

```javascript
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://mainsite.com') return; // проверка на безопасность
  if (event.data === 'Hello, другой фронтенд!') {
    console.log('Сообщение получено!');
  }
});
```

Здесь `mainsite.com` - это адрес вашего основного фронтенд приложения. Также рекомендуется добавить проверку `event.origin`, чтобы обеспечить безопасность и предотвратить атаки с использованием `postMessage()`.

Это позволит вам отправлять сообщения между различными фронтенд приложениями, запущенными на разных поддоменах, без использования серверного взаимодействия.
Похожие вопросы