[webpack] Add a configuration option to set the CSP header during development #2331

malept · 2021-06-18T18:37:28Z

Preflight Checklist

I have read the contribution documentation for this project.
I agree to follow the code of conduct that this project follows, as appropriate.
I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Problem Description

Extracted from #2289:

Webpack property `devtool` default not playing nice with content-security-policy

The new implementation of the devtool-property in the webpack config doesn't work with the following HTML tag: <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'"> since that prevents execution from eval that is being run somewhere in the defaults of webpack.

Proposed Solution

Add a top-level Webpack plugin configuration option to customize the CSP header sent by webpack-dev-server.

Alternatives Considered

Again, from #2289:

Manually set devtool: 'source-map' for the renderer process

This isn't ideal for a couple of reasons:

source-map is slower to generate than eval-source-map (or so I'm told)
This puts the onus on the app developer to know about this Webpack configuration option, and I'd prefer to avoid that.

Additional Information

Please note that app developers still need to set the <meta> tag appropriately, for when the Electron app is bundled and distributed.

This will probably also need documentation on the website.

The text was updated successfully, but these errors were encountered:

Eli-Black-Work · 2021-07-26T10:08:39Z

@malept, FYI, when we upgraded from 6.0.0-beta.57 to 6.0.0-beta.58 our app stopped working in development mode but works in production mode.

It appears that the default CSP headers in production mode allow for making requests to other domains (for example, we do POST requests to www.example.com), but the default CSP headers in development mode don't allow this.

malept · 2021-07-26T14:07:47Z

I'm unlikely to change this. In fact, I'm probably going to add default CSP headers to all of the templates, to match electron-quick-start.

UnsignedInt8 · 2021-07-27T00:58:14Z

@malept, FYI, when we upgraded from 6.0.0-beta.57 to 6.0.0-beta.58 our app stopped working in development mode but works in production mode.

It appears that the default CSP headers in production mode allow for making requests to other domains (for example, we do POST requests to www.example.com), but the default CSP headers in development mode don't allow this.

Add devContentSecurityPolicy to forge.config.js like this:

plugins: [
    [
      '@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.ts',
              name: 'main_window',
              preload: {
                js: './src/preload.ts',
              },
            },
          ],
        },
      },
    ],
  ]

Eli-Black-Work · 2021-07-27T02:04:12Z

I'm unlikely to change this. In fact, I'm probably going to add default CSP headers to all of the templates, to match electron-quick-start.

Yes, just letting you know 🙂

Eli-Black-Work · 2021-07-27T02:07:25Z

@malept, FYI, when we upgraded from 6.0.0-beta.57 to 6.0.0-beta.58 our app stopped working in development mode but works in production mode.
It appears that the default CSP headers in production mode allow for making requests to other domains (for example, we do POST requests to www.example.com), but the default CSP headers in development mode don't allow this.

Add devContentSecurityPolicy to forge.config.js like this:

plugins: [
    [
      '@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.ts',
              name: 'main_window',
              preload: {
                js: './src/preload.ts',
              },
            },
          ],
        },
      },
    ],
  ]

Thanks! 🙂

Deliaz · 2021-09-16T20:55:53Z

@malept, FYI, when we upgraded from 6.0.0-beta.57 to 6.0.0-beta.58 our app stopped working in development mode but works in production mode.

It appears that the default CSP headers in production mode allow for making requests to other domains (for example, we do POST requests to www.example.com), but the default CSP headers in development mode don't allow this.

Sounds like a breaking change.
My project was also broke after the update.

malept · 2021-09-16T20:59:07Z

I empathize, but changes like this are why v6 is still in beta. As such, semver rules don't really apply here. Moving forward the release notes should mention when a breaking change occurs (for example, beta 60).

Deliaz · 2021-09-16T21:12:47Z

I see, thank you for the reply!

Let me leave a message here to someone who might have the same problem.

I have an Electron project which uses electron-forge and Firebase Auth.
After updating I wasn't able to sign in, getting this error:

Refused to connect to 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword...' 
because it violates the following Content Security Policy directive: 
"default-src 'self' 'unsafe-inline' data:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback

