devContentSecurityPolicy in webpack plugin does not work when a content security policy meta tag exists in the index.html file

wrgoto commented 1 year ago

Pre-flight checklist

[X] I have read the contribution documentation for this project.
[X] I agree to follow the code of conduct that this project uses.
[X] I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

6.0.5

Electron version

23.1.4

Operating system

macOS 11.7.4 (20G1120)

Last known working Electron Forge version

No response

Expected behavior

Using devContentSecurityPolicy in the forge.config.js with @electron-forge/plugin-webpack should use the content security policy given in the prop and not the content security policy specified in the meta tag in index.html.

// forge.config.json
plugins: [
    {
      name: '@electron-forge/plugin-webpack',
      config: {
        devContentSecurityPolicy: `default-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-eval' 'unsafe-inline' data:`,
        mainConfig: './webpack.main.config.js',
        renderer: {
          config: './webpack.renderer.config.js',
          entryPoints: [
            {
              name: 'main_window',
              html: './src/renderer/index.html',
              js: './src/renderer/index.js',
              preload: {
                js: './src/preload.js'
              }
            }
          ]
        }
      }
    }
  ]

// index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
    <link rel="stylesheet" href="index.css" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  </head>
  <body>
    <h1>💖 Hello World!</h1>
    <p>Welcome to your Electron application.</p>
  </body>
</html>

See: https://www.electronforge.io/config/plugins/webpack#devcontentsecuritypolicy

Actual behavior

When running npm start in development, it should use the specified CSP in the config.

Steps to reproduce

Clone: https://github.com/wrgoto/electron-forge-csp/tree/main
npm start
Content security policy is using the meta tag attribute not the devContentSecurityPolicy

Additional information

No response

rgacki commented 1 year ago

Maybe allow setting templateParameters, so this can also be achieved through an EJS template.

sunknudsen commented 8 months ago

Did anyone find a workaround?

RicardoGVilla commented 7 months ago

Was this fixed?

3xtant commented 3 months ago

Please fix this issue. This is an insurmountable hurdle for would-be new users. Worst of all, promotes insecure coding practices. It is easy to "just get this working" while developing and then forgetting to set a proper CSP when deploying.

andreasdj commented 3 months ago

We faced the same issue and have added a temporary workaround. We are using the Webpack plugin and as part of the build process, we check an environment variable to determine which html template to use (for the renderer processes). We have updated our forge.config.ts with the following parts:

First part, deciding which template to use (the CSP policy is included inside the html header of the html template):

const dev = process.env.NODE_ENV?.trim() === 'development';
const htmlTemplate = dev ? './src/renderer/index.dev.html' : './src/renderer/index.prod.html';

Second part, specifying the html template inside the renderer entry points config:

new WebpackPlugin({
    mainConfig,
    renderer: {
        config: rendererConfig,
        entryPoints: [
           {
              html: htmlTemplate,
              js: './src/renderer/index.tsx',
              name: 'renderer',
           },
        ],
    },
}),

3xtant commented 3 months ago

Thanks for sharing!

May I ask how do you keep .dev and .prod in sync?

andreasdj commented 3 months ago

Currently we need to do that manually. We use React and the files are very small though, the only thing that differs is the CSP content. index.dev.html looks like this:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self' data:; connect-src *" />
</head>
<body>
    <div id="app"></div>
</body>
</html>

electron / forge