Electron - throws Not allowed to load local resource when using showOpenDialog

问题

I just wanted to use showOpenDialog and load an image. But when I select an image app will crash.

main.js:

...
  ipcMain.on('open-file-dialog', function (event) {
    const window = BrowserWindow.getFocusedWindow();

    dialog.showOpenDialog(window, {
      properties: ['openFile']
    }, p => {
      console.log(p)
    });
  })

renderer.js:

document.querySelector('#select-image').addEventListener('click', function (event) {
    ipcRenderer.send('open-file-dialog')
});

When I select anything this error shows in console : Not allowed to load local resource: file:///start and the Electron version is 8.2.5

Edit 1:

This warning (or may be error) is shown in the terminal objc[50899]: Class FIFinderSyncExtensionHost is implemented in both /System/Library/PrivateFrameworks/FinderKit.framework/Versions/A/FinderKit (0x7fff951e61d0) and /System/Library/PrivateFrameworks/FileProvider.framework/OverrideBundles/FinderSyncCollaborationFileProviderOverride.bundle/Contents/MacOS/FinderSyncCollaborationFileProviderOverride (0x11298bdc8). One of the two will be used. Which one is undefined.

Edit 2: I put together sample Gist using Electron Fiddle : here

回答1:

Electron doesn't allow windows with webSecurity: true to load files. You could simply set it to false and get rid of the error but it would make your app unsafe to use.

Instead, what you have to do is to create a custom protocol and then use that for loading files.

Step 1: Create a custom protocol

Main process:

import { protocol } from 'electron'

...

app.on('ready', async () => {
  // Name the protocol whatever you want
  const protocolName = 'safe-file-protocol'

  protocol.registerFileProtocol(protocolName, (request, callback) => {
    const url = request.url.replace(`${protocolName}://`, '')
    try {
      return callback(decodeURIComponent(url))
    }
    catch (error) {
      // Handle the error as needed
      console.error(error)
    }
  })
  ...

Step 2: use protocol to load files

Method 1: get path from the main process:

Main process:

ipcMain.on('open-file-dialog', function (event) {
  const window = BrowserWindow.getFocusedWindow();

  dialog.showOpenDialog(window, { properties: ['openFile'] })
    .then(result => {
      // Send the path back to the renderer
      event.sender.send('open-file-dialog-reply', { path: result.filePaths[0] })
    })
    .catch(error => {
       console.log('Could not get file path')
    })
})

Renderer process:

<img id="image-1">

ipcRenderer.on('open-file-dialog-reply', (event, data) => {
  const path = data.path
  loadImage(path)
}

function loadImage (path) {
  const image1 = document.getElementById('image-1')
  image1.src = `safe-file-protocol://${path}`
}

Method 2: load path directly in the renderer:

Renderer process:

<img id="image-1" data-path="C:/test.jpg">

function loadImage () {
  const image1 = document.getElementById('image-1')
  const path = image1.dataset.path
  image1.src = `safe-file-protocol://${path}`
}

loadImage()

来源：https://stackoverflow.com/questions/61623156/electron-throws-not-allowed-to-load-local-resource-when-using-showopendialog

标签

electron