SvelteKit won't build because scripts added in the head element with strict CSP use a nonce
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
Ok so basically I'm using strict CSP with kit.csp.mode set to "auto" and I added %sveltekit.nonce% to the nonce attribute of a <script> located in the <head> of app.html as instructed by the docs.
This causes the build to fail with the following error:
Error: Cannot use prerendering if page template contains %sveltekit.nonce%
Setting kit.csp.mode to "hash" is not an option since scripts in kit.csp.mode can only use a nonce.
Also, I'm not aware if nonces are considered better than hashes, but they do seem more lightweight, so that's potentially another reason a developer would not want to set kit.csp.mode to hash.
The only solution is to either manually calculate the hash and add it to the CSP policy but obviously that's not a good idea because, when I tested, SvelteKit successfully compiles with the wrong hash, and all it would take is for one character to change in the script, the developer forgetting to change the hash, not noticing the error, and the result would be a pretty nasty bug in production.
Or, as a workaround, you could disable prerendering entirely, which would be arguably even worse.
I think the solution here should be to either make SvelteKit use hashes for scripts in app.html, or to offer a %sveltekit.hash% placeholder, similar to %sveltekit.nonce%, thus giving the user more flexibility by being slightly less convenient.
I'm not sure whether this should be a bug report or a feature request, I ended up choosing to report it as a bug, sorry if it was the wrong choice.
Reproduction
To repro just run npm run build
https://stackblitz.com/edit/sveltejs-kit-template-default-jntr65
Logs
No response
System Info
N/A (bug can be easily reproduced in StackBlitz and has nothing to do with the underlying environment)
Severity
serious, but I can work around it
Additional Information
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the app.html template and reproduce the failure using npm run build in the linked StackBlitz example. Trace how %sveltekit.nonce% interacts with strict CSP, prerendering, and scripts in the head. Done means a supported nonce or hash approach allows this configuration to build without requiring an unsafe workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- build-system, security, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100