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 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)

[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

[jornfranke]

if you generate a none/hash - please be aware that it needs to play also well with the backend, because it needs to return them as part of the CSP header. Angular uses a nonce, because it would be difficult from the backend to deliver the hash. Additionally you can configure the nonce centrally once: https://angular.dev/best-practices/security#content-security-policy

This makes it very to easy for the backend to insert it (essentially it needs to only parse the index.html, insert a random nonce at every new request into index.html and provide the nonce additionally in the CSP response header).

E.g. for Spring and Angular:

Backend (Spring): https://github.com/ZuInnoTe/spring-boot-angular-example/blob/main/backend/src/main/java/eu/zuinnote/example/springwebdemo/configuration/SPACspNonceFilter.java#L55

Frontend (Angular): https://github.com/ZuInnoTe/spring-boot-angular-example/blob/main/frontend/src/index.html#L11

[Prinzhorn]

@Rich-Harris seems like this has been solved in v5 using web animations API and can be closed?