Skip to content

Instantly share code, notes, and snippets.

@jangnezda
Created October 12, 2016 11:44
Show Gist options
  • Save jangnezda/50855df0afb3abe6dc7b315cd77bdebe to your computer and use it in GitHub Desktop.
Save jangnezda/50855df0afb3abe6dc7b315cd77bdebe to your computer and use it in GitHub Desktop.
How to load an external URL in <iframe> using Electron
/*
* 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`);
});
@AriJing
Copy link

AriJing commented Sep 12, 2024

macOS 14.6.1
electron v27.0.2
vscode v1.93.0

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

electron DevTools shows error:
image

How to solve it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment