跨源Web应用同浏览器标签页会话数据共享解决方案咨询

针对非同源Web应用仅在同一浏览器标签页内共享会话数据、不同标签页隔离的需求，且排除查询字符串、iframe存储方案因Chrome存储分区机制失效的情况，以下是几个可行的替代方案：

方案1：基于postMessage的中心化内存数据共享 #

原理 #

同一标签页内的非同源上下文（如主窗口与子窗口、嵌套iframe）可通过window.postMessage()实现双向通信。指定一个应用作为数据中心（比如首个加载的主应用），在内存中维护共享会话数据；其他应用通过发送消息向数据中心请求读取、更新数据，数据中心同步消息给所有关联的应用实例。

实现示例 #

• 数据中心（主应用）代码：

// 维护共享数据
const sharedSessionData = {};
// 存储所有关联的上下文引用
const connectedContexts = new Set();

window.addEventListener('message', (event) => {
  // 验证消息来源（建议配置具体域名白名单，替代*）
  if (!['https://app1.example.com', 'https://app2.example.com'].includes(event.origin)) return;

  switch (event.data.type) {
    case 'REGISTER':
      connectedContexts.add(event.source);
      // 同步当前数据给新注册的应用
      event.source.postMessage({
        type: 'DATA_SYNC',
        data: sharedSessionData
      }, event.origin);
      break;
    case 'GET_DATA':
      event.source.postMessage({
        type: 'DATA_RESPONSE',
        data: sharedSessionData[event.data.key]
      }, event.origin);
      break;
    case 'UPDATE_DATA':
      sharedSessionData[event.data.key] = event.data.value;
      // 同步更新给所有关联应用
      connectedContexts.forEach(context => {
        context.postMessage({
          type: 'DATA_UPDATED',
          key: event.data.key,
          value: event.data.value
        }, event.origin);
      });
      break;
  }
});

• 子应用代码：

// 注册到数据中心
window.parent.postMessage({ type: 'REGISTER' }, 'https://main-app.example.com');

// 本地维护数据副本
let localSessionData = {};

// 监听数据同步/更新
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://main-app.example.com') return;
  
  if (event.data.type === 'DATA_SYNC') {
    localSessionData = event.data.data;
  } else if (event.data.type === 'DATA_UPDATED') {
    localSessionData[event.data.key] = event.data.value;
  }
});

// 请求读取数据
function getSharedData(key) {
  window.parent.postMessage({ type: 'GET_DATA', key }, 'https://main-app.example.com');
}

// 更新共享数据
function updateSharedData(key, value) {
  window.parent.postMessage({ type: 'UPDATE_DATA', key, value }, 'https://main-app.example.com');
}

优缺点 #

• 优点：无需额外配置HTTP头，兼容性好，数据仅存于内存（不同标签页自动隔离），支持大数据量共享。
• 缺点：依赖上下文关联（如主窗口与子窗口/iframe的层级关系），若数据中心页面被关闭，共享数据会丢失。

方案2：SharedArrayBuffer + 跨源隔离头 #

原理 #

通过配置跨源隔离HTTP头，让同一标签页内的非同源应用处于同一个跨源隔离环境，从而可以共享SharedArrayBuffer，基于此实现内存中的数据共享与同步。Chrome的存储分区机制不会影响该方案，因为共享基于内存直接交互。

配置要求 #

所有参与共享的应用需在服务器端设置以下HTTP头：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

可根据场景调整Cross-Origin-Opener-Policy为same-site（同站点应用共享），需确保符合隔离规则。

实现思路 #

1. 建立一个共享的SharedArrayBuffer作为数据载体，配合AtomicsAPI实现线程安全的数据读写。
2. 通过postMessage将SharedArrayBuffer传递给同标签页内的其他非同源应用。
3. 所有应用通过操作同一个SharedArrayBuffer实现数据共享，不同标签页的SharedArrayBuffer相互独立，天然满足隔离需求。

优缺点 #

• 优点：支持高效的实时数据同步，数据仅在内存中，自动隔离不同标签页。
• 缺点：需要修改服务器HTTP头配置，部分旧浏览器不支持SharedArrayBuffer，实现复杂度较高。

方案3：使用Window.name属性 #

原理 #

window.name属性在同一标签页内导航时会保留其值，即使导航到非同源页面也不会丢失。可以将序列化后的会话数据存储在window.name中，所有在同一标签页内加载的非同源应用都可以读取和修改该值。

实现示例 #

// 存储数据
function setSharedSessionData(data) {
  window.name = JSON.stringify(data);
}

// 读取数据
function getSharedSessionData() {
  try {
    return JSON.parse(window.name);
  } catch (e) {
    return {};
  }
}

// 更新数据
function updateSharedSessionData(key, value) {
  const data = getSharedSessionData();
  data[key] = value;
  setSharedSessionData(data);
}

优缺点 #

• 优点：实现简单，无需额外通信机制，天然支持同标签页非同源共享，不同标签页隔离。
• 缺点：window.name有大小限制（不同浏览器约2MB-10MB），若数据量过大可能超出限制；数据以字符串形式存储，频繁序列化/反序列化会有性能开销；若标签页导航到其他页面，数据可能被覆盖。

内容的提问来源于stack exchange，提问作者user3616544