使用 React 和 Webpack 在 Electron 应用程序中违反内容安全策略答案

【问题标题】：Violating Content Secuirty Policy in Electron app using React and Webpack使用 React 和 Webpack 在 Electron 应用程序中违反内容安全策略
【发布时间】：2022-01-26 12:14:51
【问题描述】：

我目前正在制作一个尝试从 API 获取数据的小型应用程序。首先，我使用了 electron-forge 的 webpack 和 react 模板来开始。

在 HTML 文件的 meta 标记中没有任何 CSP 配置，我收到此错误：

在我的主 HTML 文件中添加了以下 CSP：

<meta
      charset="UTF-8"
      http-equiv="Content-Security-Policy"
      content="default-src 'self' 'unsafe-inline' data: https://api.flybywire.com/;"
    />

这会导致呈现器中出现空白页面的错误（之前，它正确显示了页面的其余部分）。

如果我将“unsafe-eval”添加到 CSP，我会得到这个。

奇怪的是，这里似乎有两个 CSP 政策。我在没有 WebPack 的情况下制作了一个电子应用程序，之前在线获取数据没有问题，我对它不熟悉。我感觉问题出在那儿。

我尝试通过在module.exports 下添加devtool: "eval-source-map" 来编辑我的webpack.renderer.config.js，但无济于事。

源代码在这个github repository下，但是我没有推送调用位于metar.jsx的数据获取函数的版本。

任何帮助都将不胜感激，因为我这几天一直在寻找修复方法。

【问题讨论】：

标签： javascript reactjs webpack electron

【解决方案1】：

找到了解决方案。正如我所怀疑的，确实有一个单独的安全策略。但是，如果使用电子锻造，有一种方法可以在您的 package.json 中添加

"devContentSecurityPolicy":"default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;"

就这样

        [
          "@electron-forge/plugin-webpack",
          {
            "devContentSecurityPolicy":"default-src * self blob: data: gap:; style-src * self 'unsafe-inline' blob: data: gap:; script-src * 'self' 'unsafe-eval' 'unsafe-inline' blob: data: gap:; object-src * 'self' blob: data: gap:; img-src * self 'unsafe-inline' blob: data: gap:; connect-src self * 'unsafe-inline' blob: data: gap:; frame-src * self blob: data: gap:;",

            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/index.html",
                  "js": "./src/renderer.js",
                  "name": "main_window"
                }
              ]

请注意，CSP 非常不安全，因为它允许文档中的所有内容。应该修改它以仅包含以后需要的内容。不过，我很高兴找到了这个隐藏设置的位置。

【讨论】：