Open atjn opened 6 months ago
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 unsafe-inline
.. is this something that will be easier with Svelte 5?
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 -->
<div class="display-s" id="svelte">%sveltekit.body%</div>
and make css -->
.display-s {
display: contents
}
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.js
file, 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-app
Then choose the
Skeleton project
with default settings:Run
npm install && npm run build && npm run preview -- --open
and observe that the app works as intended with no errors in the console.Now restrict the
style-src
CSP directive in yoursvelte.config.js
file, so that it looks like this:Run
npm run build && npm run preview -- --open
and observe that the browser logs a CSP violation. In Firefox, the message is:Logs
No response
System Info
Severity
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.