连接到我的 api 时出现电子内容安全策略错误

Posted

技术标签:

【中文标题】连接到我的 api 时出现电子内容安全策略错误【英文标题】:Electron Content Security Policy error when connecting to my api 【发布时间】:2022-01-04 23:31:32 【问题描述】:

创建一个简单的模板电子应用程序。我想向我的 api 发出 fetch 请求,但不断被内容安全策略错误阻止,我不知道如何修复它们。

拒绝连接到“https://api.myapp.com/”,因为它违反了 以下内容安全策略指令:“default-src 'self' 'unsafe-inline' 数据:"。请注意,'connect-src' 不是明确的 设置,所以 'default-src' 被用作后备。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' ">
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

app.js

 const handleSubmit = async () => 
    const response = await fetch("https://api.myapp.com/books", 
      method: "GET",
      headers: 
        "Content-Type": "application/json",
      ,
    );
    return response.json();
  ;

我已尝试将 api 地址添加到现有策略中,并添加其他策略但没有任何效果。

【问题讨论】:

【参考方案1】:

我找到了答案。似乎 Webpack 使用了开发人员模式的默认内容安全策略,可以在 package.json 中覆盖。

取自 webpack WebpackPluginRendererConfig

/**
     * Sets the [`Content-Security-Policy` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)
     * for the Webpack development server.
     *
     * Normally you would want to only specify this as a `<meta>` tag. However, in development mode,
     * the Webpack plugin uses the `devtool: eval-source-map` source map setting for efficiency
     * purposes. This requires the `'unsafe-eval'` source for the `script-src` directive that wouldn't
     * normally be recommended to use. If this value is set, make sure that you keep this
     * directive-source pair intact if you want to use source maps.
     *
     * Default: `default-src 'self' 'unsafe-inline' data:;`
     * `script-src 'self' 'unsafe-eval' 'unsafe-inline' data:`
     */
    devContentSecurityPolicy?: string;

通过在 package.json 中设置 devContentSecurityPolicy,我可以设置自己的内容安全策略。

"plugins": [
        [
          "@electron-forge/plugin-webpack",
          
            "mainConfig": "./webpack.main.config.js",
            "devContentSecurityPolicy": "connect-src 'self' https://api.myapp.com 'unsafe-eval'",
            "renderer": 
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                
                  "html": "./src/index.html",
                  "js": "./src/renderer.ts",
                  "name": "main_window"
                
              ]
            
          
        ]
      ]

注意:更改并保存不会更新应用中的策略。您需要停止并再次运行“npm start”以应用这些更改。

【讨论】:

干得好!感谢您分享解决问题的方法。 拯救我的一天!非常感谢! 太棒了!这是一个很好的答案。【参考方案2】:

在违规消息中,您有一个白名单:拒绝连接到...以下内容安全策略指令:“default-src 'self' 'unsafe-inline' data:”.

但在元标记中,您显示了不同的白名单:default-src 'self' 'unsafe-eval'

这意味着您至少有 2 个 CSP 在运行。几个 CSP 充当一致的过滤器 - 所有打算被允许的源都应该通过所有过滤器。因此,应用了所有 CSP 中最严格的规则。

找出您在哪里发布第一个 CSP 并将 connect-src https://api.myapp.com 添加到其中。并删除元标记中的 CSP。

很可能是某个包通过 HTTP 标头 (how to check) 发布了他的默认 CSP,因此 Helmet 受到怀疑 - 它从 v4 开始发布默认 CSP。 当然你可以直接发布 CSP HTTP 头,代码如下:

session.defaultSession.webRequest.onHeadersReceived((details, callback) => 
  callback( responseHeaders: Object.assign(
    ...details.responseHeaders,
    "Content-Security-Policy": [ "default-src 'self' 'unsafe-inline' data:" ]
    , details.responseHeaders));
  );

【讨论】:

非常感谢您的回复,它帮助我找到了额外的内容安全政策。

以上是关于连接到我的 api 时出现电子内容安全策略错误的主要内容,如果未能解决你的问题,请参考以下文章

加载脚本时出现内容安全策略错误

facebook 聊天进入网站时出现内容安全策略错误?

当我尝试从 Android Emulator 调用 MFP 适配器时出现以下错误

WCF 托管在 IIS 中,连接到具有集成安全性的数据库时出现问题

尝试使用 SQLWorkbench 连接到 Amazon Redshift 时出现操作超时错误

在 Mac OSx 上通过 SSH 连接到 EC2 时出现权限错误