Incompatibility with strict CSPs

[arnemolland]

Describe the feature / bug 📝:

Sonner does not work with strict CSPs as there's inline styles.

Steps to reproduce the bug 🔁:

1. Use any CSP with the style-src directive set to anything other than unsafe-inline.

I'm looking into some fixes, but in essence all styles have to be defined in stylesheets for other CSPs to work. If it's impractical to apply a fix, there's always the fork and modify path but having support baked in would be nice.

[arnemolland]

Worth mentioning if someone else stumbles across this; I'm currently (manually) creating hashes of the computed inline styles and using unsafe-hashes to allow them. Without any modifications, these are the hashes needed to allow the inline styles from sonner:

• 47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=
• qixoDh78J8vISHKC3rLI7qSXmTShr8mhsUgjJL7W7aU=
• 3gJFr3n77fnX5qwQpGju/zCOsoHW5RMqQd5XOb9WFcA=

Which can be used with the style-src directive like this:

style-src 'unsafe-hashes' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-qixoDh78J8vISHKC3rLI7qSXmTShr8mhsUgjJL7W7aU=' 'sha256-3gJFr3n77fnX5qwQpGju/zCOsoHW5RMqQd5XOb9WFcA=';

[BaDo2001]

+1

[louis-foucart]

+1

[WoetDev]

+1

[AkshayCloudAnalogy]

+1

[willrp]

+1

[Pruxis]

+1

[gregorjohannson]

+1

[emilkowalski]

The solution here would be moving into a stylesheet instead of injecting the styles into the head, am I understanding it correctly?

[hugomrdias]

yes, dont bundle css you are already publishing the style.css file we can just import it the way makes more sense on our side.

[pleunv]

Either that so CSS bundling becomes a user concern, allowing sonner to piggyback off i.e. Vite's nonce support which would circumvent the issue, or by providing a similar nonce configuration inside of sonner itself. Personally I'd prefer the former so that all the nonce configuration can be centralized in the bundler.

[huozhi]

How are you using strict CSP for other library right now? Can you provide more about your setup? (framework, how nonce is passed)

If we need to provide a unique nonce value per request, there needs to be a way pass the nonce from server to the library. vite can control the website rendering and they has the built-in contract to read the csp from meta[property="csp-nonce"] which not every website with CSP rule will have, also it's kinda leaking your CSP rule to all the JS.

I'd love to learn more about your setup and to see what we can adjust here