fix: add support for trusted types CSP (#15323)

closes #7975

This PR:
- adds a validation error that guides the user to update their Svelte
version when using the CSP directive `require-trusted-types-for` or
`trusted-types`.
- uses a trusted policy to register the service worker when possible
- errors if the svelte policy name is not included when trusted-types is
configured
- errors if the sveltekit policy name is not included when trusted-types
is configured and a service worker exists and is automatically
registered by us. We don't care if the user is registering the service
worker on their own because then they can create their own trusted
policy while doing so

### Open questions

1. Should we automatically add `svelte-trusted-html` to `trusted-types`
if `require-trusted-types-for` is in use?
	- This will cause any other trusted type policies to throw an error.
2. Or should we only add `svelte-trusted-html` when the user has
`trusted-types` configured?
- This means any trusted type policy is permitted on the page, which
kind of defeats the purpose.
3. Or should we do nothing?
- This means any trusted type policy is permitted on the page, which
kind of defeats the purpose.
- If the user has `trusted-types` configured but omitted
`svelte-trusted-html`, they will have to discover the error message in
the browser console logs, and figure out that they have to add the
svelte trusted type to the config themselves.
5. Or should we error when the `trusted-types` config option isn't
configured alongside the `require-trusted-types-for` option?
	- This will help teach users to add `svelte-trusted-html` themselves.
	- Could be kind of annoying and/or limiting.

---

### Please don't delete this checklist! Before submitting the PR, please
make sure you do the following:
- [x] 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
- [x] This message body should clearly illustrate what problems it
solves.
- [x] Ideally, include a test that fails without this PR but passes with
it.

### Tests
- [x] Run the tests with `pnpm test` and lint the project with `pnpm
lint` and `pnpm check`

### Changesets
- [x] If your PR makes a change that should be noted in one or more
packages' changelogs, generate a changeset by running `pnpm changeset`
and following the prompts. Changesets that add features should be
`minor` and those that fix bugs should be `patch`. Please prefix
changeset messages with `feat:`, `fix:`, or `chore:`.

### Edits

- [x] Please ensure that 'Allow edits from maintainers' is checked. PRs
without this option may be closed.

---------

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Co-authored-by: Rich Harris <richard.a.harris@gmail.com>

Author: 3 people

.changeset/silent-sites-end.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: `config.kit.csp.directives['trusted-types']` requires `'svelte-trusted-html'` (and `'sveltekit-trusted-url'` when a service worker is automatically registered) if it is configured

packages/kit/src/core/config/index.js

@@ -3,6 +3,7 @@ import path from 'node:path';
 import process from 'node:process';
 import * as url from 'node:url';
 import options from './options.js';
+import { resolve_entry } from '../../utils/filesystem.js';
 
 /**
  * Loads the template (src/app.html by default) and validates that it has the
@@ -96,7 +97,7 @@ export async function load_config({ cwd = process.cwd() } = {}) {
  * @returns {import('types').ValidatedConfig}
  */
 function process_config(config, { cwd = process.cwd() } = {}) {
-	const validated = validate_config(config);
+	const validated = validate_config(config, cwd);
 
 	validated.kit.outDir = path.resolve(cwd, validated.kit.outDir);
 
@@ -116,15 +117,17 @@ function process_config(config, { cwd = process.cwd() } = {}) {
 
 /**
  * @param {import('@sveltejs/kit').Config} config
+ * @param {string} [cwd]
  * @returns {import('types').ValidatedConfig}
  */
-export function validate_config(config) {
+export function validate_config(config, cwd = process.cwd()) {
 	if (typeof config !== 'object') {
 		throw new Error(
 			'The Svelte config file must have a configuration object as its default export. See https://svelte.dev/docs/kit/configuration'
 		);
 	}
 
+	/** @type {import('types').ValidatedConfig} */
 	const validated = options(config, 'config');
 	const files = validated.kit.files;
 
@@ -151,5 +154,22 @@ export function validate_config(config) {
 		}
 	}
 
+	if (validated.kit.csp?.directives?.['require-trusted-types-for']?.includes('script')) {
+		if (!validated.kit.csp?.directives?.['trusted-types']?.includes('svelte-trusted-html')) {
+			throw new Error(
+				"The `csp.directives['trusted-types']` option must include 'svelte-trusted-html'"
+			);
+		}
+		if (
+			validated.kit.serviceWorker?.register &&
+			resolve_entry(path.resolve(cwd, validated.kit.files.serviceWorker)) &&
+			!validated.kit.csp?.directives?.['trusted-types']?.includes('sveltekit-trusted-url')
+		) {
+			throw new Error(
+				"The `csp.directives['trusted-types']` option must include 'sveltekit-trusted-url' when `serviceWorker.register` is true"
+			);
+		}
+	}
+
 	return validated;
 }

packages/kit/src/core/config/options.js

@@ -1,7 +1,8 @@
+/** @import { Validator } from './types.js' */
+
 import process from 'node:process';
 import colors from 'kleur';
-
-/** @typedef {import('./types.js').Validator} Validator */
+import { supportsTrustedTypes } from '../sync/utils.js';
 
 const directives = object({
 	'child-src': string_array(),
@@ -28,8 +29,14 @@ const directives = object({
 	'navigate-to': string_array(),
 	'report-uri': string_array(),
 	'report-to': string_array(),
-	'require-trusted-types-for': string_array(),
-	'trusted-types': string_array(),
+	'require-trusted-types-for': validate(undefined, (input, keypath) => {
+		assert_trusted_types_supported(keypath);
+		return string_array()(input, keypath);
+	}),
+	'trusted-types': validate(undefined, (input, keypath) => {
+		assert_trusted_types_supported(keypath);
+		return string_array()(input, keypath);
+	}),
 	'upgrade-insecure-requests': boolean(false),
 	'require-sri-for': string_array(),
 	'block-all-mixed-content': boolean(false),
@@ -486,4 +493,13 @@ function assert_string(input, keypath) {
 	}
 }
 
+/** @param {string} keypath */
+function assert_trusted_types_supported(keypath) {
+	if (!supportsTrustedTypes()) {
+		throw new Error(
+			`${keypath} is not supported by your version of Svelte. Please upgrade to Svelte 5.51.0 or later to use this directive.`
+		);
+	}
+}
+
 export default options;

packages/kit/src/core/sync/utils.js

@@ -6,6 +6,8 @@ import { import_peer } from '../../utils/import.js';
 /** @type {{ VERSION: string }} */
 const { VERSION } = await import_peer('svelte/compiler');
 
+const [MAJOR, MINOR] = VERSION.split('.').map(Number);
+
 /** @type {Map<string, string>} */
 const previous_contents = new Map();
 
@@ -74,5 +76,10 @@ export function dedent(strings, ...values) {
 }
 
 export function isSvelte5Plus() {
-	return Number(VERSION[0]) >= 5;
+	return MAJOR >= 5;
+}
+
+// TODO 3.0 remove this once we can bump the peerDep range
+export function supportsTrustedTypes() {
+	return (MAJOR === 5 && MINOR >= 51) || MAJOR > 5;
 }

packages/kit/src/runtime/server/page/render.js

@@ -614,8 +614,14 @@ export async function render_response({
 			// we use an anonymous function instead of an arrow function to support
 			// older browsers (https://github.com/sveltejs/kit/pull/5417)
 			blocks.push(`if ('serviceWorker' in navigator) {
+						const script_url = '${prefixed('service-worker.js')}';
+						const policy = globalThis?.window?.trustedTypes?.createPolicy(
+							'sveltekit-trusted-url',
+							{ createScriptURL(url) { return url; } }
+						);
+						const sanitised = policy?.createScriptURL(script_url) ?? script_url;
 						addEventListener('load', function () {
-							navigator.serviceWorker.register('${prefixed('service-worker.js')}'${opts});
+							navigator.serviceWorker.register(sanitised${opts});
 						});
 					}`);
 		}

packages/kit/test/apps/options-2/package.json

@@ -10,7 +10,7 @@
 		"check": "svelte-kit sync && tsc && svelte-check",
 		"test": "pnpm test:dev && pnpm test:build",
 		"test:dev": "DEV=true playwright test",
-		"test:build": "playwright test"
+		"test:build": "playwright test && REGISTER_SERVICE_WORKER=true playwright test"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-node": "workspace:^",

packages/kit/test/apps/options-2/src/routes/csp-trusted-types/+page.svelte

@@ -0,0 +1 @@
+<p>this page will error when SvelteKit tries to register the service worker</p>

packages/kit/test/apps/options-2/svelte.config.js

@@ -1,3 +1,5 @@
+import process from 'node:process';
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	compilerOptions: {
@@ -6,12 +8,18 @@ const config = {
 		}
 	},
 	kit: {
+		csp: {
+			directives: {
+				'require-trusted-types-for': ['script'],
+				'trusted-types': ['svelte-trusted-html', 'sveltekit-trusted-url']
+			}
+		},
 		paths: {
 			base: '/basepath',
 			relative: true
 		},
 		serviceWorker: {
-			register: false
+			register: !!process.env.REGISTER_SERVICE_WORKER
 		},
 		env: {
 			dir: '../../env'

packages/kit/test/apps/options-2/test/service-worker.test.js

@@ -0,0 +1,55 @@
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+import { expect } from '@playwright/test';
+import { test } from '../../../utils.js';
+
+test.skip(({ javaScriptEnabled }) => !javaScriptEnabled || !process.env.REGISTER_SERVICE_WORKER);
+
+test('import proxy /basepath/service-worker.js', async ({ request }) => {
+	test.skip(!process.env.DEV);
+
+	const __dirname = path.dirname(fileURLToPath(import.meta.url));
+	const response = await request.get('/basepath/service-worker.js');
+	const content = await response.text();
+	expect(content).toEqual(
+		`import '${path.join('/basepath', '/@fs', __dirname, '../src/service-worker.js')}';`
+	);
+});
+
+test('build /basepath/service-worker.js', async ({ baseURL, request }) => {
+	test.skip(!!process.env.DEV);
+
+	const response = await request.get('/basepath/service-worker.js');
+	const content = await response.text();
+
+	const fn = new Function('self', 'location', content);
+
+	const self = {
+		addEventListener: () => {},
+		base: null,
+		build: null,
+		image_src: undefined
+	};
+
+	const pathname = '/basepath/service-worker.js';
+
+	fn(self, {
+		href: baseURL + pathname,
+		pathname
+	});
+
+	expect(self.base).toBe('/basepath');
+	expect(self.build?.[0]).toMatch(/\/basepath\/_app\/immutable\/bundle\.[\w-]+\.js/);
+	expect(self.image_src).toMatch(/\/basepath\/_app\/immutable\/assets\/image\.[\w-]+\.jpg/);
+});
+
+test('works with CSP require-trusted-types-for', async ({ page }) => {
+	const errors = [];
+	page.on('pageerror', (err) => {
+		errors.push(err.message);
+	});
+
+	await page.goto('/basepath/csp-trusted-types');
+	expect(errors.length).toEqual(0);
+});

packages/kit/test/apps/options-2/test/test.js

@@ -1,10 +1,8 @@
-import path from 'node:path';
 import process from 'node:process';
-import { fileURLToPath } from 'node:url';
 import { expect } from '@playwright/test';
 import { test } from '../../../utils.js';
 
-/** @typedef {import('@playwright/test').Response} Response */
+test.skip(() => !!process.env.REGISTER_SERVICE_WORKER);
 
 test.describe.configure({ mode: 'parallel' });
 
@@ -107,60 +105,22 @@ test.describe('paths', () => {
 });
 
 test.describe('trailing slash', () => {
-	if (!process.env.DEV) {
-		test('trailing slash server prerendered without server load', async ({
-			page,
-			clicknav,
-			javaScriptEnabled
-		}) => {
-			if (!javaScriptEnabled) return;
-
-			await page.goto('/basepath/trailing-slash-server');
-
-			await clicknav('a[href="/basepath/trailing-slash-server/prerender"]');
-			expect(await page.textContent('h2')).toBe('/basepath/trailing-slash-server/prerender/');
-		});
-	}
+	test('trailing slash server prerendered without server load', async ({
+		page,
+		clicknav,
+		javaScriptEnabled
+	}) => {
+		test.skip(!javaScriptEnabled || !process.env.DEV);
+
+		await page.goto('/basepath/trailing-slash-server');
+
+		await clicknav('a[href="/basepath/trailing-slash-server/prerender"]');
+		expect(await page.textContent('h2')).toBe('/basepath/trailing-slash-server/prerender/');
+	});
 });
 
 test.describe('Service worker', () => {
-	if (process.env.DEV) {
-		test('import proxy /basepath/service-worker.js', async ({ request }) => {
-			const __dirname = path.dirname(fileURLToPath(import.meta.url));
-			const response = await request.get('/basepath/service-worker.js');
-			const content = await response.text();
-			expect(content).toEqual(
-				`import '${path.join('/basepath', '/@fs', __dirname, '../src/service-worker.js')}';`
-			);
-		});
-
-		return;
-	}
-
-	test('build /basepath/service-worker.js', async ({ baseURL, request }) => {
-		const response = await request.get('/basepath/service-worker.js');
-		const content = await response.text();
-
-		const fn = new Function('self', 'location', content);
-
-		const self = {
-			addEventListener: () => {},
-			base: null,
-			build: null,
-			image_src: undefined
-		};
-
-		const pathname = '/basepath/service-worker.js';
-
-		fn(self, {
-			href: baseURL + pathname,
-			pathname
-		});
-
-		expect(self.base).toBe('/basepath');
-		expect(self.build?.[0]).toMatch(/\/basepath\/_app\/immutable\/bundle\.[\w-]+\.js/);
-		expect(self.image_src).toMatch(/\/basepath\/_app\/immutable\/assets\/image\.[\w-]+\.jpg/);
-	});
+	test.skip(({ javaScriptEnabled }) => !javaScriptEnabled);
 
 	test('does not register /basepath/service-worker.js', async ({ page }) => {
 		await page.goto('/basepath');