Electron能否实现跨域名页面共享localStorage存储的token

该需求可以实现，但无法直接在非example.com域名的页面上下文中读取example.com域下存储的localStorage值，需要通过Electron的进程通信做一层中转。

Electron内置的Chromium内核遵循同源策略规则，localStorage是严格按「协议+域名+端口」的源维度隔离的：

• 即使你配置了webSecurity: false、给所有页面注入了preload脚本，在第三方域名页面执行localStorage.getItem('token')时，访问的也只是当前第三方域名自己的localStorage，无法直接跨源读取example.com下存储的token。
• 你目前能在example.com页面通过preload读到token，本质是preload运行在example.com的页面上下文里，匹配到了对应的存储源。

1. 捕获example.com域下的token，同步到主进程
   在preload脚本中判断当前页面域名，当处于example.com域时读取localStorage中的token，通过IPC发送给主进程存储，同时监听storage事件保证token更新时能实时同步：

   const { ipcRenderer } = require('electron')
   if (location.hostname.endsWith('example.com')) {
     // 初始化时同步一次token
     const savedToken = localStorage.getItem('token')
     if (savedToken) ipcRenderer.send('update-auth-token', savedToken)
     // 监听token变更实时同步
     window.addEventListener('storage', e => {
       if (e.key === 'token') ipcRenderer.send('update-auth-token', e.newValue)
     })
   }
   

2. 主进程全局维护token
   主进程接收preload发来的token，存在全局变量中，同时暴露IPC查询通道给所有渲染进程：

   const { ipcMain } = require('electron')
   let authToken = null
   ipcMain.on('update-auth-token', (_, newToken) => {
     authToken = newToken
   })
   ipcMain.handle('get-auth-token', () => authToken)
   

3. 任意页面的preload中获取token
   不管当前页面跳转到哪个域名，preload都可以通过IPC向主进程拿到存储的token，按需使用即可：

   const { ipcRenderer, contextBridge } = require('electron')
   // 可以根据需要决定是否把token暴露给页面上下文
   contextBridge.exposeInMainWorld('authInfo', {
     getToken: () => ipcRenderer.invoke('get-auth-token')
   })
   

• 实现上述功能不需要关闭webSecurity，建议把该配置改回默认的true，加载第三方页面时关闭webSecurity会带来极高的XSS、用户数据泄露风险。
• 不要无感知把token直接暴露给所有第三方页面的执行上下文，除非你完全信任所有跳转目标站点，避免token被恶意脚本窃取。

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