[charts-pro] Image/PDF export blocked by CSP nonce (App Router + AppRouterCacheProvider)

[jackyyang-maker]

Summary

Description
Hi MUI X team 👋

We’re on Next.js App Router and use AppRouterCacheProvider with a strict CSP. Other MUI components respect the nonce, but @mui/x-charts-pro export gets blocked by CSP.

CSP (simplified):

style-src-elem 'self' 'nonce-${nonce};
style-src-attr 'unsafe-inline';

Provider:

// layout.tsx
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
<AppRouterCacheProvider options={{ enableCssLayer: true, nonce }}>
</AppRouterCacheProvider>

Environment

• @mui/x-charts-pro: 8.14.0
• @mui/x-charts: 8.14.0
• @mui/material: 7.1.1
• @mui/material-nextjs: 7.1.1
• @emotion/cache: 11.14.0
• "react": "19.1.1"
• "next": "15.4.7"

Next.js App Router (Chrome/Edge latest)

Console excerpt
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-elem 'self' 'nonce-…'"

Examples

For example, similar to how the DataGrid component provides a nonce prop (docs here
), it would be helpful if @mui/x-charts-pro could also accept a nonce—either as a prop or automatically injected through AppRouterCacheProvider—so that any <style> tags generated during the export process include the proper nonce for CSP compliance.

Observed: Clicking export (image/PDF) triggers a CSP violation for a <style> (or inline style) created during export. Other MUI components (Dialogs/Popovers/etc.) work under the same CSP.

Expected
Export should inherit or allow passing a nonce so any dynamically created <style> elements (and, if applicable, inline styles) comply with CSP.

Minimal repro idea
A Next.js App Router page rendering with the toolbar export enabled + CSP headers above. I can provide a sandbox or repo if needed.
Thanks for looking into nonce support for charts export 🙏

Search keywords: chart, export, nonce

[bernardobelchior]

Hey, @jackyyang-maker! Thanks for opening this issue. I'll take a look to see what can be done here.

If you could provide a reproduction it would help us immensely so we can actually verify that a fix works.

[jackyyang-maker]

Hey, bernardobelchior,
Here is the example in codesandbox.
https://codesandbox.io/p/devbox/lively-framework-3z6rql

I added a simple CSP rule in my middleware.ts, following the official Next.js example
And using the official example component: https://mui.com/x/react-charts/export/#default-toolbar
when clicking the export as PNG button, the following error occurs:

Error: Cannot read properties of null (reading 'cssRules')

The export feature fails to work under this CSP setup.

[bernardobelchior]

Hey, @jackyyang-maker.

I think I managed to fix the print export by providing a nonce (PR).

You can try the fix by installing the charts packages like this: npm i https://pkg.pr.new/mui/mui-x/@mui/x-charts-pro@cd61395 https://pkg.pr.new/mui/mui-x/@mui/x-charts@cd61395

You can provide the nonce through slotProps:

 slotProps={{ toolbar: { printOptions: { nonce } } }}

Can you check if this works? I had to clean the .next directory to ensure a clean build.

The image export is trickier, but if this works for the print export, I can try to fix it for the image export as well.

[jackyyang-maker]

Hey, bernardobelchior,
Tested it — the print export works fine now.
Please go ahead and continue with the image export fix. Thanks.

[bernardobelchior]

@jackyyang-maker I managed to find a solution for the image export, but it requires adding the following line to the Content-Security-Policy: img-src 'self' data: blob:. This is required due to how the library we're using for transforming the SVG into an image works. Is that an acceptable compromise for you?

[jackyyang-maker]

bernardobelchior, Thanks for the update! Yes, adding img-src 'self' data: blob: to the CSP is acceptable for me.
I'll update the middleware and test it on my side.
I'll let you know if I run into anything. Thanks again!

[bernardobelchior]

@jackyyang-maker just a heads-up: I'm still working on this, but it requires changes to 3rd party dependencies. I'm waiting on a PR to be approved and merged before I can fix this on our side.