Electron如何配置content-security-policy放行指定端口localhost API调用

完全可以通过原生CSP规则实现需求，无需将所有API调用都转发到主进程通过IPC通信。

核心配置示例 #

假设你的独立Node.js代理服务监听本地3000端口，直接在响应头或meta标签中配置如下CSP规则即可：

Content-Security-Policy: default-src 'self'; connect-src 'self' http://localhost:3000 http://127.0.0.1:3000;

规则说明 #

• default-src 'self' 作为默认兜底规则，对所有未单独配置策略的资源类型生效，仅允许加载应用自身源下的资源，和你原本需要的限制效果完全一致
• connect-src 是专门控制fetch、XHR、Ajax、WebSocket这类网络请求权限的指令，追加本地两个loopback回环地址（localhost和127.0.0.1）的指定端口后，渲染进程可直接向该本地服务发起请求，不会被CSP拦截
• 所有未加入白名单的外部域名请求，无论是脚本、样式、媒体资源加载还是接口调用，都会被CSP默认拦截，完全满足“仅放行本地指定端口API、拦截其余所有外部请求”的核心诉求

配置注意事项 #

• 禁止为了省事配置http://localhost:*通配所有本地端口，会放大本地其他服务带来的安全风险，必须明确填写代理服务实际监听的固定端口
• 如果本地服务需要使用WebSocket通信，只需在connect-src配置中追加对应ws协议地址即可，例如ws://localhost:3000
• 不要为了放行本地请求随意添加'unsafe-inline'、'unsafe-eval'这类高危CSP配置，该场景完全不需要上述配置，添加后会大幅降低Electron应用的抗攻击能力
• 保持Electron BrowserWindow配置中webSecurity: true的默认设置（不要手动设为false），CSP规则仅在webSecurity开启时会正常生效

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