在与Electronicon相同的BrowserWindow中有两个隔离的（在历史/ cookies / localstorage方面）BrowserViews [英] Having two isolated (in terms of history/cookies/localstorage) BrowserViews in the same BrowserWindow with Electron

问题描述

假设我在同一个 BrowserWindow 中有两个 BrowserView ，还有一个UI按钮，允许用户在显示之间切换 bv1 或 bv2 （如Firefox，Chrome等浏览器中的标签系统，可让您在不同页面）：

Let's say I have two BrowserView in the same BrowserWindow and an UI button allowing the user to switch between showing bv1 or bv2 (like the "tab" system in browsers like Firefox, Chrome, that allows you to switch between the different pages):

browserWindow = new BrowserWindow({ width: 1200, height: 600 });

let bv1 = new BrowserView({ webPreferences: { nodeIntegration: false }});
bv1.setBounds({ x: 0, y: 0, width: 1200, height: 600 });
bv1.webContents.loadURL('https://www.twitter.com');

let bv2 = new BrowserView({ webPreferences: { nodeIntegration: false }});
bv2.setBounds({ x: 0, y: 0, width: 1200, height: 600 });
bv2.webContents.loadURL('https://www.twitter.com');

browserWindow.setBrowserView(bv1);

当按下按钮（如浏览器中的标签）时：

and when a button (like a "tab" in a browser) is pressed:

browserWindow.setBrowserView(bv2);

我注意到这两个 BrowserView ：

• 共享相同的cookies / localStorage（我不想要！），即如果第一个连接到一个帐户，第二个也将连接到同一个帐户

• share the same cookies/localStorage (which I don't want!), i.e. if the first is connected to an account, the second will be connected as well to the same account

重新启动Electron应用程序后保留历史记录和Cookie（这很好，并且确实想要！）

keep history and cookies after restart of the Electron app (this is good and wanted indeed!)

问题：如何获得两个 BrowserView 完全孤立的就cookies / localStorage / history而言（因此 bv1 可以连接到一个Twitter帐户和 bv2 到另一个）？

Question: how to have the two BrowserView totally isolated in terms of cookies/localStorage/history (and thus bv1 could be connected to one Twitter account and bv2 to another one)?

推荐答案

所以，我设法让这个工作，但在一个非常非常迂回的方式。有效地会话劫持您自己的会话，保存并加载应用程序关闭/打开。下面的代码带有一些注释，前面有一些有用的链接。当作为开发人员运行时，以及使用构建应用程序运行时，这都有效。

So, I managed to get this working but in a very, very, roundabout way. Effectively session hijacking your own session, saving and loading it on app close/open. Code below with some comments, prefaced with some useful links. This worked when running as dev, and when running with a build application.

您可能需要在此处查找可能存在的安全问题，例如在本地存储Cookie。

You may need to look into possible security issues here with storing cookies locally like this.

我在这个答案中唯一没有解决的问题是：

The only thing I have not tackled in this answer is:

保留历史记录.. 。重新启动电子应用程序后

keep history ... after restart of the Electron app

---

• Electron-Json-Storage Package - 我们使用它来存储/检索cookie。存储的默认位置是 C：\Users \％user％\ AppData \Roaming\％appname％\storage 。


• 电子Cookie文档


• < a href =https://electronjs.org/docs/api/session =nofollow noreferrer>电子会话文档 - 值得注意的是 session.fromPartition docs。



---

• Electron-Json-Storage Package - We use this to store/retrieve cookies. The default location for storage is C:\Users\%user%\AppData\Roaming\%appname%\storage.
• Electron Cookies documentation
• Electron Session documentation - Notably the session.fromPartition docs.

const { app, BrowserWindow, BrowserView, globalShortcut, session } = require('electron');
const eJSONStorage = require('electron-json-storage');

// Our two different sesions, views, and base URL for our 'tabs'.
let bv1Session, bv2Session = session;
let bv1, bv2 = BrowserView;
const appTabUrl = 'https://www.twitter.com';

app.on('ready', () => {
  const width = 1200; const height = 600;
  let b1Active = true;

  // Our browser window
  browserWindow = new BrowserWindow({
    width: width,
    height: height,
  });

  // Our first browser window with it's own session instance.
  bv1Session = session.fromPartition('persist:bv1Session', { cache: true });
  bv1 = createBrowserView(appTabUrl, bv1Session, width, height);
  loadCookieState('view1Cookies', bv1Session);

  // Our second browser window with it's own session instance.
  bv2Session = session.fromPartition('persist:bv2Session', { cache: true });
  bv2 = createBrowserView(appTabUrl, bv2Session, width, height);
  loadCookieState('view2Cookies', bv2Session);

  // Our initial setting of the browserview
  browserWindow.setBrowserView(bv1);

  // Our shortcut listener and basic switch mechanic
  // Set to [CTRL + /] for windows or [CMD + /] for OSX
  globalShortcut.register('CommandOrControl+/', () => {
    b1Active ? browserWindow.setBrowserView(bv2) : browserWindow.setBrowserView(bv1);
    b1Active = !b1Active
  });
});

// When the app closes, exit gracefully.
// Unregister keypress listener, save cookie states, exit the app.
app.on('window-all-closed', () => {
  globalShortcut.unregisterAll();
  saveCookieState('view1Cookies', bv1Session);
  saveCookieState('view2Cookies', bv2Session);
  app.quit();
})

// Helper method to generate a browser view.
function createBrowserView(url, session, width, height) {
  let browserView = new BrowserView({
    webPreferences: {
      nodeIntegration: false,
      nodeIntegrationInWorker: false,
      session: session
    }
  });
  browserView.setBounds({ x: 0, y: 0, width: width, height: height });
  browserView.webContents.loadURL(url);
  return browserView;
}

// Method that takes a session name, and our current session to save its state.
function saveCookieState(sessionName, currentSession) {
  currentSession.cookies.get({}, (_, cookies) => {
    cookies.forEach(cookie => {
      // URL is a required paramater, take it from the domain with a little parsing.
      // Twitter always uses HTTPS otherwise, we would need to check for http vs https too.
      const cDomain = !cookie.domain.startsWith('.') ? `.${cookie.domain}` : cookie.domain;
      cookie.url = `https://www${cDomain}`
    });
    // Save the set of cookies against the session name.
    eJSONStorage.set(sessionName, cookies, err => {
      if (err) {
        throw err;
      }
    });
  });
}

// Method that loads a session based on its name, into a session created by us.
function loadCookieState(sessionName, currentSession) {
  eJSONStorage.get(sessionName, (error, cookieData) => {
    // Check for empty object returned, this means no saved sessions.
    if (Object.entries(cookieData).length === 0) {
      return;
    }
    if (error) {
      throw error;
    }
    // If we have saved sessions and no errors, load the sessions.
    cookieData.forEach(cookie => currentSession.cookies.set(cookie, error => {
      if (error) console.error(error);
    }));
  });
}

这篇关于在与Electronicon相同的BrowserWindow中有两个隔离的（在历史/ cookies / localstorage方面）BrowserViews的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！