Custom protocol not working in development

[michael-dm]

Describe the bug

Setting up a custom protocol does not work in development (with a dev server). It works fine when loading the html file.
Error is ERR_UNKNOWN_URL_SCHEME.

import { protocol } from 'electron'

protocol.registerSchemesAsPrivileged([
    {
      scheme: 'file',
      privileges: {
        supportFetchAPI: true,
        bypassCSP: true,
        corsEnabled: true
      }
    }
  ])

in renderer :

<img src="file:///Users/path-to/img1.jpg" />

Tested on Mac ARM.

Electron-Vite Version

1.0.10

Electron Version

21.1.1

Vite Version

3.1.8

Validations

• Follow the Code of Conduct.
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alex8088]

hi, @michael-dm

Can you give me more details to reproduce this. And my solution for custom protocol :

• register scheme before the ready event of the app

protocol.registerSchemesAsPrivileged([
  {
    scheme: 'app',
    privileges: {
      supportFetchAPI: true,
      bypassCSP: true,
      corsEnabled: true
    }
  }
])

• register protocol to convert app:// to file://

protocol.registerFileProtocol('app', (request, callback) => {
  const absUrl = path.join(__dirname, '../../build', request.url.substr(6))
  return callback({ path: path.normalize(absUrl) })
})

• use in renderer (vue )

<script setup lang="ts">
const icon = 'app:///icon.png'
</script>

<template>
  <img :src="icon" />
</template>

Furthermore, it is not necessary to register scheme for file:// that supported by default.

[michael-dm]

I didn't realise you still had to use "registerFileProtocol" when using "registerSchemesAsPrivileged". Thanks it works now 👍

file:// is not supported when "webSecurity" is enabled, best practice is to filter which files the renderer can access using a custom protocol.