Question

将电子从4.1.4升级到5.0.0后，出现此错误

阻止了源为“ file：//”的框架访问跨域框架。在HTMLIFrameElement.preload（renderer.js：31：78）

我添加了new BrowserWindow({ webPreferences })，如图here所示，但是此错误仍然存在。

这是我的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>

这是来自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();

  }

这是我的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...
})();

该应用现在可以正常运行，但是我知道我的desktopCapturer无法正常工作。我认为contentWindow脚本提升引起了此问题或我不知道的事情。

Answer 1

这是默认情况下启用Chrome 67的站点隔离安全功能后的一个已知问题，并且会在使用包含该功能的Chromium版本（例如Electron 5+）的任何框架中得到体现

http://www.chromium.org/Home/chromium-security/site-isolation

在使用--disable-web-security进行调试时，可能还需要禁用站点隔离（使用--disable-features = IsolateOrigins，按进程分配站点）以访问跨域框架。

这里有一些未解决的问题

https://github.com/electron/electron/issues/18214
https://github.com/cypress-io/cypress/issues/1951

在Electron 5+中，在解决此问题之前，您可以在应用程序“就绪”事件之前添加此行

app.commandLine.appendSwitch('disable-site-isolation-trials');

Answer 2

我之前遇到此错误，我通过设置nodeIntegration = false来解决，这允许处理跨域请求。

此操作的副作用是inter-process communication将不再起作用，但是我发现了使用预加载脚本解决该问题的方法（请让我知道您是否要详细说明）。

阻止来源为“ file：//”的框架访问跨域框架

2 个答案: