Webpack-dev-server: CSP WebSocket.client.onmessage

[raix]

• Operating System: Mac OS BigSur
• Node Version: 14.13.1
• NPM Version: 6.14.8
• yarn Version: 1.22.10
• webpack Version: 5.24.2
• webpack-dev-server Version: 4.0.0-beta.0
• Browser: Chrome

• [x] This is a bug
• [ ] This is a modification request

Code

// webpack.config.js

// additional code, remove if not needed.

Expected Behavior

No CSP issues as in previous versions

Actual Behavior

log.js:1 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: "script-src 'self' 'unsafe-inline'".

    at new Function (<anonymous>)
    at p.value (log.js:1)
    at t.l [as compile] (log.js:1)
    at t.value (log.js:1)
    at t.u (log.js:1)
    at t.<anonymous> (log.js:1)
    at t.value (log.js:1)
    at Object.hot (index.js:50)
    at socket.js:43
    at WebSocket.client.onmessage (WebsocketClient.js:67)

For Bugs; How can we reproduce the behavior?

I'll try to get time to make a reproduction repository, a simple webpack and dev server config should do it - then set csp rules eg. in meta tags for script-src.

If using injectClient: true in dev server config it is also be possible to inspect the main bundle that webpack-dev-server/client/transpiled-modules/log.js is build using new Function(... (what's triggering the policy)

For Features; What is the motivation and/or use-case for the feature?

[alexander-akait]

Yep, limitation, we can't rewrite external code and we need new Function, please disable CSP in dev mode

[raix]

I guess that's why the CRA project has https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/webpackHotDevClient.js

[alexander-akait]

Anyway let's keep open, I think we will fix it, but not in near future, right now I want to focus on stable release, CSP is not high priority in dev mode

[raix]

When investigating logging dependens on the logging runtime in webpack, this in turn has a dependency on tapable causing the issue. _(HookCodeFactory)_

When on the client it seems like we are not using tapable (as tapable returns undefined in the client it falls back to currentDefaultLogger)

@alexander-akait would you consider a pull-request in dev server and webpack splitting out the default logger from logger/runtime to be consumed without tapable by the webpack-dev-server?

[alexander-akait]

@raix Ideally we should use built-in logger from webpack, it is full featured, maybe we should rewrite code on build-time, I need time to thinking about it

[raix]

Makes sense - on the short term there would not be a difference as we are currently using the currentDefaultLogger anyway (tapable logger is returning undefined - but yes, maybe some way to threeshake tapable out - or stub it out)

[raix]

I've added a draft pull-request as an idea for solving the issue - not a priority at the moment why it's marked draft #3065