Как передать информацию из одной вкладки в другую через iframe?

Передача информации между вкладками через iframe

Это сложная задача из-за ограничений безопасности браузера. Между вкладками существует изоляция, но есть несколько решений для обмена данными.

Проблема Same-Origin Policy

Браузер не позволяет прямой обмен данными между разными вкладками по соображениям безопасности. iframe имеет свой context и может быть из другого origin. Требуется использовать специальные механизмы.

Решение 1: postMessage API

Мост между вкладками и iframe - использование postMessage. Это безопасный способ передачи сообщений между windows/frames.

const iframe = document.querySelector("iframe");

iframe.contentWindow.postMessage(
  { type: "UPDATE_DATA", data: "Hello from parent" },
  "*"
);

window.addEventListener("message", (event) => {
  if (event.data.type === "RESPONSE") {
    console.log("From iframe:", event.data.payload);
  }
});

Код внутри iframe

window.addEventListener("message", (event) => {
  if (event.origin !== "https://parent-domain.com") return;
  
  if (event.data.type === "UPDATE_DATA") {
    console.log("Received:", event.data.data);
    updateUI(event.data.data);
  }
});

window.parent.postMessage(
  { type: "RESPONSE", payload: "Data from iframe" },
  "*"
);

Решение 2: SharedWorker

Для cross-tab коммуникации используйте SharedWorker как посредник.

const worker = new SharedWorker("shared-worker.js");

worker.port.postMessage({ type: "DATA_UPDATE", value: "Hello" });

worker.port.onmessage = (event) => {
  console.log("From another tab:", event.data);
};

worker.port.start();

Решение 3: localStorage events

Простой способ для same-origin случаев.

localStorage.setItem("sharedData", JSON.stringify({
  timestamp: Date.now(),
  message: "Hello from tab 1"
}));

window.addEventListener("storage", (event) => {
  if (event.key === "sharedData") {
    const data = JSON.parse(event.newValue);
    console.log("From another tab:", data);
  }
});

Рекомендации по безопасности

1. Проверяйте origin при получении сообщений через postMessage
2. Не передавайте чувствительные данные между разными domains
3. Используйте HTTPS для защиты
4. Валидируйте входящие данные

Для большинства случаев используйте postMessage API как наиболее безопасный способ.