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

Question

I am currently making a small application that is trying to fetch data from an API. To begin, I used electron-forge's webpack and react template to get started.

Without any CSP configuration in the meta tag of the HTML file, I get this error:

Added the following CSP to my main HTML file:

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

This results in this error with a blank page in the renderer (before, it displayed the rest of the page correctly).

If I add 'unsafe-eval' to the CSP, I get this.

The strange thing is it appears that there are two CSP policies going on here. I have made an electron app without WebPack before that fetched data online with no issue, and I am unfamiliar with it. I have a feeling the issue lies in there.

I've tried editing my webpack.renderer.config.js by adding devtool: "eval-source-map" under module.exports to no avail.

The source code is available under this github repository , however I haven't pushed the version that calls the data fetching function which is located in metar.jsx .

Any help would be greatly appreciated as I have been scouring around for a fix for days now.

Answer 1

Found the solution. As I suspected, there was indeed a separate security policy. However, if using electron-forge, there is a way to specify this in your package.json by adding

"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:;"

Just like this

        [
          "@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"
                }
              ]

Just a caveat, that CSP is highly insecure because it allows everything in the document. It should be modified to include only what is needed later. However, I'm glad to have found where this hidden setting was.