Electron应用中无法解决「拒绝加载媒体违反CSP」问题求助

已执行的配置 #

我查阅了Electron安全文档，并完成了以下配置：

• 在页面添加CSP meta标签：

<meta http-equiv="Content-Security-Policy" content="default-src 'none'">

• 配置BrowserWindow关闭部分安全校验：

mainWindow = new BrowserWindow({
    ...
    allowRunningInsecureContent: true,
    webSecurity: false
 })

• 为会话添加CSP请求头：

session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
      details.requestHeaders['Authorization'] = auth;
      callback({ cancel: false, 
        requestHeaders: details.requestHeaders,
        'Content-Security-Policy': ['default-src \'none\''] });
  });

遇到的报错 #

Refused to load media from 'file:...mp4' because it violates the following Content Security Policy directive: "media-src 'self' http://localhost:8989".

额外解决措施 #

1. 修正CSP规则，允许file协议加载媒体 #

当前报错显示CSP限制媒体只能从'self'和http://localhost:8989加载，而你配置的default-src 'none'并未覆盖media-src规则。需要在CSP中明确添加file:协议到media-src的允许列表：

• 页面meta标签修改：

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; media-src 'self' http://localhost:8989 file:">

• 会话级CSP同步修改：

callback({ 
  cancel: false, 
  requestHeaders: details.requestHeaders,
  'Content-Security-Policy': ['default-src \'none\'; media-src \'self\' http://localhost:8989 file:'] 
});

2. 排查并清除冲突的CSP规则 #

报错中的media-src规则和你配置的不一致，说明存在其他CSP注入来源（比如服务器响应头、页面脚本动态添加的CSP、Electron插件等）。需要检查所有可能的CSP来源，确保只有你配置的规则生效。

3. 配置本地文件访问权限 #

针对本地文件加载，可在BrowserWindow的webPreferences中添加allowFileAccess: true，确保应用有权限访问本地文件系统：

mainWindow = new BrowserWindow({
    ...
    webPreferences: {
      allowRunningInsecureContent: true,
      webSecurity: false,
      allowFileAccess: true
    }
 })

4. 规范本地文件路径 #

将本地媒体文件路径转换为标准的file://协议路径，避免相对路径或不规范路径触发CSP拦截。

内容的提问来源于stack exchange，提问作者Alex-1999