Bug Report

Current Behavior

When using mini-css-extract-plugin with Webpack Module Federation and Content Security Policy (CSP) nonces, CSS files loaded from remote modules do not receive the nonce attribute, causing CSP violations.

Expected Behavior

CSS <link> tags created by mini-css-extract-plugin should include the nonce attribute when __webpack_nonce__ is set.

Reproduction Repository

https://github.com/HarshitJ1207/mf-prioritization-framework

Steps to Reproduce

1. Clone the reproduction repo
2. Run npm install
3. Run npm start
4. Open http://localhost:3000
5. Open browser DevTools Console
6. Observe CSP violations for remote CSS files

Observed Behavior

Console errors:

• Loading the stylesheet 'http://localhost:3001/src_Widget_js.css' violates CSP directive
• Loading the stylesheet 'http://localhost:3003/src_Widget_js.css' violates CSP directive

Inspecting the DOM:

• Host CSS has nonce attribute (works correctly)
• Remote CSS does NOT have nonce attribute (fails CSP)

What I've Tried

Setting __webpack_nonce__ as the first thing in each bundle

See: setNonce.js (imported as the first line in each remote's Widget.js)

Each remote module imports setNonce.js which sets:

• __webpack_nonce__
• __webpack_require__.nc

The host HTML (hostbuildtime/src/index.html line 9-11) sets window.__webpack_nonce__ so that setNonce.js can read it.

Result: Still no nonce on remote CSS files.

Environment

• mini-css-extract-plugin: 2.9.4
• webpack: 5.x
• Node.js: 18+
• Module Federation: Yes (host + 3 remotes)
• CSP: Enabled with nonce

Architecture

• Host app (port 3000): Loads 3 remote modules via Module Federation
• Remote apps (ports 3001, 3002, 3003): Each exposes a Widget component with CSS

Comparison with style-loader

Important: This same setup works perfectly with style-loader!

When using style-loader instead of mini-css-extract-plugin, the dynamically created <style> tags DO get the nonce attribute from __webpack_nonce__.

This suggests that style-loader respects __webpack_nonce__, but mini-css-extract-plugin does not.

Question

Does mini-css-extract-plugin support __webpack_nonce__ for CSS loaded via Module Federation?

• If yes, what is the correct way to configure it?
• If no, is this a missing feature that needs to be implemented?

Related Issues

• Issue 1081: Dynamic loaded styles does not include nonce when webpack_nonce is set