Mantine Modal violates the CSP settings

[kaiiiz]

Dependencies check up

• [X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.11.0

What package has an issue?

@mantine/modals

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

I've configured my nextjs project's CSP setting using the "Adding nonce with middleware" solution provided in https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy. Also, I've set getStyleNonce in MantineProvider correctly, everything works fine.

Except when I open a modal, the developer console shows me that there is an inline style violates the CSP settings.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

After doing some research, I found out that the root cause of this bug is caused by the react-remove-scroll package, which depends on react-style-singleton, which set the nonce on inline style through the get-nonce package.

The hack I'm current using is to explicitly import the setNonce function from the get-nonce package, and set the nonce explicitly in the getStyleNonce function in my MantineProvider, which works fine. But I think it would be better to included this directly in Mantine. Thanks!

Self-service

• [ ] I would be willing to implement a fix for this issue

[zommerberg]

You can safely set the style src to "unsafe-inline".

https://scotthelme.co.uk/can-you-get-pwned-with-css/

This is the recommended solution by other libraries like headlessUI. https://github.com/tailwindlabs/headlessui/issues/2615

[rtivital]

Help wanted with documentation updates to provide instructions and recommendations on what can be done on the user side to resolve the issue with CSP.