How to open new window in electron using window.open in renderer process?

Question

I have an angular application which is wrapped as electron app. Now when, in the renderer process I call Window.open for an internal route, I get a message saying Not allowed to load a local resource and a blank window opens. How do I get around this ?

preload.js

const { contextBridge, ipcRenderer } = require("electron");

const validChannels = ['sample-event-1', 'sample-event-2', 'sample-event-3'];
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels To Main Process
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            // From Main Process
            if (validChannels.includes(channel)) {
                console.log('receive: ' + channel);
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

main.js

        mywindow = new BrowserWindow({
            width: 1024,
            height: 768,
            webPreferences: {
                nodeIntegration: false,
                webSecurity: true,
                allowEval: false,
                allowRunningInsecureContent: false,
                contextIsolation: true, // protect against prototype pollution
                enableRemoteModule: false, // turn off remote
                preload: path.join(__dirname, "preload.js") // use a preload script
            },
            title: this._appTitle,
            autoHideMenuBar: true,
            icon: path.join(__dirname, '/../../favicon.ico')
        });

Things I tried

1. Added a listener for new-window : Did not work

myWindow.webContents.on('new-window', (event, url, frameName, disposition, options) => {
  event.preventDefault()
  const win = new BrowserWindow({
    webContents: options.webContents, // use existing webContents if provided
    show: false
  })
  win.once('ready-to-show', () => win.show())
  if (!options.webContents) {
    win.loadURL(url) // existing webContents will be navigated automatically
  }
  event.newGuest = win
});

2. Added nativeWindowOpen flag to main process which creating the main BrowserWindow.: Did not work

I do not want to use the require('electron') modules or nodeIntegration:true since as per the material available online/documentation it adds to security concerns. Please suggest!

Answer 1

In case someone is looking for an answer, here is how I worked this one out.

As per preload.js I added following operation

const { contextBridge, ipcRenderer, remote } = require("electron");

const validChannels = ['sample-event-1', 'sample-event-2', 'sample-event-3'];
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels To Main Process
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            // From Main Process
            if (validChannels.includes(channel)) {
                console.log('receive: ' + channel);
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        },
        openNewWindow: (url) => {
            var BrowserWindow = remote.BrowserWindow;
            var win = new BrowserWindow({
                width: 1024,
                height: 768,
                show: true,
                webPreferences: {
                    nodeIntegration: false,
                    webSecurity: true,
                    allowEval: false,
                    nativeWindowOpen: true,
                    allowRunningInsecureContent: false,
                    contextIsolation: true,
                    enableRemoteModule: true,
                    preload: path.join(__dirname, "preload.js")
                },
                autoHideMenuBar: true,
                icon: path.join(__dirname, 'favicon.ico')
            });

            win.loadURL(url.format({
                pathname: path.join(__dirname, url, 'index.html'),
                protocol: 'file:',
                slashes: true,
            }));
        }
    }
);

From renderer process

(window as any).api.openNewWindow(urlToOpen);

Answer 2

Are you using secure-electron-template? Your code looks similar to that. FYI - I'm the author of that library.

It looks like you took the sample code from here, my guess is that win is being garbage collected. Try creating win outside the .webContents.on('new-window' call and see if that fixes it. Otherwise, I'd recommend posting an issue in the electron repository - I've seen it at least in one other case where their documentation was out of datel