module-federation / core

Module Federation is a concept that allows developers to share code and resources across multiple JavaScript applications
https://module-federation.io/
MIT License
1.42k stars 212 forks source link

Nextjs plugin doesn't work unless the "unsafe-eval" CSP header is set #2759

Open fcano-ut opened 2 months ago

fcano-ut commented 2 months ago

Describe the bug

The Nextjs plugin doesn't work if the "unsafe-eval" CSP header is not defined, which means the host apps are forced to use unsecure CSP settings or else they won't load.

Due to similar issues being raised in the past and fixed, I believe there is intention to support secure CSP headers in this project.

Some research

When running the app, this is the line that makes the script fail due to "unsafe-eval" not being present:

image

Seems to be related to this line executing: https://github.com/module-federation/core/blob/e38e48d1a5e0a7d22eb46843b0763469f3572a98/packages/nextjs-mf/src/plugins/container/runtimePlugin.ts#L72

Reproduction

https://github.com/fcano-ut/module-federation-reproduction-example-2497/pull/1

Used Package Manager

pnpm

System Info

System:
    OS: macOS 14.5
    CPU: (16) arm64 Apple M3 Max
    Memory: 6.81 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nodenv/versions/20.13.1/bin/node
    Yarn: 1.22.22 - ~/.nodenv/versions/20.13.1/bin/yarn
    npm: 10.5.2 - ~/.nodenv/versions/20.13.1/bin/npm
  Browsers:
    Chrome: 126.0.6478.127
    Firefox: 128.0
    Safari: 17.5

Validations

github-actions[bot] commented 6 days ago

Stale issue message

fcano-ut commented 4 days ago

If anyone is interested in a workaround, we were able to bypass this issue by using patch-package to update code in runtimePlugin.js

From this:

const gs = new Function('return globalThis')(); 

to this:

let gs;

try{
  gs = new Function('return globalThis')();
} catch(e) {
  gs = window;
}