@sveltejs/kit 3.0.0-next.2 → 3.0.0-next.20

package/src/runtime/server/page/actions.js

@@ -1,14 +1,15 @@
-/** @import { RequestEvent, ActionResult, Actions } from '@sveltejs/kit' */
-/** @import { SSROptions, SSRNode, ServerNode, ServerHooks } from 'types' */
-import * as devalue from 'devalue';
+/** @import { RequestEvent, Actions } from '@sveltejs/kit' */
+/** @import { ActionResult } from '$app/forms' */
+/** @import { SSROptions, SSRNode, ServerNode } from 'types' */
 import { DEV } from 'esm-env';
 import { json } from '@sveltejs/kit';
 import { HttpError, Redirect, ActionFailure, SvelteKitError } from '@sveltejs/kit/internal';
-import { with_request_store, merge_tracing } from '@sveltejs/kit/internal/server';
-import { get_status, normalize_error } from '../../../utils/error.js';
+import { with_request_store, merge_tracing, record_span } from '@sveltejs/kit/internal/server';
+import { normalize_error } from '../../../utils/error.js';
 import { is_form_content_type, negotiate } from '../../../utils/http.js';
-import { create_replacer, handle_error_and_jsonify } from '../utils.js';
-import { record_span } from '../../telemetry/record_span.js';
+import { with_version_header } from '../utils.js';
+import { handle_error_and_jsonify } from '../errors.js';
+import { stringify, uneval } from '#app/internal/transport';
 
 /** @param {RequestEvent} event */
 export function is_action_json_request(event) {
@@ -22,12 +23,13 @@ export function is_action_json_request(event) {
 
 /**
  * @param {RequestEvent} event
- * @param {import('types').RequestState} event_state
+ * @param {import('types').RequestState} state
  * @param {SSROptions} options
  * @param {SSRNode['server'] | undefined} server
  */
-export async function handle_action_json_request(event, event_state, options, server) {
+export async function handle_action_json_request(event, state, options, server) {
 	const actions = server?.actions;
+	const location = get_action_location(event.url);
 
 	if (!actions) {
 		const no_actions_error = new SvelteKitError(
@@ -36,13 +38,16 @@ export async function handle_action_json_request(event, event_state, options, se
 			`POST method not allowed. No form actions exist for ${DEV ? `the page at ${event.route.id}` : 'this page'}`
 		);
 
+		const error = await handle_error_and_jsonify(event, state, options, no_actions_error);
+
 		return action_json(
 			{
 				type: 'error',
-				error: await handle_error_and_jsonify(event, event_state, options, no_actions_error)
+				error,
+				location
 			},
 			{
-				status: no_actions_error.status,
+				status: error.status,
 				headers: {
 					// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405
 					// "The server must generate an Allow header field in a 405 status code response"
@@ -55,35 +60,40 @@ export async function handle_action_json_request(event, event_state, options, se
 	check_named_default_separate(actions);
 
 	try {
-		const data = await call_action(event, event_state, actions);
+		const data = await call_action(event, state, actions);
 
 		if (DEV) {
 			validate_action_return(data);
 		}
 
 		if (data instanceof ActionFailure) {
+			return action_json(
+				{
+					type: 'failure',
+					status: data.status,
+					location,
+					// @ts-expect-error we assign a string to what is supposed to be an object. That's ok
+					// because we don't use the object outside, and this way we have better code navigation
+					// through knowing where the related interface is used.
+					data: try_serialize(data.data, stringify, /** @type {string} */ (event.route.id))
+				},
+				{
+					status: data.status
+				}
+			);
+		} else if (data) {
 			return action_json({
-				type: 'failure',
-				status: data.status,
-				// @ts-expect-error we assign a string to what is supposed to be an object. That's ok
-				// because we don't use the object outside, and this way we have better code navigation
-				// through knowing where the related interface is used.
-				data: stringify_action_response(
-					data.data,
-					/** @type {string} */ (event.route.id),
-					options.hooks.transport
-				)
+				type: 'success',
+				status: 200,
+				location,
+				// @ts-expect-error see comment above
+				data: try_serialize(data, stringify, /** @type {string} */ (event.route.id))
 			});
 		} else {
 			return action_json({
 				type: 'success',
-				status: data ? 200 : 204,
-				// @ts-expect-error see comment above
-				data: stringify_action_response(
-					data,
-					/** @type {string} */ (event.route.id),
-					options.hooks.transport
-				)
+				status: 204,
+				location
 			});
 		}
 	} catch (e) {
@@ -93,23 +103,42 @@ export async function handle_action_json_request(event, event_state, options, se
 			return action_json_redirect(err);
 		}
 
+		const transformed = await handle_error_and_jsonify(
+			event,
+			state,
+			options,
+			check_incorrect_fail_use(err)
+		);
+
 		return action_json(
 			{
 				type: 'error',
-				error: await handle_error_and_jsonify(
-					event,
-					event_state,
-					options,
-					check_incorrect_fail_use(err)
-				)
+				error: transformed,
+				location
 			},
 			{
-				status: get_status(err)
+				status: transformed.status
 			}
 		);
 	}
 }
 
+/**
+ * @param {URL} url
+ */
+export function get_action_location(url) {
+	const location = new URL(url);
+
+	for (const key of location.searchParams.keys()) {
+		if (key.startsWith('/')) {
+			location.searchParams.delete(key);
+			break;
+		}
+	}
+
+	return location.pathname + location.search;
+}
+
 /**
  * @param {HttpError | Error} error
  */
@@ -135,7 +164,7 @@ export function action_json_redirect(redirect) {
  * @param {ResponseInit} [init]
  */
 function action_json(data, init) {
-	return json(data, init);
+	return with_version_header(json(data, init));
 }
 
 /**
@@ -147,12 +176,13 @@ export function is_action_request(event) {
 
 /**
  * @param {RequestEvent} event
- * @param {import('types').RequestState} event_state
+ * @param {import('types').RequestState} state
  * @param {SSRNode['server'] | undefined} server
  * @returns {Promise<ActionResult>}
  */
-export async function handle_action_request(event, event_state, server) {
+export async function handle_action_request(event, state, server) {
 	const actions = server?.actions;
+	const location = get_action_location(event.url);
 
 	if (!actions) {
 		// TODO should this be a different error altogether?
@@ -163,6 +193,8 @@ export async function handle_action_request(event, event_state, server) {
 		});
 		return {
 			type: 'error',
+			location,
+			// We're lying a bit with the types here; this will be transformed into a proper App.Error object later
 			error: new SvelteKitError(
 				405,
 				'Method Not Allowed',
@@ -174,7 +206,7 @@ export async function handle_action_request(event, event_state, server) {
 	check_named_default_separate(actions);
 
 	try {
-		const data = await call_action(event, event_state, actions);
+		const data = await call_action(event, state, actions);
 
 		if (DEV) {
 			validate_action_return(data);
@@ -184,12 +216,14 @@ export async function handle_action_request(event, event_state, server) {
 			return {
 				type: 'failure',
 				status: data.status,
+				location,
 				data: data.data
 			};
 		} else {
 			return {
 				type: 'success',
 				status: 200,
+				location,
 				// @ts-expect-error this will be removed upon serialization, so `undefined` is the same as omission
 				data
 			};
@@ -207,6 +241,8 @@ export async function handle_action_request(event, event_state, server) {
 
 		return {
 			type: 'error',
+			location,
+			// @ts-expect-error We're lying a bit with the types here; this will be transformed into a proper App.Error object later
 			error: check_incorrect_fail_use(err)
 		};
 	}
@@ -225,11 +261,11 @@ function check_named_default_separate(actions) {
 
 /**
  * @param {RequestEvent} event
- * @param {import('types').RequestState} event_state
+ * @param {import('types').RequestState} state
  * @param {NonNullable<ServerNode['actions']>} actions
  * @throws {Redirect | HttpError | SvelteKitError | Error}
  */
-async function call_action(event, event_state, actions) {
+async function call_action(event, state, actions) {
 	const url = new URL(event.request.url);
 
 	let name = 'default';
@@ -243,11 +279,12 @@ async function call_action(event, event_state, actions) {
 		}
 	}
 
-	const action = actions[name];
-	if (!action) {
+	if (!Object.hasOwn(actions, name)) {
 		throw new SvelteKitError(404, 'Not Found', `No action with name '${name}' found`);
 	}
 
+	const action = actions[name];
+
 	if (!is_form_content_type(event.request)) {
 		throw new SvelteKitError(
 			415,
@@ -267,7 +304,7 @@ async function call_action(event, event_state, actions) {
 		fn: async (current) => {
 			const traced_event = merge_tracing(event, current);
 
-			const result = await with_request_store({ event: traced_event, state: event_state }, () =>
+			const result = await with_request_store({ event: traced_event, state }, () =>
 				action(traced_event)
 			);
 
@@ -298,26 +335,9 @@ function validate_action_return(data) {
  * Try to `devalue.uneval` the data object, and if it fails, return a proper Error with context
  * @param {any} data
  * @param {string} route_id
- * @param {ServerHooks['transport']} transport
  */
-export function uneval_action_response(data, route_id, transport) {
-	const replacer = create_replacer(transport);
-
-	return try_serialize(data, (value) => devalue.uneval(value, replacer), route_id);
-}
-
-/**
- * Try to `devalue.stringify` the data object, and if it fails, return a proper Error with context
- * @param {any} data
- * @param {string} route_id
- * @param {ServerHooks['transport']} transport
- */
-function stringify_action_response(data, route_id, transport) {
-	const encoders = Object.fromEntries(
-		Object.entries(transport).map(([key, value]) => [key, value.encode])
-	);
-
-	return try_serialize(data, (value) => devalue.stringify(value, encoders), route_id);
+export function uneval_action_response(data, route_id) {
+	return try_serialize(data, uneval, route_id);
 }
 
 /**

package/src/runtime/server/page/crypto.js

@@ -1,4 +1,4 @@
-import { text_encoder } from '../../utils.js';
+import { base64_encode, text_encoder } from '../../utils.js';
 
 /**
  * SHA-256 hashing function adapted from https://bitwiseshiftleft.github.io/sjcl
@@ -102,7 +102,7 @@ export function sha256(data) {
 	const bytes = new Uint8Array(out.buffer);
 	reverse_endianness(bytes);
 
-	return btoa(String.fromCharCode(...bytes));
+	return base64_encode(bytes);
 }
 
 /** The SHA-256 initialization vector */

package/src/runtime/server/page/csp.js

@@ -1,11 +1,12 @@
 import { escape_html } from '../../../utils/escape.js';
+import { base64_encode } from '../../utils.js';
 import { sha256 } from './crypto.js';
 
 const array = new Uint8Array(16);
 
 function generate_nonce() {
 	crypto.getRandomValues(array);
-	return btoa(String.fromCharCode(...array));
+	return base64_encode(array);
 }
 
 const quoted = new Set([
@@ -53,19 +54,19 @@ class BaseProvider {
 	#directives;
 
 	/** @type {Set<import('types').Csp.Source>} */
-	#script_src;
+	#script_src = new Set();
 
 	/** @type {Set<import('types').Csp.Source>} */
-	#script_src_elem;
+	#script_src_elem = new Set();
 
 	/** @type {Set<import('types').Csp.Source>} */
-	#style_src;
+	#style_src = new Set();
 
 	/** @type {Set<import('types').Csp.Source>} */
-	#style_src_attr;
+	#style_src_attr = new Set();
 
 	/** @type {Set<import('types').Csp.Source>} */
-	#style_src_elem;
+	#style_src_elem = new Set();
 
 	/** @type {boolean} */
 	script_needs_nonce;
@@ -90,12 +91,6 @@ class BaseProvider {
 
 		const d = this.#directives;
 
-		this.#script_src = new Set();
-		this.#script_src_elem = new Set();
-		this.#style_src = new Set();
-		this.#style_src_attr = new Set();
-		this.#style_src_elem = new Set();
-
 		const effective_script_src = d['script-src'] || d['default-src'];
 		const script_src_elem = d['script-src-elem'];
 		const effective_style_src = d['style-src'] || d['default-src'];
@@ -117,32 +112,25 @@ class BaseProvider {
 
 			// ...and add unsafe-inline so we can inject <style> elements
 			// Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list, so we remove those during dev when injecting unsafe-inline
-			if (effective_style_src && !effective_style_src.includes('unsafe-inline')) {
-				d['style-src'] = [
-					...effective_style_src.filter(
-						(value) => !(value.startsWith('sha256-') || value.startsWith('nonce-'))
-					),
-					'unsafe-inline'
-				];
-			}
-
-			if (style_src_attr && !style_src_attr.includes('unsafe-inline')) {
-				d['style-src-attr'] = [
-					...style_src_attr.filter(
-						(value) => !(value.startsWith('sha256-') || value.startsWith('nonce-'))
-					),
-					'unsafe-inline'
-				];
-			}
-
-			if (style_src_elem && !style_src_elem.includes('unsafe-inline')) {
-				d['style-src-elem'] = [
-					...style_src_elem.filter(
-						(value) => !(value.startsWith('sha256-') || value.startsWith('nonce-'))
-					),
-					'unsafe-inline'
-				];
-			}
+			/**
+			 * @template {'style-src' | 'style-src-attr' | 'style-src-elem'} K
+			 * @param {K} key
+			 * @param {import('types').CspDirectives[K]} directive
+			 */
+			const add_unsafe_inline = (key, directive) => {
+				if (directive && !directive.includes('unsafe-inline')) {
+					d[key] = /** @type {import('types').CspDirectives[K]} */ ([
+						...directive.filter(
+							(value) => !(value.startsWith('sha256-') || value.startsWith('nonce-'))
+						),
+						'unsafe-inline'
+					]);
+				}
+			};
+
+			add_unsafe_inline('style-src', effective_style_src);
+			add_unsafe_inline('style-src-attr', style_src_attr);
+			add_unsafe_inline('style-src-elem', style_src_elem);
 		}
 
 		/** @param {(import('types').Csp.Source | import('types').Csp.ActionSource)[] | undefined} directive */
@@ -175,13 +163,16 @@ class BaseProvider {
 		this.#nonce = nonce;
 	}
 
-	/** @param {string} content */
-	add_script(content) {
-		if (!this.#script_needs_csp) return;
-
-		/** @type {`nonce-${string}` | `sha256-${string}`} */
-		const source = this.#use_hashes ? `sha256-${sha256(content)}` : `nonce-${this.#nonce}`;
+	/**
+	 * @param {string} content
+	 * @returns {`nonce-${string}` | `sha256-${string}`}
+	 */
+	#get_source(content) {
+		return this.#use_hashes ? `sha256-${sha256(content)}` : `nonce-${this.#nonce}`;
+	}
 
+	/** @param {`nonce-${string}` | `sha256-${string}`} source */
+	#add_script_source(source) {
 		if (this.#script_src_needs_csp) {
 			this.#script_src.add(source);
 		}
@@ -191,15 +182,17 @@ class BaseProvider {
 		}
 	}
 
+	/** @param {string} content */
+	add_script(content) {
+		if (!this.#script_needs_csp) return;
+
+		this.#add_script_source(this.#get_source(content));
+	}
+
 	/** @param {`sha256-${string}`[]} hashes */
 	add_script_hashes(hashes) {
 		for (const hash of hashes) {
-			if (this.#script_src_needs_csp) {
-				this.#script_src.add(hash);
-			}
-			if (this.#script_src_elem_needs_csp) {
-				this.#script_src_elem.add(hash);
-			}
+			this.#add_script_source(hash);
 		}
 	}
 
@@ -207,8 +200,7 @@ class BaseProvider {
 	add_style(content) {
 		if (!this.#style_needs_csp) return;
 
-		/** @type {`nonce-${string}` | `sha256-${string}`} */
-		const source = this.#use_hashes ? `sha256-${sha256(content)}` : `nonce-${this.#nonce}`;
+		const source = this.#get_source(content);
 
 		if (this.#style_src_needs_csp) {
 			this.#style_src.add(source);
@@ -251,40 +243,34 @@ class BaseProvider {
 
 		const directives = { ...this.#directives };
 
-		if (this.#style_src.size > 0) {
-			directives['style-src'] = [
-				...(directives['style-src'] || directives['default-src'] || []),
-				...this.#style_src
-			];
-		}
-
-		if (this.#style_src_attr.size > 0) {
-			directives['style-src-attr'] = [
-				...(directives['style-src-attr'] || []),
-				...this.#style_src_attr
-			];
-		}
-
-		if (this.#style_src_elem.size > 0) {
-			directives['style-src-elem'] = [
-				...(directives['style-src-elem'] || []),
-				...this.#style_src_elem
-			];
-		}
-
-		if (this.#script_src.size > 0) {
-			directives['script-src'] = [
-				...(directives['script-src'] || directives['default-src'] || []),
-				...this.#script_src
-			];
-		}
-
-		if (this.#script_src_elem.size > 0) {
-			directives['script-src-elem'] = [
-				...(directives['script-src-elem'] || []),
-				...this.#script_src_elem
-			];
-		}
+		/**
+		 * @template {'style-src' | 'style-src-attr' | 'style-src-elem' | 'script-src' | 'script-src-elem'} K
+		 * @param {K} key
+		 * @param {Set<import('types').Csp.Source>} sources
+		 * @param {import('types').CspDirectives[K]} [base]
+		 */
+		const merge_sources = (key, sources, base) => {
+			if (sources.size > 0) {
+				directives[key] = /** @type {import('types').CspDirectives[K]} */ ([
+					...(base || []),
+					...sources
+				]);
+			}
+		};
+
+		merge_sources(
+			'style-src',
+			this.#style_src,
+			directives['style-src'] || directives['default-src']
+		);
+		merge_sources('style-src-attr', this.#style_src_attr, directives['style-src-attr']);
+		merge_sources('style-src-elem', this.#style_src_elem, directives['style-src-elem']);
+		merge_sources(
+			'script-src',
+			this.#script_src,
+			directives['script-src'] || directives['default-src']
+		);
+		merge_sources('script-src-elem', this.#script_src_elem, directives['script-src-elem']);
 
 		for (const key in directives) {
 			if (is_meta && (key === 'frame-ancestors' || key === 'report-uri' || key === 'sandbox')) {
@@ -300,13 +286,11 @@ class BaseProvider {
 
 			const directive = [key];
 			if (Array.isArray(value)) {
-				value.forEach((value) => {
-					if (quoted.has(value) || crypto_pattern.test(value)) {
-						directive.push(`'${value}'`);
-					} else {
-						directive.push(value);
-					}
-				});
+				for (const source of value) {
+					directive.push(
+						quoted.has(source) || crypto_pattern.test(source) ? `'${source}'` : source
+					);
+				}
 			}
 
 			header.push(directive.join(' '));
@@ -337,17 +321,17 @@ class CspReportOnlyProvider extends BaseProvider {
 	constructor(use_hashes, directives, nonce) {
 		super(use_hashes, directives, nonce);
 
-		if (Object.values(directives).filter((v) => !!v).length > 0) {
-			// If we're generating content-security-policy-report-only,
-			// if there are any directives, we need a report-uri or report-to (or both)
-			// else it's just an expensive noop.
-			const has_report_to = directives['report-to']?.length ?? 0 > 0;
-			const has_report_uri = directives['report-uri']?.length ?? 0 > 0;
-			if (!has_report_to && !has_report_uri) {
-				throw Error(
-					'`content-security-policy-report-only` must be specified with either the `report-to` or `report-uri` directives, or both'
-				);
-			}
+		// If we're generating content-security-policy-report-only,
+		// if there are any directives, we need a report-uri or report-to (or both)
+		// else it's just an expensive noop.
+		if (
+			Object.values(directives).some((v) => !!v) &&
+			!directives['report-to']?.length &&
+			!directives['report-uri']?.length
+		) {
+			throw Error(
+				'`content-security-policy-report-only` must be specified with either the `report-to` or `report-uri` directives, or both'
+			);
 		}
 	}
 }