Svelte 5 and CSP

[eltigerchino]

@eltigerchino please find a minimal reproduction attempt here

This is basically the standard sveltekit demo and adjustment were made in commit 92df14f (static adapter + CSP).

To reproduce:

1. npm run build
2. npm run preview
3. Open project home page and start the browser console
4. Reload page -> csp style issue
5. Click on a button -> more csp style issue

On my large project, I also have inline scripts issues but this seems not visible with this minimalistic project.
With svelte4 using "self" and "blob:" for script-src were enough.

Originally posted by @mulder999 in sveltejs/kit#12879 (reply in thread)

[mulder999]

Is anyone currently addressing this issue? It's clearly a blocker for our transition to Svelte 5, and it's disappointing to be held back by legacy features as we move forward.

[marekdedic]

Not a maintainer, but I don't see any major issues with Svelte 5 and CSP.

Your minimal repro contains inline styles in several locations, those of course won't work:

https://github.com/mulder999/svelte-bug-12879/blob/92df14f72731b3d6146b63c1776116af332b5e04/src/app.html#L10

https://github.com/mulder999/svelte-bug-12879/blob/92df14f72731b3d6146b63c1776116af332b5e04/src/routes/Counter.svelte#L28

https://github.com/mulder999/svelte-bug-12879/blob/92df14f72731b3d6146b63c1776116af332b5e04/src/routes/sverdle/%2Bpage.svelte#L191

https://github.com/mulder999/svelte-bug-12879/blob/master/src/lib/images/svelte-logo.svg

I recommend using the svelte eslint plugin with this rule to check for inline styles.

I do see one actual CSP issue in SvelteKit and that one actually is sveltejs/kit#11993. That should be fixed, but there is a workaround in the meantime

[mulder999]

@marekdedic Thank you for your input. You’re right—I was too hasty in providing my minimal reproduction, as it doesn’t fully capture the issues I’m facing with inline script handling in my actual project.

Unfortunately, I don’t have a repro yet. My original question was to confirm whether Svelte 5, SvelteKit, and CSP are expected to work together seamlessly. I realize now that I need to spend more time investigating the issues I am facing.

@eltigerchino, could you please close this ticket?

[marekdedic]

Good luck, I'm also using Svelte & SvelteKit with "strict" CSP (no inline scripts or styles mostly) and while a little rough around the edges, everything seems to be workable now that transitions don't require inline styles...

[mulder999]

Thanks, I’ve identified the issue—the inline issue is actually coming from the SvelteImg plugin https://github.com/zerodevx/svelte-img/blob/1c3dc99795d1df089060db63f66e14f23cdd6269/src/lib/SvelteImg.svelte#L82

[mulder999]

In case anyone comes here, the svelte-img issue can be tracked here.

Looking at the code of the plugin, it seems like Svelte5 legacy support might not be handling well this rare combination of legacy features...

[mulder999]

Indeed the issue arise with Svelte5 when mixing legacy $$restProps and events bubbling.

I implemented a workaround in SvelteImg by injecting $$restProps manually during onMount. It would probably not work with properties that requires dynamic binding.

@eltigerchino A proper fix in the Svelte 5 codebase is definitely needed to support components that combines those 2 legacy features.

[mulder999]

@eltigerchino I would like to mention, the issue affect pure svelte5 components as well. Conditions seems to be the usage of ... operator along with some event callbacks.