#svelte-announcer triggers CSP violation

[andersekdahl]

Describe the bug

When creating a new Sveltekit project from the demo template and configuring CSP rules that disallows inline styles you get a CSP violation on the #svelte-announcer element which is using inline styles without a nonce.

Reproduction

https://github.com/andersekdahl/svelte-csp-repro

1. Clone the repo
2. Run npm run build && npm run preview
3. Open the site and you'll see these errors attached as screenshots

The only thing changed from the demo project is this commit: https://github.com/andersekdahl/svelte-csp-repro/commit/53ebe42cb1114a696e3bb49b6c67daf6c7bd8d72

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
    Memory: 6.04 GB / 31.73 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.92)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.1.1
    @sveltejs/kit: ^2.0.0 => 2.5.4
    @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.2
    svelte: ^5.0.0-next.1 => 5.0.0-next.80
    vite: ^5.0.3 => 5.1.6

Severity

serious, but I can work around it

Additional Information

No response

[BernhardPosselt]

@andersekdahl how have you worked around it?

Edit: For anyone running into this, add this to your svelte.config.js

const config = {
        csp: {
            directives: {
                // etc
                'style-src': ['self', 'sha256-9OlNO0DNEeaVzHL4RZwCLsBHA8WBQ8toBp/4F5XV2nc='],
            }
        }
}