tests

Author: elliott-with-the-longest-name-on-github

documentation/docs/98-reference/.generated/server-warnings.md

@@ -1,5 +1,12 @@
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### invalid_csp
+
+```
+`csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.
+`nonce` will be used.
+```
+
 ### unresolved_hydratable
 
 ```

packages/svelte/messages/server-warnings/warnings.md

@@ -1,3 +1,8 @@
+## invalid_csp
+
+> `csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.
+> `nonce` will be used.
+
 ## unresolved_hydratable
 
 > A `hydratable` value with key `%key%` was created, but at least part of it was not used during the render.

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

@@ -0,0 +1,8 @@
+let text_encoder;
+
+/** @param {string} data */
+export async function sha256(data) {
+	text_encoder ??= new TextEncoder();
+	const hash_buffer = await crypto.subtle.digest('SHA-256', text_encoder.encode(data));
+	return Buffer.from(hash_buffer).toString('base64');
+}

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

@@ -0,0 +1,15 @@
+import { assert, test } from 'vitest';
+import { sha256 } from './crypto.js';
+
+const inputs = [
+	['hello world', 'uU0nuZNNPgilLlLX2n2r+sSE7+N6U4DukIj3rOLvzek='],
+	['', '47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='],
+	['abcd', 'iNQmb9TmM40TuEX88olXnSCciXgjuSF9o+Fhk28DFYk='],
+	['the quick brown fox jumps over the lazy dog', 'Bcbgjx2f2voDFH/Lj4LxJMdtL3Dj2Ynciq2159dFC+w='],
+	['工欲善其事，必先利其器', 'oPOthkQ1c5BbPpvrr5WlUBJPyD5e6JeVdWcqBs9zvjA=']
+];
+
+test.each(inputs)('sha256("%s")', async (input, expected) => {
+	const actual = await sha256(input);
+	assert.equal(actual, expected);
+});

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

@@ -1,7 +1,6 @@
 /** @import { ComponentType, SvelteComponent, Component } from 'svelte' */
-/** @import { RenderOutput } from '#server' */
+/** @import { Csp, RenderOutput } from '#server' */
 /** @import { Store } from '#shared' */
-/** @import { AccumulatedContent } from './renderer.js' */
 export { FILENAME, HMR } from '../../constants.js';
 import { attr, clsx, to_class, to_style } from '../shared/attributes.js';
 import { is_promise, noop } from '../shared/utils.js';
@@ -18,6 +17,7 @@ import { EMPTY_COMMENT, BLOCK_CLOSE, BLOCK_OPEN, BLOCK_OPEN_ELSE } from './hydra
 import { validate_store } from '../shared/validate.js';
 import { is_boolean_attribute, is_raw_text_element, is_void } from '../../utils.js';
 import { Renderer } from './renderer.js';
+import * as w from './warnings.js';
 
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
 // https://infra.spec.whatwg.org/#noncharacter
@@ -56,11 +56,25 @@ export function element(renderer, tag, attributes_fn = noop, children_fn = noop)
  * Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app.
  * @template {Record<string, any>} Props
  * @param {Component<Props> | ComponentType<SvelteComponent<Props>>} component
- * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string }} [options]
+ * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string; csp?: Csp }} [options]
  * @returns {RenderOutput}
  */
 export function render(component, options = {}) {
-	return Renderer.render(/** @type {Component<Props>} */ (component), options);
+	let csp;
+	if (options.csp) {
+		csp =
+			'nonce' in options.csp
+				? { nonce: options.csp.nonce, hash: false }
+				: { hash: options.csp.hash, nonce: undefined };
+
+		if (csp.hash && csp.nonce) {
+			w.invalid_csp();
+		}
+	}
+	return Renderer.render(/** @type {Component<Props>} */ (component), {
+		...options,
+		csp
+	});
 }
 
 /**

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

@@ -1,5 +1,5 @@
 /** @import { Component } from 'svelte' */
-/** @import { HydratableContext, RenderOutput, SSRContext, SyncRenderOutput } from './types.js' */
+/** @import { CspInternal, HydratableContext, RenderOutput, SSRContext, SyncRenderOutput } from './types.js' */
 /** @import { MaybePromise } from '#shared' */
 import { async_mode_flag } from '../flags/index.js';
 import { abort } from './abort-signal.js';
@@ -9,7 +9,7 @@ import * as w from './warnings.js';
 import { BLOCK_CLOSE, BLOCK_OPEN } from './hydration.js';
 import { attributes } from './index.js';
 import { get_render_context, with_render_context, init_render_context } from './render-context.js';
-import { DEV } from 'esm-env';
+import { sha256 } from './crypto.js';
 
 /** @typedef {'head' | 'body'} RendererType */
 /** @typedef {{ [key in RendererType]: string }} AccumulatedContent */
@@ -376,7 +376,7 @@ export class Renderer {
 	 * Takes a component and returns an object with `body` and `head` properties on it, which you can use to populate the HTML when server-rendering your app.
 	 * @template {Record<string, any>} Props
 	 * @param {Component<Props>} component
-	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string }} [options]
+	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string; csp?: CspInternal }} [options]
 	 * @returns {RenderOutput}
 	 */
 	static render(component, options = {}) {
@@ -404,6 +404,11 @@ export class Renderer {
 					return (sync ??= Renderer.#render(component, options)).body;
 				}
 			},
+			hashes: {
+				value: {
+					script: ''
+				}
+			},
 			then: {
 				value:
 					/**
@@ -420,7 +425,8 @@ export class Renderer {
 							const user_result = onfulfilled({
 								head: result.head,
 								body: result.body,
-								html: result.body
+								html: result.body,
+								hashes: { script: '' }
 							});
 							return Promise.resolve(user_result);
 						}
@@ -514,8 +520,8 @@ export class Renderer {
 	 *
 	 * @template {Record<string, any>} Props
 	 * @param {Component<Props>} component
-	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string }} options
-	 * @returns {Promise<AccumulatedContent>}
+	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string; csp?: CspInternal }} options
+	 * @returns {Promise<AccumulatedContent & { hashes: { script: string } }>}
 	 */
 	static async #render_async(component, options) {
 		const previous_context = ssr_context;
@@ -585,19 +591,19 @@ export class Renderer {
 			await comparison;
 		}
 
-		return await Renderer.#hydratable_block(ctx);
+		return await this.#hydratable_block(ctx);
 	}
 
 	/**
 	 * @template {Record<string, any>} Props
 	 * @param {'sync' | 'async'} mode
 	 * @param {import('svelte').Component<Props>} component
-	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string }} options
+	 * @param {{ props?: Omit<Props, '$$slots' | '$$events'>; context?: Map<any, any>; idPrefix?: string; csp?: CspInternal }} options
 	 * @returns {Renderer}
 	 */
 	static #open_render(mode, component, options) {
 		const renderer = new Renderer(
-			new SSRState(mode, options.idPrefix ? options.idPrefix + '-' : '')
+			new SSRState(mode, options.idPrefix ? options.idPrefix + '-' : '', options.csp)
 		);
 
 		renderer.push(BLOCK_OPEN);
@@ -623,6 +629,7 @@ export class Renderer {
 	/**
 	 * @param {AccumulatedContent} content
 	 * @param {Renderer} renderer
+	 * @returns {AccumulatedContent & { hashes: { script: string } }}
 	 */
 	static #close_render(content, renderer) {
 		for (const cleanup of renderer.#collect_on_destroy()) {
@@ -638,14 +645,17 @@ export class Renderer {
 
 		return {
 			head,
-			body
+			body,
+			hashes: {
+				script: renderer.global.csp.script_hashes.map((hash) => `'${hash}'`).join(' ')
+			}
 		};
 	}
 
 	/**
 	 * @param {HydratableContext} ctx
 	 */
-	static async #hydratable_block(ctx) {
+	async #hydratable_block(ctx) {
 		if (ctx.lookup.size === 0) {
 			return null;
 		}
@@ -665,27 +675,37 @@ export class Renderer {
 		let prelude = `const h = (window.__svelte ??= {}).h ??= new Map();`;
 
 		if (has_promises) {
-			prelude = `const r = (v) => Promise.resolve(v);
-				${prelude}`;
+			prelude = `const r = (v) => Promise.resolve(v);\n\t${prelude}`;
 		}
 
-		// TODO csp -- have discussed but not implemented
-		return `
-		<script>
-			{
-				${prelude}
+		const body = `
+{
+	${prelude}
 
-				for (const [k, v] of [
-					${entries.join(',\n\t\t\t\t\t')}
-				]) {
-					h.set(k, v);
-				}
-			}
-		</script>`;
+	for (const [k, v] of [
+		${entries.join(',\n')}
+	]) {
+		h.set(k, v);
+	}
+}
+`;
+
+		let csp_attr = '';
+		if (this.global.csp.nonce) {
+			csp_attr = ` nonce="${this.global.csp.nonce}"`;
+		} else if (this.global.csp.hash) {
+			const hash = await sha256(body);
+			this.global.csp.script_hashes.push(hash);
+		}
+
+		return `<script${csp_attr}>${body}</script>`;
 	}
 }
 
 export class SSRState {
+	/** @readonly @type {CspInternal & { script_hashes: string[] }} */
+	csp;
+
 	/** @readonly @type {'sync' | 'async'} */
 	mode;
 
@@ -701,9 +721,11 @@ export class SSRState {
 	/**
 	 * @param {'sync' | 'async'} mode
 	 * @param {string} [id_prefix]
+	 * @param {CspInternal} [csp]
 	 */
-	constructor(mode, id_prefix = '') {
+	constructor(mode, id_prefix = '', csp = { hash: false }) {
 		this.mode = mode;
+		this.csp = { ...csp, script_hashes: [] };
 
 		let uid = 1;
 		this.uid = () => `${id_prefix}s${uid++}`;

packages/svelte/src/internal/server/types.d.ts

@@ -15,6 +15,10 @@ export interface SSRContext {
 	element?: Element;
 }
 
+export type Csp = { nonce: string } | { hash: true };
+
+export type CspInternal = { nonce?: string; hash: boolean };
+
 export interface HydratableLookupEntry {
 	value: unknown;
 	serialized: string;
@@ -40,6 +44,9 @@ export interface SyncRenderOutput {
 	html: string;
 	/** HTML that goes somewhere into the `<body>` */
 	body: string;
+	hashes: {
+		script: string;
+	};
 }
 
 export type RenderOutput = SyncRenderOutput & PromiseLike<SyncRenderOutput>;

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

@@ -5,6 +5,23 @@ import { DEV } from 'esm-env';
 var bold = 'font-weight: bold';
 var normal = 'font-weight: normal';
 
+/**
+ * `csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.
+ * `nonce` will be used.
+ */
+export function invalid_csp() {
+	if (DEV) {
+		console.warn(
+			`%c[svelte] invalid_csp\n%c\`csp.nonce\` was set while \`csp.hash\` was \`true\`. These options cannot be used simultaneously.
+\`nonce\` will be used.\nhttps://svelte.dev/e/invalid_csp`,
+			bold,
+			normal
+		);
+	} else {
+		console.warn(`https://svelte.dev/e/invalid_csp`);
+	}
+}
+
 /**
  * A `hydratable` value with key `%key%` was created, but at least part of it was not used during the render.
  * 

packages/svelte/src/server/index.d.ts

@@ -1,4 +1,4 @@
-import type { RenderOutput } from '#server';
+import type { Csp, RenderOutput } from '#server';
 import type { ComponentProps, Component, SvelteComponent, ComponentType } from 'svelte';
 
 /**
@@ -16,6 +16,7 @@ export function render<
 					props?: Omit<Props, '$$slots' | '$$events'>;
 					context?: Map<any, any>;
 					idPrefix?: string;
+					csp?: Csp;
 				}
 			]
 		: [
@@ -24,6 +25,7 @@ export function render<
 					props: Omit<Props, '$$slots' | '$$events'>;
 					context?: Map<any, any>;
 					idPrefix?: string;
+					csp?: Csp;
 				}
 			]
 ): RenderOutput;

packages/svelte/tests/server-side-rendering/samples/csp-hash/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['async'],
+	csp: { hash: true },
+	script_hashes: "'TbJbBVc8UZ9yf9YRlCZCPBDitel+IaSg0BXUsnAx0cA='"
+});