Module Federation not working with Content Security Policy (CSP) about core HOT 10 CLOSED

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

from core.

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!

from core.

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

from core.

where is the unsafe eval getting triggered?

from core.

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

from core.

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

from core.

@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)

from core.

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.

from core.

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 webpack/webpack#5627 on what you might need to do

from core.

@ScriptedAlchemy ~ I am having a similar issue in loadEsmEntry when it tries to execute

new Function(
          'callbacks',
          `import("${entry}").then(callbacks[0]).catch(callbacks[1])`,
        )([resolve, reject]);

the module federation config I am using is:

{
  "name": "shell-service-views",
  "library": {
    "type": "module"
  },
  "filename": "remoteEntry.js",
  "remotes": {
    "admin-service-views": "https://.../admin/remoteEntry.js",
    "shop-service-views": "https://.../shop/remoteEntry.js"
  },
  "shared": {
    "react": {
      "singleton": true,
      "requiredVersion": "18.3.1"
    },
    "react-dom": {
      "singleton": true,
      "requiredVersion": "18.3.1"
    }
  }
}

I am using NX's implementation of the ModuleFederationPlugin from @module-federation/enhanced/webpack.

from core.