CSP (#3499)

* add CSP types

* add csp stuff to config

* add csp to SSRRenderOptions

* lay some groundwork

* fall back to default-src

* more stuff

* generate meta tags last

* move CSP logic out into separate (and more testable) class

* fixes

* fix

* lint

* add test to show CSP headers are working

* test for <meta http-equiv> tags

* lint

* polyfill web crypto API in node

* add install-crypto module for node-a-like environments

* add relevant subset of sjcl

* start tidying up

* remove some unused code

* move some stuff out of the prototype

* use a class

* more tidying

* more tidying

* more tidying

* fix all type errors

* store init vector and hash key as typed arrays

* convert to closure

* more tidying

* hoist block

* more tidying

* use textdecoder

* create textencoder once

* more tidying

* simplify further

* more tidying

* more tidying

* simplify

* radically simplify

* simplify further

* more crypto stuff

* use node crypto module to generate hashes where possible

* remove unnecessary awaits

* fix mutation bug

* trick esbuild

* windows fix, hopefully

* add unsafe-inline styles in dev

* gah windows

* oops

* change install_fetch back to __fetch_polyfill (ugh)

* revert cosmetic changes

* one base64 implementation is probably enough

* changeset

* document CSP stuff

* remove out of date comment

* add TODO to remove node crypto stuff eventually

* start adding CSP unit tests

* various fixes, suppress strict-dynamic in dev

* always create a nonce if template needs it, regardless of mode

* comment out strict-dynamic handling for now

* lint

Author: Rich-Harris

.changeset/spicy-glasses-promise.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+Add CSP support

documentation/docs/14-configuration.md

@@ -17,6 +17,13 @@ const config = {
 		adapter: null,
 		amp: false,
 		appDir: '_app',
+		csp: {
+			mode: 'auto',
+			directives: {
+				'default-src': undefined
+				// ...
+			}
+		},
 		files: {
 			assets: 'static',
 			hooks: 'src/hooks',
@@ -82,6 +89,29 @@ Enable [AMP](#amp) mode.
 
 The directory relative to `paths.assets` where the built JS and CSS (and imported assets) are served from. (The filenames therein contain content-based hashes, meaning they can be cached indefinitely). Must not start or end with `/`.
 
+### csp
+
+An object containing zero or more of the following values:
+
+- `mode` — 'hash', 'nonce' or 'auto'
+- `directives` — an object of `[directive]: value[]` pairs.
+
+[Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) configuration. CSP helps to protect your users against cross-site scripting (XSS) attacks, by limiting the places resources can be loaded from. For example, a configuration like this...
+
+```js
+{
+	directives: {
+		'script-src': ['self']
+	}
+}
+```
+
+...would prevent scripts loading from external sites. SvelteKit will augment the specified directives with nonces or hashes (depending on `mode`) for any inline styles and scripts it generates.
+
+When pages are prerendered, the CSP header is added via a `<meta http-equiv>` tag (note that in this case, `frame-ancestors`, `report-uri` and `sandbox` directives will be ignored).
+
+> When `mode` is `'auto'`, SvelteKit will use nonces for dynamically rendered pages and hashes for prerendered pages. Using nonces with prerendered pages is insecure and therefore forbiddem.
+
 ### files
 
 An object containing zero or more of the following `string` values:

packages/kit/src/core/build/build_server.js

@@ -11,24 +11,25 @@ import { s } from '../../utils/misc.js';
 
 /**
  * @param {{
- *   cwd: string;
  *   hooks: string;
  *   config: import('types/config').ValidatedConfig;
  *   has_service_worker: boolean;
+ *   template: string;
  * }} opts
  * @returns
  */
-const template = ({ cwd, config, hooks, has_service_worker }) => `
+const app_template = ({ config, hooks, has_service_worker, template }) => `
 import root from '__GENERATED__/root.svelte';
 import { respond } from '${runtime}/server/index.js';
 import { set_paths, assets, base } from '${runtime}/paths.js';
 import { set_prerendering } from '${runtime}/env.js';
 import * as user_hooks from ${s(hooks)};
 
-const template = ({ head, body, assets }) => ${s(load_template(cwd, config))
+const template = ({ head, body, assets, nonce }) => ${s(template)
 	.replace('%svelte.head%', '" + head + "')
 	.replace('%svelte.body%', '" + body + "')
-	.replace(/%svelte\.assets%/g, '" + assets + "')};
+	.replace(/%svelte\.assets%/g, '" + assets + "')
+	.replace(/%svelte\.nonce%/g, '" + nonce + "')};
 
 let read = null;
 
@@ -60,6 +61,7 @@ export class App {
 
 		this.options = {
 			amp: ${config.kit.amp},
+			csp: ${s(config.kit.csp)},
 			dev: false,
 			floc: ${config.kit.floc},
 			get_stack: error => String(error), // for security
@@ -89,6 +91,7 @@ export class App {
 			router: ${s(config.kit.router)},
 			target: ${s(config.kit.target)},
 			template,
+			template_contains_nonce: ${template.includes('%svelte.nonce%')},
 			trailing_slash: ${s(config.kit.trailingSlash)}
 		};
 	}
@@ -172,11 +175,11 @@ export async function build_server(
 	// prettier-ignore
 	fs.writeFileSync(
 		input.app,
-		template({
-			cwd,
+		app_template({
 			config,
 			hooks: app_relative(hooks_file),
-			has_service_worker: service_worker_register && !!service_worker_entry_file
+			has_service_worker: service_worker_register && !!service_worker_entry_file,
+			template: load_template(cwd, config)
 		})
 	);
 

packages/kit/src/core/config/test/fixtures/default/svelte.config.js renamed to packages/kit/src/core/config/fixtures/default/svelte.config.js

@@ -1,8 +1,99 @@
+import { join } from 'path';
+import { fileURLToPath } from 'url';
 import { test } from 'uvu';
 import * as assert from 'uvu/assert';
-
 import { remove_keys } from '../../utils/object.js';
-import { validate_config } from './index.js';
+import { validate_config, load_config } from './index.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = join(__filename, '..');
+
+const get_defaults = (prefix = '') => ({
+	extensions: ['.svelte'],
+	kit: {
+		adapter: null,
+		amp: false,
+		appDir: '_app',
+		csp: {
+			mode: 'auto',
+			directives: {
+				'child-src': undefined,
+				'default-src': undefined,
+				'frame-src': undefined,
+				'worker-src': undefined,
+				'connect-src': undefined,
+				'font-src': undefined,
+				'img-src': undefined,
+				'manifest-src': undefined,
+				'media-src': undefined,
+				'object-src': undefined,
+				'prefetch-src': undefined,
+				'script-src': undefined,
+				'script-src-elem': undefined,
+				'script-src-attr': undefined,
+				'style-src': undefined,
+				'style-src-elem': undefined,
+				'style-src-attr': undefined,
+				'base-uri': undefined,
+				sandbox: undefined,
+				'form-action': undefined,
+				'frame-ancestors': undefined,
+				'navigate-to': undefined,
+				'report-uri': undefined,
+				'report-to': undefined,
+				'require-trusted-types-for': undefined,
+				'trusted-types': undefined,
+				'upgrade-insecure-requests': false,
+				'require-sri-for': undefined,
+				'block-all-mixed-content': false,
+				'plugin-types': undefined,
+				referrer: undefined
+			}
+		},
+		files: {
+			assets: join(prefix, 'static'),
+			hooks: join(prefix, 'src/hooks'),
+			lib: join(prefix, 'src/lib'),
+			routes: join(prefix, 'src/routes'),
+			serviceWorker: join(prefix, 'src/service-worker'),
+			template: join(prefix, 'src/app.html')
+		},
+		floc: false,
+		headers: undefined,
+		host: undefined,
+		hydrate: true,
+		inlineStyleThreshold: 0,
+		methodOverride: {
+			parameter: '_method',
+			allowed: []
+		},
+		package: {
+			dir: 'package',
+			emitTypes: true
+		},
+		serviceWorker: {
+			register: true
+		},
+		paths: {
+			base: '',
+			assets: ''
+		},
+		prerender: {
+			concurrency: 1,
+			crawl: true,
+			enabled: true,
+			entries: ['*'],
+			force: undefined,
+			onError: 'fail',
+			pages: undefined
+		},
+		protocol: undefined,
+		router: true,
+		ssr: null,
+		target: null,
+		trailingSlash: 'never'
+	}
+});
 
 test('fills in defaults', () => {
 	const validated = validate_config({});
@@ -14,56 +105,7 @@ test('fills in defaults', () => {
 
 	remove_keys(validated, ([, v]) => typeof v === 'function');
 
-	assert.equal(validated, {
-		extensions: ['.svelte'],
-		kit: {
-			adapter: null,
-			amp: false,
-			appDir: '_app',
-			files: {
-				assets: 'static',
-				hooks: 'src/hooks',
-				lib: 'src/lib',
-				routes: 'src/routes',
-				serviceWorker: 'src/service-worker',
-				template: 'src/app.html'
-			},
-			floc: false,
-			headers: undefined,
-			host: undefined,
-			hydrate: true,
-			inlineStyleThreshold: 0,
-			methodOverride: {
-				parameter: '_method',
-				allowed: []
-			},
-			package: {
-				dir: 'package',
-				emitTypes: true
-			},
-			serviceWorker: {
-				register: true
-			},
-			paths: {
-				base: '',
-				assets: ''
-			},
-			prerender: {
-				concurrency: 1,
-				crawl: true,
-				enabled: true,
-				entries: ['*'],
-				force: undefined,
-				onError: 'fail',
-				pages: undefined
-			},
-			protocol: undefined,
-			router: true,
-			ssr: null,
-			target: null,
-			trailingSlash: 'never'
-		}
-	});
+	assert.equal(validated, get_defaults());
 });
 
 test('errors on invalid values', () => {
@@ -123,56 +165,10 @@ test('fills in partial blanks', () => {
 
 	remove_keys(validated, ([, v]) => typeof v === 'function');
 
-	assert.equal(validated, {
-		extensions: ['.svelte'],
-		kit: {
-			adapter: null,
-			amp: false,
-			appDir: '_app',
-			files: {
-				assets: 'public',
-				hooks: 'src/hooks',
-				lib: 'src/lib',
-				routes: 'src/routes',
-				serviceWorker: 'src/service-worker',
-				template: 'src/app.html'
-			},
-			floc: false,
-			headers: undefined,
-			host: undefined,
-			hydrate: true,
-			inlineStyleThreshold: 0,
-			methodOverride: {
-				parameter: '_method',
-				allowed: []
-			},
-			package: {
-				dir: 'package',
-				emitTypes: true
-			},
-			serviceWorker: {
-				register: true
-			},
-			paths: {
-				base: '',
-				assets: ''
-			},
-			prerender: {
-				concurrency: 1,
-				crawl: true,
-				enabled: true,
-				entries: ['*'],
-				force: undefined,
-				onError: 'fail',
-				pages: undefined
-			},
-			protocol: undefined,
-			router: true,
-			ssr: null,
-			target: null,
-			trailingSlash: 'never'
-		}
-	});
+	const config = get_defaults();
+	config.kit.files.assets = 'public';
+
+	assert.equal(validated, config);
 });
 
 test('fails if kit.appDir is blank', () => {
@@ -327,4 +323,29 @@ validate_paths(
 	}
 );
 
+test('load default config (esm)', async () => {
+	const cwd = join(__dirname, 'fixtures/default');
+
+	const config = await load_config({ cwd });
+	remove_keys(config, ([, v]) => typeof v === 'function');
+
+	assert.equal(config, get_defaults(cwd + '/'));
+});
+
+test('errors on loading config with incorrect default export', async () => {
+	let message = null;
+
+	try {
+		const cwd = join(__dirname, 'fixtures', 'export-string');
+		await load_config({ cwd });
+	} catch (/** @type {any} */ e) {
+		message = e.message;
+	}
+
+	assert.equal(
+		message,
+		'svelte.config.js must have a configuration object as its default export. See https://kit.svelte.dev/docs#configuration'
+	);
+});
+
 test.run();