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

• 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