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

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:

1. source-map is slower to generate than eval-source-map (or so I’m told)
2. 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.

[UnsignedInt8]

@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',
              },
            },
          ],
        },
      },
    ],
  ]

[vladkrutenyuk]

@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))