如何用Selenium Python跨域设置与获取Local和Session Storage？

核心限制：浏览器同源策略 #

浏览器的同源策略会阻止web.op.org、web.my_site.org这类非example.org域名的页面，直接读写example.org域名下的Local Storage或Session Storage。必须通过跨域通信机制间接实现。

方案1：使用postMessage配合同源代理页面 #

这是前端实现跨域存储操作的主流方案，流程如下：

1. 在example.org域名下创建专门的代理页面（如storage-proxy.html），负责实际执行存储的读写操作。
2. 在web.op.org或web.my_site.org的页面中，嵌入一个指向example.org/storage-proxy.html的隐藏iframe。
3. 父页面通过postMessage向iframe发送存储操作指令（设置、获取、删除等）。
4. 代理页面监听message事件，执行对应存储操作后，再通过postMessage将结果返回给父页面。

示例代码 #

1. example.org/storage-proxy.html（代理页面）

window.addEventListener('message', (event) => {
  // 仅允许指定域名通信，避免恶意请求
  const allowedOrigins = ['https://web.op.org', 'https://web.my_site.org'];
  if (!allowedOrigins.includes(event.origin)) return;

  const { action, key, value, storageType } = event.data;
  let result;
  const storage = storageType === 'local' ? localStorage : sessionStorage;

  switch (action) {
    case 'set':
      storage.setItem(key, value);
      result = '操作成功';
      break;
    case 'get':
      result = storage.getItem(key);
      break;
    case 'remove':
      storage.removeItem(key);
      result = '操作成功';
      break;
    default:
      result = '无效操作指令';
  }

  // 将结果返回给发起请求的页面
  event.source.postMessage({ action, result }, event.origin);
});

2. web.op.org/web.my_site.org页面代码

// 创建隐藏的代理iframe
const proxyIframe = document.createElement('iframe');
proxyIframe.src = 'https://example.org/storage-proxy.html';
proxyIframe.style.display = 'none';
document.body.appendChild(proxyIframe);

// 封装跨域存储操作函数
function crossDomainStorage(action, key, value = '', storageType = 'local') {
  return new Promise((resolve) => {
    const messageHandler = (event) => {
      // 验证来源和动作匹配，确保返回结果对应当前请求
      if (event.origin === 'https://example.org' && event.data.action === action) {
        window.removeEventListener('message', messageHandler);
        resolve(event.data.result);
      }
    };
    window.addEventListener('message', messageHandler);

    // 等待iframe加载完成后发送指令
    proxyIframe.onload = () => {
      proxyIframe.contentWindow.postMessage(
        { action, key, value, storageType },
        'https://example.org'
      );
    };
  });
}

// 使用示例
// 设置Local Storage
crossDomainStorage('set', 'username', 'zeroxxx', 'local').then(res => console.log(res));
// 获取Session Storage
crossDomainStorage('get', 'auth_token', '', 'session').then(res => console.log(res));

方案2：后端中转（适用于复杂场景） #

如果需要后端参与权限校验、复杂业务逻辑，可以通过接口中转：

• web.op.org/web.my_site.org的前端调用自身后端接口，传递存储操作参数。
• 自身后端通过CORS请求调用example.org的后端接口，由example.org后端生成存储指令，返回给example.org的前端页面执行，最终将结果回传至发起请求的页面。

这种方案流程繁琐，适合需要后端介入的场景。

注意事项 #

• 必须严格校验postMessage的event.origin，防止恶意页面冒充合法域名发起操作。
• Session Storage与标签页上下文绑定，通过iframe操作时，Session Storage的生命周期和iframe一致，iframe销毁后对应存储会失效。
• 存储内容大小不能超过浏览器限制（通常Local Storage约5MB）。

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