Run powerbi embeded report in electron and iframe

[lbronner]

Hi 🙂

I'm facing a problem with a powerBi report, on url type :

https://app.powerbi.com/reportEmbed?reportId=XXX&autoAuth=true&ctid=YYY

I launch it in electron 29.2.0 in iframe

I Have this error :

And the screen is

The request seems good

Same problem if i use https://www.npmjs.com/package/powerbi-client-react

But its ok if i use a webview intead of iframe (but webview is not recommended, and i'm facing other problems)

Here the electron.js code :

const {
  app,
  BrowserWindow,
  globalShortcut,
  screen,
  ipcMain,
} = require("electron");

let mainWindow;

app.commandLine.appendSwitch(
  "disable-features",
  "BlockInsecurePrivateNetworkRequests,PrivateNetworkAccessSendPreflights"
);

// ALLOW PUPPETEER AND OTHERS TO CONNECT
app.commandLine.appendSwitch("remote-debugging-port", "59059");

function createWindow() {
  mainWindow = new BrowserWindow({
    icon: `${__dirname}/build/favicon.ico`,
    title: "Instore Solution - Digital Signage Player",
    width: 640, //size.width,
    height: 480, //size.height,
    transparent: false,
    backgroundColor: "#000000",
    frame: false,
    fullscreen: false,
    resizable: true,
    webPreferences: {
      autoplayPolicy: "no-user-gesture-required",
      nodeIntegration: true,
      webSecurity: false,
      webviewTag: true,
      plugins: true,
      allowRunningInsecureContent: true,
      nodeIntegrationInSubFrames: true,
      contextIsolation: false,
    },
  });

  let appUrlLoaded = false;

  function resize(screen) {
    const windowBounds = mainWindow.getBounds();

    if (
      Math.abs(windowBounds.width - screen.bounds.width) > 2 ||
      Math.abs(windowBounds.height - screen.bounds.height) > 2 ||
      Math.abs(windowBounds.x - screen.bounds.x) > 2 ||
      Math.abs(windowBounds.y - screen.bounds.y) > 2
    ) {
      console.log(
        "size is different",
        windowBounds,
        screen.size,
        screen.bounds
      );

      mainWindow.setResizable(true);

      setTimeout(() => {
        try {
          mainWindow.setPosition(screen.bounds.x, screen.bounds.y);
          mainWindow.setSize(screen.bounds.width, screen.bounds.height);

          setTimeout(() => {
            try {
              mainWindow.setResizable(false);

              if (process.argv.indexOf("--dev") === -1) {
                mainWindow.loadURL(
                  `file://${__dirname}/build/index.html?rnd=${new Date().getTime()}`
                );
              } else {
                setTimeout(() => {
                  mainWindow.webContents.openDevTools();

                  mainWindow.loadURL(
                    `http://localhost:3001?rnd=${new Date().getTime()}`
                  );
                }, 3000);
              }
            } catch (ex) {
              console.error(ex);
            }
          });
        } catch (ex) {
          console.error(ex);
        }
      });
    }
  }

  function tryFullscreen() {
    try {
      const windowDisplay = screen.getDisplayNearestPoint({
        x: mainWindow.getBounds().x,
        y: mainWindow.getBounds().y,
      });

      if (windowDisplay) {
        resize(windowDisplay);
      }
    } catch (ex) {
      console.error(ex);
    }
  }

  setInterval(() => {
    tryFullscreen();
  }, 5000);

  tryFullscreen();

  globalShortcut.register("CommandOrControl+Shift+K", function () {
    BrowserWindow.getFocusedWindow().webContents.openDevTools();
  });

  mainWindow.webContents.session.webRequest.onHeadersReceived(
    { urls: ["*://*/*"] },
    (d, c) => {
      if (d.responseHeaders["X-Frame-Options"]) {
        delete d.responseHeaders["X-Frame-Options"];
      }
      if (d.responseHeaders["x-frame-options"]) {
        delete d.responseHeaders["x-frame-options"];
      }
      if (d.responseHeaders["content-security-policy"]) {
        delete d.responseHeaders["content-security-policy"];
      }
      if (d.responseHeaders["Content-Security-Policy"]) {
        delete d.responseHeaders["Content-Security-Policy"];
      }
      if (d.responseHeaders["content-security-policy-report-only"]) {
        delete d.responseHeaders["content-security-policy-report-only"];
      }
      if (d.responseHeaders["Content-Security-Policy-Report-Only"]) {
        delete d.responseHeaders["Content-Security-Policy-Report-Only"];
      }

      c({ cancel: false, responseHeaders: d.responseHeaders });
    }
  );

  mainWindow.on("closed", function () {
    globalShortcut.unregisterAll();

    mainWindow = null;
  });
}

ipcMain.on("getProcessArgs", (e) => (e.returnValue = process.argv));

app.on("ready", createWindow);

app.on("child-process-gone", (e, details) => {
  app.quit();
});

app.on("render-process-gone", (e, webContents, details) => {
  app.quit();
});

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", function () {
  if (mainWindow === null) {
    createWindow();
  }
});

Electron versions :

    "@electron-forge/cli": "^7.3.1",
    "@electron-forge/maker-deb": "^7.3.1",
    "@electron-forge/maker-rpm": "^7.3.1",
    "@electron-forge/maker-squirrel": "^7.3.1",
    "@electron-forge/maker-zip": "^7.3.1",
    "electron": "^29.2.0"

Hope you can help me,

Sry for my english 🙂

[Anonymous · Accepted solution]

Hi @lbronner ,

Starting with Electron v12, context isolation is enabled by default for security reasons. This means that the main world and the renderer world are isolated from each other. Since you're using Electron v29.2.0, ensure that context isolation is indeed enabled () and use a preload script to safely expose any necessary functionality to the renderer process.

Currently in Electron 30.0.0 there is Behavior Changed: cross-origin iframes now use Permission Policy to access features.

More details on context isolation and preload scripts can be found here:

Context Isolation | Electron (electronjs.org)

Electron 29.0.0 | Electron (electronjs.org)

Google Summer of Code 2024 | Electron (electronjs.org)

Best Regards,

Xianda Tang

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[lbronner]

Using electron 30 resolved the problem