阻止源为“file://”的帧访问跨源帧

提问者：小点点

阻止源为“file://”的帧访问跨源帧

电子从4.1.4升级到5.0.0后，我得到了这个错误

阻止原点为“file://”的帧访问跨源帧。at HTMLIFrameElement.preload （renderer.js：31：78）

我添加了新的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>

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

  }

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

这个应用程序现在运行良好，但我知道我的桌面捕获器将无法工作。我认为contentWindow脚本提升导致了这个问题或其他我不知道的问题。

共2个答案

匿名用户

这是Chrome 67默认启用站点隔离安全功能后的已知问题，并且它会反映在使用包含该功能的Chromium版本的任何框架中（例如Electron 5）

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

使用--disable-web-security进行调试时，可能还需要禁用Site Isolation（使用--disable-特性=IsolateOriins， site-per-Process）以访问跨域帧。

以下是关于它的一些公开问题

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

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

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

匿名用户

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

这样做的一个副作用是进程间通信不再有效，但我找到了一种使用预加载脚本的方法（如果您想让我详细说明，请告诉我）。