How to load an external URL in <iframe> using Electron

main.js

/*
 * By default, Electron (well, underlying Chrome browser) will reject loading external URLs
 * to an <iframe>. To circumvent this limitation, we can manipulate response headers from any
 * http request and feed them to the Electron window.
 *
 * The 'onHeadersReceived' listener is documented here:
 * http://electron.atom.io/docs/api/session/#webrequestonheadersreceivedfilter-listener
 */

app.on('ready', () => {
  let myWindow = new BrowserWindow({
    width: 800,
    height: 800,
    center: true
  });
  
  // remove 'x-frame-options' header to allow embedding external pages into an 'iframe'
  myWindow.webContents.session.webRequest.onHeadersReceived({}, (details, callback) => {
    if(details.responseHeaders['x-frame-options']) {
        delete details.responseHeaders['x-frame-options'];
    }
    callback({ cancel: false, responseHeaders: details.responseHeaders });
  });
  
  // replace with whatever html you want to load in your electron window
  myWindow.loadURL(`file://${__dirname}/index.html`);
});

From my experience, I also need to remove content-security-policy header.

macOS 14.6.1
electron v27.0.2
vscode v1.93.0

I have removed content-security-policy header, it DOES NOT work.

electron DevTools shows error：

How to solve it?