Blocked a frame with origin "file://" from accessing a cross-origin frame in Electron

Question

So in an Electron App, I'm trying to open an URL and then access the window.external on it but I get the error:

Blocked a frame with origin "file://" from accessing a cross-origin frame

If I add the external.html inside the Electron app and make the index.html open the local one the window external is called as expected.

You will see i have added the webSecurity: false and allow-file-access as found online but neither are helping.

If anyone has has any idea how I get around the cross-origin frame It would be much appreciated.

Folder Structure:

Electron
|--main.js
|--index.html

Local WebServer
|-external.html

main.js:

function createWindow() {
    app.commandLine.appendSwitch('allow-file-access');
    lobby = new BrowserWindow(
        {
            width: 1200,
            height: 800,
            maximizable: true,
            center: true,
            webPreferences: {
                nativeWindowOpen: true,
                webSecurity: false
            }
        })
}

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

app.on('ready', createWindow);

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LOBBY TEST</title>
    <script></script>
</head>

<body>
    <script>
        let win = window.open("http://localhost/external.html");
        win.external.SilentLogin = (username, password) => {
            //DO STUFF HERE
        };
    </script>
</body>

</html>

external.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <H1>Windows Externals Test Page</H1>
</head>

<body align="center">
    <FORM>
        <div align="center">
            <INPUT TYPE="button" VALUE="Silent Login" onClick='window.external.SilentLogin("user1", "test");'></INPUT>
        </div>
    </FORM>
</body>

</html>

Blocked a frame with origin "file://" from accessing a cross-origin frame in Electron

0 Answers0