FirebaseError: Firebase: Error (auth/network-request-failed).

Setting devContentSecurityPolicy from #2331 (comment) fixed the problem.

joezappie · 2021-10-19T17:29:55Z

This doesn't seem to work for me (but I'm probably just doing something wrong). Just upgraded to ^6.0.0-beta.61 and added it into my package.json:

"plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "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:;",
            "renderer": {
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./src/app/index.html",
                  "js": "./src/app/renderer.js",
                  "name": "main_window",
                  "preload": {
                    "js": "./src/preload.js"
                  }
                }
              ]
            }
          }
        ]
      ]

Running my electron forge app with "npm start" still gives me the CSP warning. I'm a bit confused on how this is supposed to work, should it be injecting a element into the page? Adding my own doesn't get overwritten either.

Eli-Black-Work · 2021-10-20T03:08:33Z

@jrj2211 I seem to remember that there was a reason that people were using backticks instead of double quotes around the value for devContentSecurityPolicy.

So you probably should use this:

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

instead of this:

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

Hope that helps 🙂

m4tta · 2021-12-22T08:54:51Z

Whatever is going on here completely broke the ability to load local files using the file:// protocol along with protocol.registerFileProtocol I've tried everything possible under the sun inside "devContentSecurityPolicy" I've googled every least restrictive allow anything CSP thing I could find.

Edit: just putting a blank string did the trick... What a nightmare. I wasted 2 nights trying to just get an image to load from a local path. I couldn't just import it for what I am doing.

vladkrutenyuk · 2022-07-09T10:00:47Z

@malept, FYI, when we upgraded from 6.0.0-beta.57 to 6.0.0-beta.58 our app stopped working in development mode but works in production mode.
It appears that the default CSP headers in production mode allow for making requests to other domains (for example, we do POST requests to www.example.com), but the default CSP headers in development mode don't allow this.

Add devContentSecurityPolicy to forge.config.js like this:

plugins: [
    [
      '@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.ts',
              name: 'main_window',
              preload: {
                js: './src/preload.ts',
              },
            },
          ],
        },
      },
    ],
  ]

THANK YOU !!!!!! it works))

janwendt · 2023-02-09T18:58:38Z

I just started a new Electron Forge project with the webpack-typescript template and got the warning:

Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
  Policy set or a policy with "unsafe-eval" enabled. This exposes users of
  this app to unnecessary security risks.

I did some research and then added:
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
to my index.html to get rid of the warning. But then i got the error:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'".

So i finally discovered this issue here and set devContentSecurityPolicy in my forge.config.ts as described above but that did not solve the problem for me. Anything i am missing?

Eli-Black-Work · 2023-02-13T05:52:26Z

@janwendt Can you post some code showing how you set devContentSecurityPolicy?

moepmoep12 · 2023-02-23T22:20:19Z

Same problem as @janwendt. Added property devContentSecurityPolicy to forge.config.ts:

  plugins: [
    new WebpackPlugin({
      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,
      renderer: {
        config: rendererConfig,
        entryPoints: [
          // ....
        ],
      },
    }),
  ],

The warning still persists. However, when I set the CSP header in the index.html

    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline'"
    />

The error occurs

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'".

HashedViking · 2024-02-03T11:45:37Z

@moepmoep12 @Eli-Black-Work @janwendt

Worked for me when I removed all CSP meta tags from index.html and put devContentSecurityPolicy at the end of config struct (see WebpackPluginConfig.ts to understand why):

 plugins: [
    new AutoUnpackNativesPlugin({}),
    new WebpackPlugin({
      mainConfig,
      renderer: {
        config: rendererConfig,
        entryPoints: [
          {
            html: './src/index.html',
            js: './src/renderer.ts',
            name: 'main_window',
            preload: {
              js: './src/preload.ts',
            },
          },
        ],
      },
      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:;`,
    }),

shantanu-kulkarni · 2024-04-30T06:45:53Z

@HashedViking @moepmoep12 I tried the same thing, removed all meta tags from the index.html and put the devContentSecurityPolicy at the end of the config in my forge.config.js yet I'm getting this error:

Refused to connect to 'ws://localhost:3000/ws' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

I'm a bit new to Webpack and Electron and have been trying out things to fix this but I'm persistently getting the error.
This is my forge.config.js:

plugins: [
{
name: '@electron-forge/plugin-auto-unpack-natives',
config: {},
},
{
name: '@electron-forge/plugin-webpack',
config: {
mainConfig: './webpack.main.config.js',
renderer: {
config: './webpack.renderer.config.js',
entryPoints: [
{
html: './src/index.html',
js: './src/renderer.js',
name: 'main_window',
preload: {
js: './src/preload.js',
},
},
],
},
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:;`,
},
},
]

