Your strict CSP just nuked every Module Federation remote

#webpack #nextjs #microfrontend #srinudesetti

Refused to load the script
  'https://dev.myapp.com/products/_next/static/chunks/remoteEntry.js'
because it violates the following Content Security Policy directive:
  "script-src 'self'".

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

You shipped a hardened Content-Security-Policy header to staging on Friday afternoon.

The host renders. Every federated remote shows a blank white box.

The fix is not on Stack Overflow because nobody warns you that webpack's Module Federation runtime calls eval() to bootstrap the remote container. Strip 'unsafe-eval' from script-src and every remote dies before a single module mounts.

I just published the complete CSP block we run in production for a Next.js MFE.

The article walks through:

The complete headers() function in next.config.js — local vs production side-by-side
Why 'unsafe-eval' is non-negotiable for Module Federation in mid-2026
script-src / connect-src / frame-src directive-by-directive breakdown for analytics + payment gateways
The four lines that differ between local and production (http://localhost:*, ws://localhost:*, https://localhost:*, Strict-Transport-Security)
Six security headers beyond CSP — X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, Referrer-Policy, Permissions-Policy, Strict-Transport-Security
The Report-Only rollout pipeline with a /api/csp-report Next.js API route
The strict-nonce CSP pattern and why it does not yet work with NextFederationPlugin
10 real-world gotchas that surface only after a real deploy