From 7d46109019b4e0b9e0d8aae188e7493d6b60de2c Mon Sep 17 00:00:00 2001
From: Mark Lee <malept@users.noreply.github.com>
Date: Fri, 18 Jun 2021 14:15:13 -0700
Subject: [PATCH] feat(plugin-webpack): add devContentSecurityPolicy config
 option (#2332)

---
 packages/plugin/webpack/src/Config.ts        | 14 ++++++++++++++
 packages/plugin/webpack/src/WebpackPlugin.ts |  7 +++++++
 2 files changed, 21 insertions(+)

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 `<meta>` 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);