JavaScript postMessage() — обмін даними між вікнами й iframe

Метод postMessage() надсилає дані іншому вікну — вкладці, спливаючому вікну чи iframe, навіть із іншого домену.

правити

Загальний опис

Політика одного джерела (same-origin) забороняє сторінкам із різних доменів лізти одна в одну. postMessage() — це офіційна щілина в цій стіні: єдиний легальний спосіб обмінятись даними.

Отримувач слухає подію message на своєму вікні. Дані приходять у event.data, а джерело — в event.origin.

І ось тут — найважливіше правило безпеки: event.origin треба перевіряти завжди. Без перевірки будь-який сайт, що відкрив твою сторінку в iframe, зможе надіслати їй команду й видати її за свою.

правити

Нотатка

Ніколи не довіряй event.data без перевірки event.origin. Пропущена перевірка — це готова діра: чужа сторінка зможе керувати твоєю.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
postMessage	1+	3+	4+	9.5+	12+	8+

Підтримка: мобільні переглядачі

Переглядач
postMessage	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<iframe>демо</iframe>

// --- батьківська сторінка ---
const frame = document.querySelector('iframe');

frame.contentWindow.postMessage(
    { type: 'theme', value: 'dark' },
    'https://widget.example.com' // кому саме — не '*'
);

// --- усередині iframe ---
window.addEventListener('message', event => {
    // БЕЗ ЦЬОГО РЯДКА — діра в безпеці
    if (event.origin !== 'https://css.in.ua') {
        return;
    }

    if (event.data.type === 'theme') {
        document.documentElement.dataset.theme = event.data.value;
    }
});