malept added the enhancement label Jun 18, 2021

malept changed the title ~~[webpack] Add a configuration option to set the CSP header during development.~~ [webpack] Add a configuration option to set the CSP header during development Jun 18, 2021

This was referenced Jun 18, 2021

[Bugs/Feedback] webpack 5 integration feedback #2289

Closed

feat(plugin-webpack): add devContentSecurityPolicy config option #2332

Merged

malept closed this as completed in #2332 Jun 18, 2021

NorthBei mentioned this issue Jul 24, 2022

Upgraded boilerplate all package to latest version diego3g/electron-typescript-react#90

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[webpack] Add a configuration option to set the CSP header during development #2331

[webpack] Add a configuration option to set the CSP header during development #2331

malept commented Jun 18, 2021

Eli-Black-Work commented Jul 26, 2021

malept commented Jul 26, 2021

UnsignedInt8 commented Jul 27, 2021

Eli-Black-Work commented Jul 27, 2021

Eli-Black-Work commented Jul 27, 2021

Deliaz commented Sep 16, 2021

malept commented Sep 16, 2021

Deliaz commented Sep 16, 2021

joezappie commented Oct 19, 2021 •

edited

Loading

Eli-Black-Work commented Oct 20, 2021

m4tta commented Dec 22, 2021 •

edited

Loading

vladkrutenyuk commented Jul 9, 2022

janwendt commented Feb 9, 2023 •

edited

Loading

Eli-Black-Work commented Feb 13, 2023 •

edited

Loading

moepmoep12 commented Feb 23, 2023 •

edited

Loading

HashedViking commented Feb 3, 2024 •

edited

Loading

shantanu-kulkarni commented Apr 30, 2024

[webpack] Add a configuration option to set the CSP header during development #2331

[webpack] Add a configuration option to set the CSP header during development #2331

Comments

malept commented Jun 18, 2021

Preflight Checklist

Problem Description

Webpack property devtool default not playing nice with content-security-policy

Proposed Solution

Alternatives Considered

Additional Information

Eli-Black-Work commented Jul 26, 2021

malept commented Jul 26, 2021

UnsignedInt8 commented Jul 27, 2021

Eli-Black-Work commented Jul 27, 2021

Eli-Black-Work commented Jul 27, 2021

Deliaz commented Sep 16, 2021

malept commented Sep 16, 2021

Deliaz commented Sep 16, 2021

joezappie commented Oct 19, 2021 • edited Loading

Eli-Black-Work commented Oct 20, 2021

m4tta commented Dec 22, 2021 • edited Loading

vladkrutenyuk commented Jul 9, 2022

janwendt commented Feb 9, 2023 • edited Loading

Eli-Black-Work commented Feb 13, 2023 • edited Loading

moepmoep12 commented Feb 23, 2023 • edited Loading

HashedViking commented Feb 3, 2024 • edited Loading

shantanu-kulkarni commented Apr 30, 2024

Webpack property `devtool` default not playing nice with content-security-policy

joezappie commented Oct 19, 2021 •

edited

Loading

m4tta commented Dec 22, 2021 •

edited

Loading

janwendt commented Feb 9, 2023 •

edited

Loading

Eli-Black-Work commented Feb 13, 2023 •

edited

Loading

moepmoep12 commented Feb 23, 2023 •

edited

Loading

HashedViking commented Feb 3, 2024 •

edited

Loading