Module Federation not working with Content Security Policy (CSP)

[72gm]

Describe the bug

If you have a strict CSP then the remotes for won't load in module federation

"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 .... "

Adding unsafe-eval defeats the purpose of having a CSP, as it opens a security hole - can you advise how you to round this when using the module federation plugin 2.0?

Reproduction

Not required

Used Package Manager

npm

System Info

Module Federation 2.0

Validations

• [X] Read the docs.
• [X] Read the common issues list.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Module federation issue and not a framework-specific issue.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[ScriptedAlchemy]

Ill add try catch for users who has CSP it will fall back to possibly dangerous global access

[72gm]

Sorry, not sure I understand what that means?... I was hoping there would be a way to use a webpack nonce as this is becoming the recommended way for CSPs!

[ScriptedAlchemy]

I can fix unsafe-eval issues. Is there something else you want as well?

If this is about nonce you can try using the createScript hook via runtime plugin

[ScriptedAlchemy]

where is the unsafe eval getting triggered?

[ScriptedAlchemy]

I just tried setting this in the meta

<meta http-equiv="Content-Security-Policy" content="script-src 'self' http://localhost:3008 http://localhost:3009 http://localhost:3010 http://localhost:3011 http://localhost:3012;">

and no eval error was triggered, please provide a repo where its failing and i can take a look

[72gm]

Hi,

It is when the lazy load actually loads. Each of our remotes exposes its own routes which are pieced together in the host. When the host tries to load a module then the issue occurs

In this example a collection of routes are loaded into the host, similar to below. When the host tries to route to the module then the error occurs. No eval error is triggered until you actually try to invoke the module

I'll add a repo, shortly

[72gm]

@ScriptedAlchemy you can see this issue here https://github.com/72gm/gm-mfe-csp

bootstrap file in the Host generates the csp policy.. which needs unsafe-eval added to make it work

(isn't a monorepo so need open top level folder in vs code and run each via it's own terminal)

[ScriptedAlchemy]

This is not federation v2 its just normal webpack, there is no unsafe eval here. Webpack in development mode wraps modules in eval, dont use CSP on development machines or change your devtool config.

[72gm]

Apologies, just moved to webpack. Easy when you know how!

@ScriptedAlchemy much appreciate your help on this, saved me a load of grief

For anyone having this issue there are some pointers here https://github.com/webpack/webpack/issues/5627 on what you might need to do