sveltekit fails to automatically generate CSP hashes for inline styles

[charbelnicolas]

Describe the bug

When using transitions, it seems svelte adds inline styles to the html but then sveltekit fails to automatically add a hash for it causing errors in the browser.

This is what my svelte.config.js has under CSP:

And this is the piece of code that adds inline styles:

Only way to get it working is to add the hash myself to the CSP but that's lame.

Am I doing something wrong? Or is it broken?

Reproduction

Add a transition to your app and then set CSP for style-src to ['self']

Logs

index-9c40d7a5.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

System Info

System:
    OS: Linux 5.18 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 28.28 GB / 31.31 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.3.0 - /usr/bin/node
    npm: 8.5.5 - /usr/bin/npm
  Browsers:
    Chromium: 102.0.5005.115

Severity

annoyance

Additional Information

The worst thing of all is if I add the hash myself then it doesn't work under dev mode.... So I have to remove and then add back for production...

[Rich-Harris]

Unfortunately this is a limitation of the CSS transition mechanism that Svelte currently uses. For Svelte 4 we'd like to switch to the Web Animations API, since it's now supported widely enough. There's a related thread at https://github.com/sveltejs/svelte/issues/6662.

One workaround (which may or may not be possible in your case) is to either leave style-src unspecified or add unsafe-inline. Adding the hash fails in Safari (see linked thread), because Safari is awful.

It looks like we could solve before Svelte 4 by tweaking Svelte to work around Safari's awfulness and automatically injecting a known hash whenever style-src is non-empty: https://github.com/sveltejs/svelte/issues/6662#issuecomment-1185894061

[charbelnicolas]

Unfortunately this is a limitation of the CSS transition mechanism that Svelte currently uses. For Svelte 4 we'd like to switch to the Web Animations API, since it's now supported widely enough. There's a related thread at sveltejs/svelte#6662.

One workaround (which may or may not be possible in your case) is to either leave style-src unspecified or add unsafe-inline. Adding the hash fails in Safari (see linked thread), because Safari is awful.

It looks like we could solve before Svelte 4 by tweaking Svelte to work around Safari's awfulness and automatically injecting a known hash whenever style-src is non-empty: sveltejs/svelte#6662 (comment)

Cool, good to know. I will keep adding the hash myself for the time being, thank you!

[Rich-Harris]

closed via #5556 but i'll reopen it for now, in case we do end up solving this at the svelte level