阻止了源为“file://”的框架访问跨源框架

Fre*_*iel 10 javascript electron

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

阻止了来源为“file://”的框架访问跨源框架。在 HTMLIFrameElement.preload (renderer.js:31:78)

new BrowserWindow({ webPreferences })此处添加,但此错误仍然存​​在。

这是我的 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>
Run Code Online (Sandbox Code Playgroud)

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

  }

Run Code Online (Sandbox Code Playgroud)

这是我的 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...
})();
Run Code Online (Sandbox Code Playgroud)

该应用程序现在运行良好,但我知道我的 desktopCapturer 将无法运行。我认为 contentWindow 脚本提升导致了这个问题或我不知道的事情。

Avr*_*dor 13

这是 Chrome 67 默认启用站点隔离安全功能后的一个已知问题,它反映在使用包含它的 Chromium 版本的任何框架中(例如 Electron 5+)

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

使用 --disable-web-security 进行调试时,可能还需要禁用站点隔离(使用 --disable-features=IsolateOrigins,site-per-process)以访问跨源框架。

这里有一些关于它的未解决的问题

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

在 Electron 5+ 中,在解决此问题之前,您可以在 app 'ready' 事件之前添加此行

app.commandLine.appendSwitch('disable-site-isolation-trials');
Run Code Online (Sandbox Code Playgroud)


Mik*_*ike 0

我之前遇到过这个错误,我通过设置nodeIntegration=修复了它false,这允许处理跨域请求。

这样做的一个副作用是进程间通信将不再起作用,但我找到了一种使用预加载脚本来解决它的方法(如果您希望我详细说明,请告诉我)。