先直接给结论：关闭webSecurity: false绝对不是生产环境的选项，安全性极差——哪怕是开发阶段，也建议尽量不用，除非你明确知道自己在做什么。

为什么关闭webSecurity不安全？ #

Electron的webSecurity本质上是浏览器同源策略的扩展，用来隔离不同来源的内容，防止恶意脚本随意访问本地资源、跨域窃取数据。一旦关闭这个选项：

• 如果你的应用加载了任何外部网页（哪怕是第三方脚本、广告组件），这些外来内容可以直接读取你的本地文件系统、修改本地数据，甚至执行系统级别的危险操作；
• 哪怕你的应用是纯本地的，只要不小心引入了有漏洞的第三方依赖，攻击者就能利用这个缺口发起攻击。
  简单说，这相当于给你的应用开了个无锁的“后门”，风险高到离谱。

那有没有安全的方式加载本地图片？ #

当然有，而且不止一种，都是符合Electron安全规范的：

1. 自定义协议（最推荐的方式）

通过Electron的protocol API注册一个自定义协议，把本地文件路径映射到这个协议下，既绕过了同源限制，又不会破坏安全策略。

主进程代码示例：

const { app, protocol } = require('electron');
const path = require('path');

app.whenReady().then(() => {
  // 注册一个名为my-file的自定义协议
  protocol.registerFileProtocol('my-file', (request, callback) => {
    // 去掉协议前缀并解码路径
    const url = request.url.replace('my-file:///', '');
    const filePath = path.normalize(decodeURIComponent(url));
    // 返回处理后的本地文件路径
    callback({ path: filePath });
  });
});

然后在渲染进程的img标签里直接用这个协议：

<img src="my-file:///C:/Users/name/Desktop/1.png" alt="本地图片">

2. 转成Data URL加载

把本地图片读取成base64编码的Data URL，直接作为img标签的src属性。这种方式适合小图片，避免文件路径的权限问题。

推荐用预加载脚本+IPC的方式（更安全，不会暴露Node.js API给渲染进程）：

预加载脚本（preload.js）：

const { contextBridge, ipcRenderer } = require('electron');

// 给渲染进程暴露安全的API接口
contextBridge.exposeInMainWorld('imageLoader', {
  getBase64Image: (filePath) => ipcRenderer.invoke('get-base64-image', filePath)
});

主进程代码：

const { ipcMain } = require('electron');
const fs = require('fs');
const path = require('path');

// 处理渲染进程的图片读取请求
ipcMain.handle('get-base64-image', async (_, filePath) => {
  try {
    // 可以在这里增加路径合法性校验，限制可访问的目录
    const absolutePath = path.resolve(filePath);
    const base64Data = fs.readFileSync(absolutePath, { encoding: 'base64' });
    return `data:image/png;base64,${base64Data}`;
  } catch (err) {
    console.error('读取图片失败:', err);
    return null;
  }
});

渲染进程使用：

async function loadLocalImage() {
  const imgSrc = await window.imageLoader.getBase64Image('C:/Users/name/Desktop/1.png');
  if (imgSrc) {
    const img = document.createElement('img');
    img.src = imgSrc;
    document.body.appendChild(img);
  }
}
loadLocalImage();

3. 把图片放到应用资源目录

如果是应用自带的图片，直接把图片放到应用的assets或者resources目录下，然后用相对路径加载即可：

<img src="./assets/1.png" alt="应用内置图片">

这种方式完全符合安全策略，不需要任何特殊配置，适合应用自身携带的资源。

总结 #

• 永远不要在生产环境关闭webSecurity，开发阶段也尽量不用；
• 自定义协议和Data URL（配合IPC）是加载用户本地图片的安全方式；
• 应用内置图片直接用相对路径即可。

内容的提问来源于stack exchange，提问作者Un1