Electron应用localhost环境下font-src CSP报错的解决方法

方案1：用通配符匹配localhost任意端口 #

直接修改meta标签里的font-src规则，加上端口通配符*：

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; connect-src https://data.global; font-src http://localhost:*; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'"
/>

http://localhost:*会匹配localhost的所有端口，不管你的开发服务器随机生成哪个端口，字体请求都能通过CSP校验，这是最简单直接的办法。

方案2：动态生成CSP（适合完全随机端口场景） #

如果你的端口完全不可预测，可以在Electron主进程里动态获取开发服务器的实际地址，然后生成对应的CSP规则，不用在HTML里写死。

主进程代码示例：

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

async function createWindow() {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  // 这里以Vite为例，获取开发服务器的URL（不同工具可能有不同获取方式）
  const devServerUrl = 'http://localhost:' + process.env.VITE_DEV_SERVER_PORT;
  const origin = new URL(devServerUrl).origin;

  // 动态拼接CSP规则
  const csp = `default-src 'self'; connect-src https://data.global; font-src ${origin}:*; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'`;

  // 通过请求拦截设置CSP响应头
  mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [csp]
      }
    });
  });

  await mainWindow.loadURL(devServerUrl);
}

app.whenReady().then(createWindow);

这种方式完全适配随机端口，而且不用修改HTML里的meta标签，适合复杂的开发环境配置。

方案3：允许本地文件协议加载字体 #

看你的字体路径是本地文件被转成了http链接，也可以直接在font-src里加上file:协议，允许本地字体文件加载：

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; connect-src https://data.global; font-src http://localhost:* file:; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'"
/>

加上file:后，即使字体通过本地文件协议加载也不会被拦截，适合开发时本地资源的加载场景。

生产环境建议 #

上线的时候，把字体文件打包到应用内部，用相对路径或者'self'规则加载，这样就不用依赖外部端口，CSP规则也更安全。

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