'Loading local file inside an iframe in Electron

I've tried different approaches but all are problematic.

So first of all I was using webview, but as per electron documentation, this tag is undergoing major architectural changes and it's recommended to use iframe or other alternatives. Furthermore, the webview tag gives me a warning while used alongside VueJS that the component is not registered. I understand this component doesn't exist within HTML standards and is something specific to electron, so I am not sure how to tell Vue to ignore or recognize it in the use case of an electron app.

Coming to the iframe problem, approach one of loading the file directly via src, gives me the obvious error Not allowed to load local resource:. Turning off webSecurity though allows the file to load but I read it's not recommended to turn it off. I am not sure if there are specific use case where it's safe to turn it off or shouldn't be at all.

I decided to try via file protocol as I already have it in place. The protocol code:

  protocol.registerFileProtocol('downloads', (request, callback) => {
    const url = request.url.substring('downloads:///'.length)

    const location = path.normalize(paths.downloads(url))

    callback({ path: location })
  })

Though when I load the file this way, the renderer process crash without errors. Is there something in addition to the above which would help loading local files via iframe?

Edit 1

My use case is the following: I have a typical entry point to an index.html which contains code for a VueJS app.

  if (app.isPackaged) {
    window.loadFile(join(__dirname, '../renderer/index.html'))
  } else {
    // 🚧 Use ['ENV_NAME'] avoid vite:define plugin
    const url = `http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`

    window.loadURL(url)

    window.webContents.openDevTools()
  }

Inside that VueJS app, I require to list html files from a directory. I am able to achieve so via webview but I have tried to move away from it for the reason mentioned above. I tried using iframe but encountered issues as well. If there's a setting that doesn't turn off all security and allows me to load the file via iframe, that would be ideal.

iframeelectronlocalizationamazon-quicksightquicksight-embedding


Solution 1:[1]

This is kind of the reverse of this question where they're using an iframe, running into the "not allowed to load local resource" and being told to use a <webview> instead.

The <webview> docs list BrowserView as another alternative which is what I would recommend here. That should be much easier to work with than an iframe.

const { app, BrowserView, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  const win = new BrowserWindow()
  const view = new BrowserView()
  win.setBrowserView(view)
  view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
  view.webContents.loadFile('<yourFile>')
})

Solution 2:[2]

Even though it is not recommended to use webview tag, I decided to go forward as it's the only thing that works for me. The only issue then was this error where Vue does not recognize the tag. To work around that error/warning, I had to update my vite.js config:

  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'webview'
        }
      }
    }),
  // ...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 pushkin
Solution 2 joeyj

Related Questions