SvelteKit and Netlify CSP conflict

Support
, ,
1

I wish to refine our CSP script-src value to avoid using ‘unsafe-inline’. The CSP config is configured in Netlify, although adapter static is used for these sites.

SvelteKit CSP is also configured. It works in dev and so I have both, but the SvelteKit CSP headers do not come through to Netlify even if I remove the Netlify CSP headers.

The location identified by browser CSP error is in the script that is inside this core SveltKit wrapper div:
<div style="display: contents">%sveltekit.body%</div>
I believe this loads the svelte compiled code over itself. However CSP blocks the intermediate script.

The CSP error proposes a hash value, but that value changes depending on build. I assume because of included references the output files, that change each build for cache-breaking reasons.
Nonce is also a suggestion. I cant see where a nonce can be added, since the code is part of SvelteKit somewhere.

I have asked this in the Svelte forum. However are there any suggestions as to how this issue can be resolved from the Netlify side. Why would Netlify be blocking the CSP headers from SvelteKit?

2

Hi @rwoodnz :wave:t6: thanks for reaching out!

In the Netlify configuration, you can add specific domains to the allow list in the _headers or netlify.toml file. For example, you can add app.netlify.com and netlify-cdp-loader.netlify.app to the allow list. Here’s an example of how you can do this:

[[headers]]
  for = "/*"
  [headers.values]
    Content-Security-Policy = "script-src 'self' app.netlify.com netlify-cdp-loader.netlify.app;"

Please reference the documentation below:

If you’re using SvelteKit with the @sveltejs/adapter-static, the CSP headers from SvelteKit might not be coming through to Netlify. The extracts do not provide specific information on how to resolve this issue.

I recommend you checkout SvelteKit and Netlify documentation .

3

In respect to the script-src tag, the issue can be worked around by replacing CSP headers with configuration of this plugin: GitHub - MarcelloTheArcane/netlify-plugin-csp-generator: Generate CSP headers from inline script hashes
This plugin will then include a dynamically generated hash for script-src for the core svelte loading scipt.
In my case I had to then set styleSrc to be excluded from that generation as the generator will create a hash for it. That then becomes an issue due to all the inline-styles that are typical in Svelte. You can’t use unsafe-inline once there is a hash under script-src.
So still looking for the solution that allows dynamic inline svelte styles to be used without having to use unsafe-inline.

4

Have you tried to utilize the nonce attribute in combination with a server-side generated nonce value?