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.

1 Answers

0
Mike On

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 communication 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).