Svelte cannot produe safe CSP for default build / any inline styles #11747
Comments
|
Yes I can confirm this. Also working on a project which needs to support a certain level of CSP rules and currently I can see no way to get that done with out allowing |
|
I can confirm when looking into CSP i found it difficult to do it with Sveltekit and I gave up. Not to throw sand into svelte devs eyes but in nextjs its easy manage CSP so i would think we can improve it in svelte. |
|
Workaround -->
and make css --> |
|
Unfortunately this is not a full workaround. While it allows to load the page, you will soon see the following message: It comes from a file disclose-version.*.js:1:2637 It seems to also leads that svelte writes at the end of the page "untitled page". If I add to the CSP for style-src unsafe-inline it works. Any idea how to resolve/troubleshoot this are welcome. |
|
See linked issue for a resolution - the svelte-announcer uses inline-style. |
Describe the bug
Hello and thank you all for making and maintaining Svelte ❤️
This is related to #5215, but that seems to be specifically targeted at the animations API, whereas I am talking about a broader issue.
In the
svelte.config.jsfile, when you define the Content Security Policyscript-src: 'self', and try to build your project with inline scripts, Svelte is fairly good at detecting the inline scripts and adding hashes to the CSP to make sure they can be loaded in the browser.On the other hand, if you define
style-src: 'self', it does not seem like Svelte makes any effort to produce hashes for inline styles. This means you either cannot have any inline styles, or you must make your CSP unsafe by definingunsafe-inline.Personally, I can live with the first option where I never define inline styles, but the problem is that Svelte itself defines an inline style in the default
app.html:I certainly could work around this by removing this style and moving it to an imported global stylesheet, but it seems a bit hacky to me, and I would really prefer to just use the default Svelte config, which I know is well thought out and works well with Svelte (except in this case lol).
Reproduction
Scaffold a new SvelteKit project by running
npm create svelte@latest my-appThen choose the
Skeleton projectwith default settings:Run
npm install && npm run build && npm run preview -- --openand observe that the app works as intended with no errors in the console.Now restrict the
style-srcCSP directive in yoursvelte.config.jsfile, so that it looks like this:Run
npm run build && npm run preview -- --openand observe that the browser logs a CSP violation. In Firefox, the message is:Logs
No response
System Info
System: OS: Linux Container: Yes Shell: 5.1.16 - /bin/bash Binaries: Node: 20.11.0 - ~/.asdf/installs/nodejs/20.11.0/bin/node npm: 10.3.0 - ~/.asdf/plugins/nodejs/shims/npm npmPackages: @sveltejs/adapter-auto: ^3.0.0 => 3.1.1 @sveltejs/kit: ^2.0.0 => 2.5.0 @sveltejs/vite-plugin-svelte: ^3.0.0 => 3.0.1 svelte: ^4.2.7 => 4.2.9Severity
serious, but I can work around it
Additional Information
If possible, I think the best solution to this problem would be for Svelte to detect all inline styles in a page, move them to a single
<style>tag in the header, then produce a hash/nonce for that tag and add it to the CSP.I think the minimum viable solution is to change the default scaffolding to use some sort of global stylesheet. That would allow people like me to use Svelte and CSP because we don't use inline styles. But it would not address any use case that needs inline styles.
The text was updated successfully, but these errors were encountered: