CSP headers cannot be set with webpack-dev-server v4

[bedrich-schindler]

• Operating System: MacOS Big Sur 11.2.1

• Node Version: v14.15.5

• NPM Version: 6.14.11

• webpack Version: 5.22.0

• webpack-dev-server Version: 4.0.0-beta.0

• html-webpack-plugin: 5.0.0

• csp-html-webpack-plugin Version: 5.1.0

• This is a bug

• This is a modification request

Code

// webpack.config.js
{
  devServer: {
      headers: {
        'Content-Security-Policy': 'default-src \'self\' data: \'unsafe-inline\'',
        'Referrer-Policy': 'no-referrer',
        'X-Content-Type-Options': 'nosniff',
        'X-Frame-Options': 'deny',
        'X-Powered-By': 'ra2-webpack',
        'X-XSS-Protection': '1; mode=block',
      },
      historyApiFallback: true,
      host: '0.0.0.0',
      https: true,
      static: Path.join(__dirname, 'public'),
  },
  plugins: [
    new HtmlWebpackPlugin({
        cspPlugin: {
          enabled: modeArgument === 'production',
          hashEnabled: {
            'script-src': true,
            'style-src': false,
          },
          nonceEnabled: {
            'script-src': true,
            'style-src': false,
          },
          policy: {
            'base-uri': "'self'",
            'default-src': "'self'",
            'frame-src': "'none'",
            'img-src': ["'self'", 'data:'],
            'media-src': "'none'",
            'object-src': "'none'",
            'script-src': ["'self'"],
            'style-src': ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
          },
        },
        filename: Path.join(__dirname, 'public/index.html'),
        minify: false,
        template: Path.join(__dirname, 'assets/index.html'),
      }),
      new CspHtmlWebpackPlugin(),
  ],
 // The rest of config is omit 
}

Expected Behavior

Before update of webpack-dev-server from 3.11.2 to 4.0.0-beta.0, everything had worked fine with no errors in console.

Actual Behavior

After update to 4.0.0-beta.0, console contains two errors of the following type Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' data: 'unsafe-inline'".

In my opinion, It has something to do with Hot Replacement Module because it had not been happening before I updated webpack-dev-server . As you can see, there are errors in stack trace that are pointing Object.hot and Object.liveReload.

If I set hot: false, liveReload: true then error containing Object.hot disappears, if I set hot: true, liveReload: false then error containing Object.liveReload disappears.

Unfortunately, If I set both to false, new errors are shown:

It looks like that something changed in webpack-dev-server that disallowing us to work with CSP headers. I might not be problem is CSP plugin because those headers are set in devServer option.

[alexander-akait]

Please create reproducible test repo

[bedrich-schindler]

@alexander-akait Here is reproducible, sorry for the delay: https://github.com/bedrich-schindler/webpack-dev-server-reproducible-3040

[alexander-akait]

@bedrich-schindler Here two problems, we need reduce our client to avoid unnecessary code #3062 (will be merged today)

Also we have headers and dev.headers options. headers applied to all files served by webpack-dev-server, dev.headers apply headers only for webpack assets.

Anyway to solve the problem you can do right now:

• 'Content-Security-Policy': 'default-src \'self\' data: \'unsafe-inline\'; script-src \'self\' \'unsafe-eval\'',
• 'script-src': ["'self'", "'unsafe-eval'"],

I known it is not best solution and we should avoid using Function() and we are working on it here #3062

Thanks for the issue

[alexander-akait]

Feel free to feedback