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

v1l68za4  于 2023-01-12  发布在  Node.js
关注(0)|答案(3)|浏览(96)

创建一个简单的模板电子应用程序。我想做一个获取请求到我的API,但不断停止的内容安全策略错误,我不知道如何修复它们。
拒绝连接到“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地址添加到现有策略中,并添加其他策略,但都不起作用。

cig3rfwq

cig3rfwq1#

我找到了这个问题的答案,Webpack似乎使用了一个默认的开发者模式的内容安全策略,这个策略可以在package.json中覆盖。
取自网络包网络包插件渲染器配置

/**
     * 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”以应用这些更改。*
67up9zun

67up9zun2#

在违规消息中,您有一个白名单:* 拒绝连接到...以下内容安全策略指令:“默认源代码"self"”不安全内联“数据:“.*
但在 meta标记中,您显示了一个不同的白名单:***默认源代码“自定义”“不安全值”***。
这意味着您至少有2个CSP在运行。几个CSP充当一致的过滤器-所有打算允许的源都应通过所有过滤器。因此,将应用所有CSP中最严格的规则。
确定在哪里发布第一个CSP并添加connect-src https://api.myapp.com,然后删除 meta标记中的CSP。
很可能是某个包通过HTTP头(如何检查)发布了默认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)});
  });
vptzau2j

vptzau2j3#

如果你使用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',
            },
          },
        ],
      },
    }),
  ],
};

相关问题