Missing CSP header for pre-rendered streamed promises
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
Streaming promise after prerendering becomes a script tag that isn't included in the automatic CSP header.
This
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapterStatic(),
csp: {
directives: {
'script-src': ['self', 'unsafe-inline']
}
}
}
};
export const prerender = true;
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
return {
data: { normal: 'data' },
streamed: {
delayedData: sleep(5000).then(() => ({ delayed: 'data' }))
}
};
}
leads to following error:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'sha256-OoJGIbcMedj8pJLEC3ObYW2A5hC4wSoBxJJlIbJBobw='". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.
this error comes from following line:
<script>__sveltekit_4xqbjq.resolve({id:1,data:{delayed:"data"},error:void 0})</script>
Reproduction
Visit :
https://stackblitz.com/edit/streaming-prerender-bug?file=src/routes/+page.server.js
- build the project with
npm run build(the issue doesn't appear indevmode) - start server with
npm run preview - Visit the preview in a new tab
- the second promise ("Loading streamed...") won't resolve
- the CSP error should be visible in the console
(There are timeouts (≤ 2s) to simulate fetching, so if it looks stuck just wait a second)
Logs
No response
System Info
System:
OS: macOS 13.3
CPU: (8) arm64 Apple M1
Memory: 665.36 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 19.7.0 - /opt/homebrew/bin/node
npm: 9.5.0 - /opt/homebrew/bin/npm
Browsers:
Brave Browser: 109.1.47.186
Chrome Canary: 112.0.5607.0
Safari: 16.4
npmPackages:
@sveltejs/adapter-cloudflare: ^2.0.0 => 2.0.2
@sveltejs/kit: ^1.8.0 => 1.8.5
svelte: ^3.54.0 => 3.55.1
vite: ^4.1.0 => 4.1.4
But also happens on StackBlitz
Severity
annoyance
Additional Information
Can be easily fixed by:
- not using CSP
- not using streaming, when prerendering
But runtime warning or mention in the docs would be nice,
because the behaviour differs in dev and build modes.
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
Reproduce the issue from the linked StackBlitz project using src/routes/+page.server.js, npm run build, and npm run preview. Start by tracing automatic CSP handling for the streamed promise script shown in the report; done should mean the prerendered stream no longer fails CSP, or the build clearly warns or documents the unsupported combination.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- security, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100