Electron 引用本地图片 安全问题及解决

问题描述

YouComic Studio 开源项目是基于Electron + umijs + Typescript进行的开发。

由于Electron早起版本会有一定的安全性问题，我收到了Github bot自动检查并提出的安全性修复pull request

于是开始着手升级Electron以及相关的依赖。但是却到了一些问题，例如更新之后无法在Renderer内直接引用本地图片。出现了下面的问题：

原来卡片中应显示图片，但是图片缺无法加载。

定位错误

首先先从Console找到问题所在：

提示的错误是

net::ERR_UNKNOWN_URL_SCHEME

看来是Scheme的问题，查看图片的请求地址为:

file:///C:/Users/takayamaaren/xxx/xxx/xxxx/cover.jpg

将问题的关键锁定在scheme上，即file:///出了问题。

分析问题

这是由于Electron升级所带来的问题，原因是低版本（Electron 4.x）以下的版本存在着一定的安全问题，在4升级至5的版本中加入了更多的安全特性。

在这个Stack Overflow `Electron JS Images from Local File System问题中提到了这个错误

Electron by default allows local resources to be accessed by render processes only when their html files are loaded from local sources with the file:// protocol for security reasons.
If you are loading the html from any http:// or https:// protocol even from a local server like webpack-dev-server, access to local resources is disabled.
If you loading html pages