After upgraded electron from 4.1.4 to 5.0.0, I got this error
Blocked a frame with origin "file://" from accessing a cross-origin frame. at HTMLIFrameElement.preload (renderer.js:31:78)
I added new BrowserWindow({ webPreferences }) as shown here but this error still exist.
Here's my index.html
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<iframe data-bind="visible: showIframe, attr:{src:appUrl}" allow="autoplay; geolocation; microphone; camera" allowfullscreen></iframe>
</body>
<script>
require('./renderer.js');
</script>
</html>
Here's some code from main.js
const {
autoUpdater
} = require('electron-updater');
const platform = require('os').platform();
const electron = require('electron');
const fs = require('fs-extra');
const CronJob = require('cron').CronJob;
const {
app,
BrowserWindow,
Tray,
Menu,
ipcMain
} = electron;
const path = require('path');
const url = require('url');
const {
appConf, uiConf
} = require('./config.json');
// Deep linked url
let deeplinkingUrl;
//global reference for main window
let mainWindow = null;
let mainWindowWidth = 1100;
let mainWindowHeight = 650;
if (uiConf.width) {
mainWindowWidth = uiConf.width;
}
if (uiConf.height) {
mainWindowHeight = uiConf.height;
}
app.on('ready', (e) => {
createWindow();
});
/**
* creating main window for app
*/
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
webSecurity: false
},
minWidth: mainWindowWidth,
width: mainWindowWidth,
minHeight: mainWindowHeight,
height: mainWindowHeight,
icon: path.join(__dirname, appConf.appIcon),
title: appConf.appName,
show: false
});
mainWindow.once('ready-to-show', () => {
mainWindow.show();
});
mainWindow.setMenu(null);
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
// Open the DevTools.
mainWindow.webContents.openDevTools();
}
Here's my renderer.js
(function () {
const {
ipcRenderer,
shell
} = require('electron');
const {
appConf
} = require('./config.json');
const checkInternetConnected = require('check-internet-connected');
/*
* For screenshare
*/
var appFrame = document.getElementsByTagName('iframe')[0];
function preload() {
document.getElementsByTagName('iframe')[0].contentWindow.desktopCapturer = require('electron').desktopCapturer;
document.getElementsByTagName('iframe')[0].contentWindow.electronOpenUrl = openUrlElectron;
document.getElementsByTagName('iframe')[0].contentWindow.deviceType = 'win';
}
appFrame.addEventListener('load', preload);
function sendToIFrame(type, data) {
appFrame.contentWindow.postMessage({
type: type,
data: data
}, "*");
}
function openUrlElectron(url) {
shell.openExternal(url);
}
// codes...
// codes...
// codes...
})();
The app works fine now, but I know my desktopCapturer will not work. I think contentWindow script elevation caused this issue or something I don't know.
After upgraded electron from 4.1.4 to 5.0.0, I got this error
Blocked a frame with origin "file://" from accessing a cross-origin frame. at HTMLIFrameElement.preload (renderer.js:31:78)
I added new BrowserWindow({ webPreferences }) as shown here but this error still exist.
Here's my index.html
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<iframe data-bind="visible: showIframe, attr:{src:appUrl}" allow="autoplay; geolocation; microphone; camera" allowfullscreen></iframe>
</body>
<script>
require('./renderer.js');
</script>
</html>
Here's some code from main.js
const {
autoUpdater
} = require('electron-updater');
const platform = require('os').platform();
const electron = require('electron');
const fs = require('fs-extra');
const CronJob = require('cron').CronJob;
const {
app,
BrowserWindow,
Tray,
Menu,
ipcMain
} = electron;
const path = require('path');
const url = require('url');
const {
appConf, uiConf
} = require('./config.json');
// Deep linked url
let deeplinkingUrl;
//global reference for main window
let mainWindow = null;
let mainWindowWidth = 1100;
let mainWindowHeight = 650;
if (uiConf.width) {
mainWindowWidth = uiConf.width;
}
if (uiConf.height) {
mainWindowHeight = uiConf.height;
}
app.on('ready', (e) => {
createWindow();
});
/**
* creating main window for app
*/
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
webSecurity: false
},
minWidth: mainWindowWidth,
width: mainWindowWidth,
minHeight: mainWindowHeight,
height: mainWindowHeight,
icon: path.join(__dirname, appConf.appIcon),
title: appConf.appName,
show: false
});
mainWindow.once('ready-to-show', () => {
mainWindow.show();
});
mainWindow.setMenu(null);
// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
// Open the DevTools.
mainWindow.webContents.openDevTools();
}
Here's my renderer.js
(function () {
const {
ipcRenderer,
shell
} = require('electron');
const {
appConf
} = require('./config.json');
const checkInternetConnected = require('check-internet-connected');
/*
* For screenshare
*/
var appFrame = document.getElementsByTagName('iframe')[0];
function preload() {
document.getElementsByTagName('iframe')[0].contentWindow.desktopCapturer = require('electron').desktopCapturer;
document.getElementsByTagName('iframe')[0].contentWindow.electronOpenUrl = openUrlElectron;
document.getElementsByTagName('iframe')[0].contentWindow.deviceType = 'win';
}
appFrame.addEventListener('load', preload);
function sendToIFrame(type, data) {
appFrame.contentWindow.postMessage({
type: type,
data: data
}, "*");
}
function openUrlElectron(url) {
shell.openExternal(url);
}
// codes...
// codes...
// codes...
})();
The app works fine now, but I know my desktopCapturer will not work. I think contentWindow script elevation caused this issue or something I don't know.
Share Improve this question edited Apr 29, 2019 at 7:06 Matthew Herbst 32k26 gold badges90 silver badges136 bronze badges asked Apr 29, 2019 at 6:25 Freddy DanielFreddy Daniel 65111 silver badges25 bronze badges 3-
"I added
new BrowserWindow({ webPreferences })" Well it depends what you put inwebPreferences– Seblor Commented Apr 29, 2019 at 6:33 -
2
Have you set
webSecurity: falsein thewebPreferencesobject ? – Seblor Commented Apr 29, 2019 at 6:36 -
Set
webSecurity: falsebut the error still there – Freddy Daniel Commented Apr 29, 2019 at 7:06
2 Answers
Reset to default 14This is a known issue after Chrome 67 enabled by default the site isolation security feature, and it gets reflected in any frameworks that use Chromium releases that include it (e.g. Electron 5+)
http://www.chromium/Home/chromium-security/site-isolation
When debugging with --disable-web-security, it may also be necessary to disable Site Isolation (using --disable-features=IsolateOrigins,site-per-process) to access cross-origin frames.
Here are some open issues regarding it
https://github./electron/electron/issues/18214
https://github./cypress-io/cypress/issues/1951
In Electron 5+, until this is solved you can add this line before app 'ready' event
app.mandLine.appendSwitch('disable-site-isolation-trials');
I've got this error before and I fixed it by setting nodeIntegration = false, this allows cross-origin requests to be processed.
A side effect of this is the inter-process munication won't work anymore, but I found a way around it using a preload script (let me know if you'd like me to elaborate).