Як браузер визначає, чи ми можемо спілкуватися між вкладками?

Повне пояснення

Що це і навіщо

Same-Origin Policy (SOP) обмежує доступ скриптів до ресурсів, що мають різний origin (scheme + host + port). Це запобігає XSS‑атак і несанкціонованому доступу.

Ключові принципи

• Origin – унікальний ідентифікатор ресурсу.
• Same-origin – однаковий origin → повний доступ до DOM, localStorage тощо.
• Cross-origin – різні origins → обмежений доступ, потрібен спеціальний механізм.

Як це працює

1. При завантаженні сторінки браузер визначає origin.
2. Якщо скрипт намагається звернутися до ресурсу з іншого origin, SOP блокує доступ.
3. Для дозволеного спілкування між вкладками використовуються API:
   • postMessage – надсилає повідомлення між окремими вікнами/вкладками.
   • BroadcastChannel – простий спосіб розповсюдження повідомлень між усіма вкладками того ж origin.

Практика і реалізація

// Вкладка A
const channel = new BroadcastChannel('chat');
channel.postMessage({ text: 'Привіт' });

// Вкладка B
const channel = new BroadcastChannel('chat');
channel.onmessage = e => console.log(e.data.text);

Тестування

Для unit‑тестів можна мокати BroadcastChannel або використовувати бібліотеку jsdom з підтримкою postMessage. При інтеграційному тестуванні Playwright дозволяє відкривати кілька вкладок і перевіряти обмін.

Безпека

• Перевіряйте event.origin у onmessage‑обробнику.
• Не довіряйте даним без валідації.

Альтернативи

• localStorage events – старий спосіб, але працює лише між вкладками одного origin.
• Service Workers – можуть пересилати повідомлення через postMessage між вкладками і воркерами.

Часті помилки

1. Забудьте перевірити event.origin → XSS.
2. Використання BroadcastChannel без перевірки підтримки браузера → помилка.
3. Неправильний ключ каналу → повідомлення не доходять.
4. Надмірне використання postMessage → продуктивність.
5. Неочікувані типи даних → помилки парсингу.
6. Відсутність close() → витік пам’яті.
7. Перевищення розміру повідомлення (≈64 KB) → обірвані дані.
8. Необхідність CORS‑заголовків при fetch між origin → блокування.

Cheatsheet

• postMessage: window.postMessage(message, targetOrigin).
• BroadcastChannel: new BroadcastChannel(name) → channel.postMessage(msg), channel.onmessage.
• Перевірка origin: if (event.origin !== expectedOrigin) return;.