Hoe interacteert een ingebedde iframe (bijvoorbeeld een kaart of video) met de cookies van de hoofdsite? Hoe organiseer je communicatie tussen verschillende bronnen?

Встроенный iframe, например с картой или видео, загружает контент с другого источника (домен, протокол, порт), и браузер изолирует его от основного сайта по политике безопасности (Same-Origin Policy).

Взаимодействие с куками:

• Куки устанавливаются и доступны только для того домена, который их создал.
• iframe не может напрямую читать или изменять куки основного сайта, если они с разных доменов.
• Если iframe и основной сайт на одном домене, то куки доступны обоим.

Общение между разными источниками:

• Для обмена данными между iframe и основным сайтом используют механизм window.postMessage.
• Этот API позволяет безопасно отправлять сообщения между окнами/фреймами, даже если они с разных доменов.

Пример использования postMessage:

// В основном окне
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Привет iframe', 'https://iframe-domain.com');

window.addEventListener('message', event => {
  if (event.origin === 'https://iframe-domain.com') {
    console.log('Сообщение от iframe:', event.data);
  }
});

// В iframe
window.addEventListener('message', event => {
  if (event.origin === 'https://main-site.com') {
    console.log('Сообщение от основного сайта:', event.data);
    event.source.postMessage('Привет основному сайту', event.origin);
  }
});

Таким образом, куки изолированы по доменам, а для обмена данными между iframe и основным сайтом используется postMessage.