Electron自定义协议加载本地图片遭资源加载拒绝问题求助

• 基于Electron+React+Webpack+TypeScript模板开发离线应用，需加载本地图片，不想依赖外部服务器
• 尝试注册atom协议处理本地文件路径，代码如下：

app.whenReady().then(() => {
  protocol.registerFileProtocol('atom', (request, callback) => {
    const filePath = url.fileURLToPath(
      'file://' + request.url.slice('atom://'.length),
    );
    callback(filePath);
  });
});

• 配置Content Security Policy（CSP）后仍提示refused to load resource错误：

<meta
      http-equiv="Content-Security-Policy"
      content="
      worker-src atom:; 
      child-src atom: gap:;
      img-src 'self' atom: data:;
      default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"
    />

• React中渲染图片的方式：

const image_path = `atom://${image.path}`;
<img src={image_path} />

• 替换为blob/file协议时提示it is not allowed to load resource，关闭安全设置不可行。

1. 修复协议注册的路径逻辑 #

原路径处理存在潜在问题，需确保路径绝对化、添加安全校验，避免路径遍历风险：

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

app.whenReady().then(() => {
  protocol.registerFileProtocol('atom', (request, callback) => {
    // 截取协议后的路径部分
    const pathName = request.url.replace('atom://', '');
    // 转为绝对路径，限制读取范围到指定目录（示例：用户数据下的images文件夹）
    const allowedRoot = path.join(app.getPath('userData'), 'images');
    const absolutePath = path.resolve(pathName);
    
    // 校验路径是否在允许范围内
    if (!absolutePath.startsWith(allowedRoot)) {
      callback(new Error('Access denied'));
      return;
    }
    
    // 检查文件是否存在
    fs.access(absolutePath, fs.constants.F_OK, (err) => {
      if (err) {
        callback(err);
        return;
      }
      callback({ path: absolutePath });
    });
  });
});

2. 修正CSP配置 #

原配置存在语法错误，需调整规则确保atom:协议被正确允许：

<meta
  http-equiv="Content-Security-Policy"
  content="
  default-src 'self' 'unsafe-inline' 'unsafe-eval' data: gap:;
  img-src 'self' atom: data:;
  worker-src 'self' atom:;
  child-src 'self' atom: gap:;
  "
/>

3. 替代方案：Base64直接渲染 #

若协议方案仍有问题，可通过IPC读取文件转Base64后渲染：

主进程添加IPC处理 #

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

ipcMain.handle('read-local-image', async (event, imagePath) => {
  const allowedRoot = path.join(app.getPath('userData'), 'images');
  const absolutePath = path.resolve(imagePath);
  
  if (!absolutePath.startsWith(allowedRoot)) {
    throw new Error('Access denied');
  }
  
  const buffer = await fs.readFile(absolutePath);
  const ext = path.extname(absolutePath).slice(1);
  return `data:image/${ext};base64,${buffer.toString('base64')}`;
});

React组件中调用渲染 #

import { ipcRenderer } from 'electron';
import { useState, useEffect } from 'react';

const LocalImage = ({ imagePath }) => {
  const [src, setSrc] = useState('');

  useEffect(() => {
    const loadImage = async () => {
      try {
        const base64Src = await ipcRenderer.invoke('read-local-image', imagePath);
        setSrc(base64Src);
      } catch (err) {
        console.error('加载图片失败:', err);
      }
    };
    loadImage();
  }, [imagePath]);

  return <img src={src} alt="本地图片" />;
};

export default LocalImage;

关键注意事项 #

• 必须限制文件读取目录，防止路径遍历攻击
• 协议需在app.whenReady()后注册，且仅注册一次
• Webpack需将electron设为externals，避免打包错误

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