Sobes.tech
Back to questions
Middle+
1

Как встроенный iframe (например, карта или видео) взаимодействует с куками основного сайта? Как организовать общение между разными источниками?

Companies where asked
ООО Делай мебель

Answer from AI

sobes.tech AI

Встроенный 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.