Electron 連接到我的 api 時內容安全策略錯誤

Question

創建一個簡單的模板 electron 應用程序。 我想向我的 api 發出獲取請求，但不斷被內容安全策略錯誤阻止，我不知道如何修復它們。

拒絕連接到“https://api.myapp.com/”，因為它違反了以下內容安全策略指令：“default-src 'self' 'unsafe-inline' data:”。 請注意，未明確設置“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>

應用程序.js

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

我已嘗試將 api 地址添加到現有策略，並添加其他策略但沒有任何效果。

Answer 1

在違規消息中，您有一個白名單：拒絕連接到...以下內容安全策略指令：“ default-src 'self' 'unsafe-inline' data:” 。

但是在元標記中，您顯示了一個不同的白名單： default-src 'self' 'unsafe-eval' 。

這意味着您至少有 2 個 CSP 在運行。 多個 CSP 充當一致的過濾器 - 所有打算允許的源都應通過所有過濾器。 因此，應用了所有 CSP 中最嚴格的規則。

找出您在哪里發布第一個 CSP 並將connect-src https://api.myapp.com添加到其中。 並刪除元標記中的 CSP。

很可能是一些 package 通過 HTTP header （如何檢查）發布了他的默認 CSP，因此Helmet v4 受到懷疑，因為它發布了默認 CSP
當然，您可以使用以下代碼直接發布 CSP HTTP header：

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

Answer 2

我找到了答案。 似乎 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”以應用這些更改。

Answer 3

如果您使用的是 forge.config.ts，您可以使用：

plugins: [
    new WebpackPlugin({
      mainConfig,
      devContentSecurityPolicy: "connect-src 'self' * 'unsafe-eval'",
      renderer: {
        config: rendererConfig,
        entryPoints: [
          {
            html: './src/index.html',
            js: './src/index.tsx',
            name: 'main_window',
            preload: {
              js: './src/preload.ts',
            },
          },
        ],
      },
    }),
  ],
};

Electron 連接到我的 api 時內容安全策略錯誤

問題描述

3 個解決方案

解決方案1
0 2021-11-27 08:29:07

解決方案2
0 2021-11-27 17:57:38

解決方案3
0 2023-01-11 21:29:45

Electron 連接到我的 api 時內容安全策略錯誤

問題描述

3 個解決方案

解決方案1 0 2021-11-27 08:29:07

解決方案2 0 2021-11-27 17:57:38

解決方案3 0 2023-01-11 21:29:45

解決方案1
0 2021-11-27 08:29:07

解決方案2
0 2021-11-27 17:57:38

解決方案3
0 2023-01-11 21:29:45