electron
devContentSecurityPolicy in webpack plugin does not work when a content security policy meta tag exists in the index.html file
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
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.
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',
},
],
},
}),
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>