diff --git a/packages/plugin/webpack/src/Config.ts b/packages/plugin/webpack/src/Config.ts index 13ac6e85ad..23c0f42fa3 100644 --- a/packages/plugin/webpack/src/Config.ts +++ b/packages/plugin/webpack/src/Config.ts @@ -102,4 +102,18 @@ export interface WebpackPluginConfig { * The TCP port for web-multi-logger. Defaults to 9000. */ loggerPort?: number; + /** + * Sets the [`Content-Security-Policy` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) + * for the Webpack development server. + * + * Normally you would want to only specify this as a `` tag. However, in development mode, + * the Webpack plugin uses the `devtool: eval-source-map` source map setting for efficiency + * purposes. This requires the `'unsafe-eval'` source for the `script-src` directive that wouldn't + * normally be recommended to use. If this value is set, make sure that you keep this + * directive-source pair intact if you want to use source maps. + * + * Default: `default-src 'self' 'unsafe-inline' data:;` + * `script-src 'self' 'unsafe-eval' 'unsafe-inline' data:` + */ + devContentSecurityPolicy?: string } diff --git a/packages/plugin/webpack/src/WebpackPlugin.ts b/packages/plugin/webpack/src/WebpackPlugin.ts index 520a63c840..7a86da5c7f 100644 --- a/packages/plugin/webpack/src/WebpackPlugin.ts +++ b/packages/plugin/webpack/src/WebpackPlugin.ts @@ -293,6 +293,10 @@ Your packaged app may be larger than expected if you dont ignore everything othe const config = await this.configGenerator.getRendererConfig(this.config.renderer.entryPoints); if (!config.plugins) config.plugins = []; config.plugins.push(pluginLogs); + + const cspDirectives = this.config.devContentSecurityPolicy + ?? "default-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-eval' 'unsafe-inline' data:"; + const compiler = webpack(config); const webpackDevServer = new WebpackDevServer(compiler, { hot: true, @@ -303,6 +307,9 @@ Your packaged app may be larger than expected if you dont ignore everything othe }, setupExitSignals: true, historyApiFallback: true, + headers: { + 'Content-Security-Policy': cspDirectives, + }, }); const server = await webpackDevServer.listen(this.port); this.servers.push(server);