feat: Add CSP support for `hydratable` #17338

elliott-with-the-longest-name-on-github · 2025-12-09T22:27:30Z

This also gives us an avenue for supporting CSS stuff in the future.

Before submitting the PR, please make sure you do the following

It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
Prefix your PR title with feat:, fix:, chore:, or docs:.
This message body should clearly illustrate what problems it solves.
Ideally, include a test that fails without this PR but passes with it.
If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

Run the tests with pnpm test and lint the project with pnpm lint

changeset-bot · 2025-12-09T22:27:40Z

⚠️ No Changeset found

Latest commit: 2f394b8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2025-12-09T22:28:10Z

Playground

pnpm add https://pkg.pr.new/svelte@17338

svelte-docs-bot · 2025-12-09T22:28:11Z

Preview: https://svelte-dev-git-preview-svelte-17338-svelte.vercel.app/

packages/svelte/src/internal/server/renderer.js

elliott-with-the-longest-name-on-github · 2025-12-09T22:44:07Z

packages/svelte/src/internal/server/renderer.js

-			body
+			body,
+			hashes: {
+				script: renderer.global.csp.script_hashes


as of now, this will only ever have one hash in it -- however, with streaming, it would be more...

Thinking ahead, with streaming, this should probably error if you try to access it prior to fully-reading tail, because it needs to be fully-populated before you send the response.

elliott-with-the-longest-name-on-github · 2025-12-09T22:52:28Z

packages/svelte/src/internal/server/renderer.js

-			{
-				${prelude}
+		const body = `
+{


I dedented and changed the formatting of this stuff because it was confusing in the browser... I could be convinced to sacrifice browser readability for code readability but I don't think the readability here is that bad, and it also technically reduces the byte count

Do you think we should look into some sort of minification in production?

not sure I follow — this is what it looked like before:

this is what it looks like now:

surely it's more readable on main?

not too concerned about minification personally — I think the sacrifice of a dozen bytes is worth it for the readability

Yeah as far as the actual code output it's pretty much as minified as it can be without just nuking all of the whitespace

Do you have some weird set of settings on your browser? This is what it looks like for me in Chrome Devtools:

And with the old version it would be indented way off to the right

Ah, it's about whether you're viewing source or inspecting

Even when viewing source that seems wrong -- we don't send formatted HTML so it's like... indenting the tags but not the content? Weird

…nto elliott/hydratable-csp

packages/svelte/src/internal/server/crypto.test.ts

packages/svelte/src/internal/server/renderer.js

packages/svelte/src/internal/server/index.js

documentation/docs/06-runtime/05-hydratable.md

packages/svelte/src/internal/server/crypto.js

Rich-Harris · 2025-12-11T21:34:04Z

packages/svelte/src/internal/server/crypto.js

+export async function sha256(data) {
+	text_encoder ??= new TextEncoder();
+	// @ts-ignore - we don't install node types in the prod build
+	crypto ??= (await import('node:crypto')).webcrypto;


come to think of it didn't we talk about skipping this and assuming that crypto is always available as a global, given that hydratable is behind the experimental.async flag? not worried about excluding people who want to use bleeding edge Svelte features but are still rocking Node 16 or whatever

The workaround to make it work with the Node 18 tests is just way more annoying than doing this for now 😆 given it won't even run with the above change I'm inclined to just leave it

Can't we just do globalThis.crypto ??= await import('node:crypto').webcrypto in the tests, before this module is imported?

Rich-Harris · 2025-12-11T21:36:27Z

packages/svelte/src/internal/server/index.js

+	if (options.csp) {
+		csp =
+			'nonce' in options.csp
+				? { nonce: options.csp.nonce, hash: false }
+				: { hash: options.csp.hash, nonce: undefined };


can't we just use options.csp directly?

Not as currently typed -- the input value is a union. Maybe this is undesirable and we should just use an object with optional keys and JSDoc?

Rich-Harris · 2025-12-11T21:41:17Z

packages/svelte/src/internal/server/renderer.js

-			{
-				${prelude}
+		const body = `
+{


not sure I follow — this is what it looked like before:

this is what it looks like now:

surely it's more readable on main?

not too concerned about minification personally — I think the sacrifice of a dozen bytes is worth it for the readability

Co-authored-by: Rich Harris <[email protected]>

elliott-with-the-longest-name-on-github added 3 commits December 8, 2025 18:01

tests

6669b9a

tweak

66f3255

tweaks

2be2594

elliott-with-the-longest-name-on-github commented Dec 9, 2025

View reviewed changes

elliott-with-the-longest-name-on-github and others added 7 commits December 9, 2025 15:56

Update packages/svelte/src/internal/server/renderer.js

59301a3

docs

3e04518

Merge branch 'elliott/hydratable-csp' of github.com:sveltejs/svelte i…

342ec99

…nto elliott/hydratable-csp

typescript

7a5886d

node 18

479deb6

ts

691cd47

ts

25b9b93

Ocean-OS reviewed Dec 10, 2025

View reviewed changes

packages/svelte/src/internal/server/crypto.test.ts Show resolved Hide resolved

packages/svelte/src/internal/server/renderer.js Show resolved Hide resolved

7nik reviewed Dec 10, 2025

View reviewed changes

packages/svelte/src/internal/server/index.js Outdated Show resolved Hide resolved

elliott-with-the-longest-name-on-github added 3 commits December 10, 2025 10:33

tweak

4736669

fix tests?

f614efe

hopefully fix docs

25e4050

Rich-Harris reviewed Dec 11, 2025

View reviewed changes

elliott-with-the-longest-name-on-github and others added 4 commits December 11, 2025 18:02

Apply suggestions from code review

6460284

Co-authored-by: Rich Harris <[email protected]>

base64_encode

ae7bbe0

ugh

87aebaf

eightieth times the charm

2f394b8

Uh oh!

feat: Add CSP support for hydratable #17338

Are you sure you want to change the base?

feat: Add CSP support for hydratable #17338

Conversation

elliott-with-the-longest-name-on-github commented Dec 9, 2025

Before submitting the PR, please make sure you do the following

Tests and linting

Uh oh!

changeset-bot bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Dec 9, 2025

Uh oh!

svelte-docs-bot bot commented Dec 9, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

feat: Add CSP support for `hydratable` #17338

feat: Add CSP support for `hydratable` #17338

changeset-bot bot commented Dec 9, 2025 •

edited

Loading