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`);
});

Genius!

As I can see, it's now requires urls option to be set, like this:

mainWindow.webContents.session.webRequest.onHeadersReceived(
    {urls: ['*://*/*']},
    (details, callback) => {
      if (details.responseHeaders['x-frame-options']) {
        delete details.responseHeaders['x-frame-options']
      }

      callback({
        cancel: false,
        responseHeaders: details.responseHeaders,
      })
    },
  )

@rewhex solution works, but some servers use capitalized header names. Here is a version that supports that too:

mainWindow.webContents.session.webRequest.onHeadersReceived(
  {urls: ['*://*/*']},
  (details, callback) => {
    Object.keys(details.responseHeaders).filter(x => x.toLowerCase() === 'x-frame-options')
          .map(x => delete details.responseHeaders[x])

    callback({
      cancel: false,
      responseHeaders: details.responseHeaders,
    })
  },
)

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?