无需移除Content-Security-Policy即可允许本地API请求

1. 正确配置Electron中的CSP可信源 #

完全删除CSP是不安全的临时方案，你只需要在原有CSP规则中添加本地API的可信源，同时保留Ionic样式加载必需的规则即可。修改后的代码如下：

export function setupContentSecurityPolicy(customScheme: string): void {
  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [
          electronIsDev
            ? `default-src ${customScheme}://* http://localhost:* 'unsafe-inline' devtools://* 'unsafe-eval' data:`
            : `default-src ${customScheme}://* http://localhost:* 'unsafe-inline' data:`,
        ],
      },
    });
  });
}

关键配置细节： #

• http://localhost:*：允许向本地任意端口的API发起请求，如果你的API使用固定端口（比如3000），可以写成http://localhost:3000来缩小可信范围，提升安全性。
• 保留'unsafe-inline'：Ionic的CSS样式依赖内联样式规则，删除这个会导致样式加载失败——这也是你之前删除CSP后样式异常的原因，浏览器默认的CSP规则比自定义规则更严格，直接拦截了内联样式。
• 若要更精细控制，可以拆分CSP指令，单独用connect-src管理API请求，避免过度放宽default-src：

  // 精细配置示例
  electronIsDev
    ? `default-src ${customScheme}://* 'unsafe-inline' devtools://* 'unsafe-eval' data:; connect-src http://localhost:*`
    : `default-src ${customScheme}://* 'unsafe-inline' data:; connect-src http://localhost:*`,
  

2. 可以在Ionic-Angular编译前配置CSP #

不需要仅在Electron中修改，你可以直接在Ionic项目的index.html里通过meta标签配置CSP，编译后打包到Electron中同样生效。不过要注意：Electron的session响应头配置会覆盖HTML中的meta标签，所以两者二选一即可。

具体操作： #

在src/index.html的<head>区域添加：

<meta http-equiv="Content-Security-Policy" content="default-src ionic://* http://localhost:* 'unsafe-inline' 'unsafe-eval' data:; connect-src http://localhost:*">

环境区分配置（可选）： #

如果需要区分开发/生产环境的CSP规则，可以借助Angular的环境变量实现动态注入：

1. 在src/environments/environment.ts（开发环境）中定义：

   export const environment = {
     production: false,
     csp: "default-src ionic://* http://localhost:* 'unsafe-inline' devtools://* 'unsafe-eval' data:; connect-src http://localhost:*"
   };
   

2. 在src/environments/environment.prod.ts（生产环境）中定义：

   export const environment = {
     production: true,
     csp: "default-src ionic://* http://localhost:* 'unsafe-inline' data:; connect-src http://localhost:*"
   };
   

3. 在index.html中绑定环境变量：

   <meta http-equiv="Content-Security-Policy" content="<%= environment.csp %>">
   

这样编译时会自动根据环境注入对应的CSP规则。

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