Electron已设置img-src仍报CSP错误：提示未显式设置img-src

1. 双重CSP冲突：你使用的electron-app webpack-typescript模板中，webpack-dev-server或Electron默认配置会自动注入一条CSP头（即错误提示里的default-src 'self' 'unsafe-inline' data:），和你在index.html中通过meta标签设置的CSP叠加，导致出现两条冲突的错误。
2. 自定义协议写法错误：你在img-src里写的dir:不符合CSP语法规范，CSP无法识别这个不完整的协议源，所以即便显式设置了img-src，也无法允许dir://协议的图片加载。
3. 优先级问题：Electron中通过HTTP头传递的CSP优先级高于meta标签的CSP，所以你在index.html里配置的img-src会被webpack自动注入的CSP覆盖，导致配置不生效。

1. 修正CSP的自定义协议写法 #

把img-src中的dir:改为dir:*（允许所有dir://协议的资源），完整的meta标签CSP如下：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; img-src 'self' dir:* data:;">

2. 禁用webpack自动注入的CSP #

模板自带的webpack配置会自动添加CSP头引发冲突，需要手动关闭该行为：

• 找到项目中的webpack渲染进程配置文件（通常是webpack.renderer.config.js，无则在electron-webpack.json中配置）
• 在devServer选项中添加自定义header，清空自动注入的CSP：

module.exports = {
  devServer: {
    headers: {
      'Content-Security-Policy': ''
    }
  }
};

3. 更可靠的方式：在Electron主进程中设置CSP #

直接在创建窗口时通过webPreferences配置CSP，可完全覆盖所有来源的CSP设置，避免冲突：

// main.ts 中的窗口创建代码
import { BrowserWindow } from 'electron';

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    contextIsolation: true, // 保留默认安全配置
    contentSecurityPolicy: `default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; img-src 'self' dir:* data:;`
  }
});

验证修复 #

重启应用后，查看控制台是否还有CSP错误，同时检查Network面板中页面的Response Headers，确保只有你设置的CSP生效。

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