Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
lbronner
New Member

Run powerbi embeded report in electron and iframe

Hi 🙂

 

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

 

I launch it in electron 29.2.0 in iframe

I Have this error :

lbronner_0-1717578751164.png

 

And the screen is

lbronner_1-1717578764115.png

 

The request seems good

lbronner_3-1717578862054.png

 

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 🙂

1 ACCEPTED SOLUTION
v-xiandat-msft
Community Support
Community Support

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.

 

View solution in original post

2 REPLIES 2
v-xiandat-msft
Community Support
Community Support

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.

 

Using electron 30 resolved the problem

Helpful resources

Announcements
July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.

Top Solution Authors