@sveltejs/kit 1.0.0-next.48 → 1.0.0-next.480

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

@@ -0,0 +1,249 @@
+import { escape_html_attr } from '../../../utils/escape.js';
+import { sha256, base64 } from './crypto.js';
+
+const array = new Uint8Array(16);
+
+function generate_nonce() {
+	crypto.getRandomValues(array);
+	return base64(array);
+}
+
+const quoted = new Set([
+	'self',
+	'unsafe-eval',
+	'unsafe-hashes',
+	'unsafe-inline',
+	'none',
+	'strict-dynamic',
+	'report-sample'
+]);
+
+const crypto_pattern = /^(nonce|sha\d\d\d)-/;
+
+// CSP and CSP Report Only are extremely similar with a few caveats
+// the easiest/DRYest way to express this is with some private encapsulation
+class BaseProvider {
+	/** @type {boolean} */
+	#use_hashes;
+
+	/** @type {boolean} */
+	#script_needs_csp;
+
+	/** @type {boolean} */
+	#style_needs_csp;
+
+	/** @type {import('types').CspDirectives} */
+	#directives;
+
+	/** @type {import('types').Csp.Source[]} */
+	#script_src;
+
+	/** @type {import('types').Csp.Source[]} */
+	#style_src;
+
+	/** @type {string} */
+	#nonce;
+
+	/**
+	 * @param {boolean} use_hashes
+	 * @param {import('types').CspDirectives} directives
+	 * @param {string} nonce
+	 * @param {boolean} dev
+	 */
+	constructor(use_hashes, directives, nonce, dev) {
+		this.#use_hashes = use_hashes;
+		this.#directives = dev ? { ...directives } : directives; // clone in dev so we can safely mutate
+
+		const d = this.#directives;
+
+		if (dev) {
+			// remove strict-dynamic in dev...
+			// TODO reinstate this if we can figure out how to make strict-dynamic work
+			// if (d['default-src']) {
+			// 	d['default-src'] = d['default-src'].filter((name) => name !== 'strict-dynamic');
+			// 	if (d['default-src'].length === 0) delete d['default-src'];
+			// }
+
+			// if (d['script-src']) {
+			// 	d['script-src'] = d['script-src'].filter((name) => name !== 'strict-dynamic');
+			// 	if (d['script-src'].length === 0) delete d['script-src'];
+			// }
+
+			const effective_style_src = d['style-src'] || d['default-src'];
+
+			// ...and add unsafe-inline so we can inject <style> elements
+			if (effective_style_src && !effective_style_src.includes('unsafe-inline')) {
+				d['style-src'] = [...effective_style_src, 'unsafe-inline'];
+			}
+		}
+
+		this.#script_src = [];
+		this.#style_src = [];
+
+		const effective_script_src = d['script-src'] || d['default-src'];
+		const effective_style_src = d['style-src'] || d['default-src'];
+
+		this.#script_needs_csp =
+			!!effective_script_src &&
+			effective_script_src.filter((value) => value !== 'unsafe-inline').length > 0;
+
+		this.#style_needs_csp =
+			!dev &&
+			!!effective_style_src &&
+			effective_style_src.filter((value) => value !== 'unsafe-inline').length > 0;
+
+		this.script_needs_nonce = this.#script_needs_csp && !this.#use_hashes;
+		this.style_needs_nonce = this.#style_needs_csp && !this.#use_hashes;
+		this.#nonce = nonce;
+	}
+
+	/** @param {string} content */
+	add_script(content) {
+		if (this.#script_needs_csp) {
+			if (this.#use_hashes) {
+				this.#script_src.push(`sha256-${sha256(content)}`);
+			} else if (this.#script_src.length === 0) {
+				this.#script_src.push(`nonce-${this.#nonce}`);
+			}
+		}
+	}
+
+	/** @param {string} content */
+	add_style(content) {
+		if (this.#style_needs_csp) {
+			if (this.#use_hashes) {
+				this.#style_src.push(`sha256-${sha256(content)}`);
+			} else if (this.#style_src.length === 0) {
+				this.#style_src.push(`nonce-${this.#nonce}`);
+			}
+		}
+	}
+
+	/**
+	 * @param {boolean} [is_meta]
+	 */
+	get_header(is_meta = false) {
+		const header = [];
+
+		// due to browser inconsistencies, we can't append sources to default-src
+		// (specifically, Firefox appears to not ignore nonce-{nonce} directives
+		// on default-src), so we ensure that script-src and style-src exist
+
+		const directives = { ...this.#directives };
+
+		if (this.#style_src.length > 0) {
+			directives['style-src'] = [
+				...(directives['style-src'] || directives['default-src'] || []),
+				...this.#style_src
+			];
+		}
+
+		if (this.#script_src.length > 0) {
+			directives['script-src'] = [
+				...(directives['script-src'] || directives['default-src'] || []),
+				...this.#script_src
+			];
+		}
+
+		for (const key in directives) {
+			if (is_meta && (key === 'frame-ancestors' || key === 'report-uri' || key === 'sandbox')) {
+				// these values cannot be used with a <meta> tag
+				// TODO warn?
+				continue;
+			}
+
+			// @ts-expect-error gimme a break typescript, `key` is obviously a member of internal_directives
+			const value = /** @type {string[] | true} */ (directives[key]);
+
+			if (!value) continue;
+
+			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);
+					}
+				});
+			}
+
+			header.push(directive.join(' '));
+		}
+
+		return header.join('; ');
+	}
+}
+
+class CspProvider extends BaseProvider {
+	get_meta() {
+		const content = escape_html_attr(this.get_header(true));
+		return `<meta http-equiv="content-security-policy" content=${content}>`;
+	}
+}
+
+class CspReportOnlyProvider extends BaseProvider {
+	/**
+	 * @param {boolean} use_hashes
+	 * @param {import('types').CspDirectives} directives
+	 * @param {string} nonce
+	 * @param {boolean} dev
+	 */
+	constructor(use_hashes, directives, nonce, dev) {
+		super(use_hashes, directives, nonce, dev);
+
+		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'
+				);
+			}
+		}
+	}
+}
+
+export class Csp {
+	/** @readonly */
+	nonce = generate_nonce();
+
+	/** @type {CspProvider} */
+	csp_provider;
+
+	/** @type {CspReportOnlyProvider} */
+	report_only_provider;
+
+	/**
+	 * @param {import('./types').CspConfig} config
+	 * @param {import('./types').CspOpts} opts
+	 */
+	constructor({ mode, directives, reportOnly }, { prerender, dev }) {
+		const use_hashes = mode === 'hash' || (mode === 'auto' && prerender);
+		this.csp_provider = new CspProvider(use_hashes, directives, this.nonce, dev);
+		this.report_only_provider = new CspReportOnlyProvider(use_hashes, reportOnly, this.nonce, dev);
+	}
+
+	get script_needs_nonce() {
+		return this.csp_provider.script_needs_nonce || this.report_only_provider.script_needs_nonce;
+	}
+
+	get style_needs_nonce() {
+		return this.csp_provider.style_needs_nonce || this.report_only_provider.style_needs_nonce;
+	}
+
+	/** @param {string} content */
+	add_script(content) {
+		this.csp_provider.add_script(content);
+		this.report_only_provider.add_script(content);
+	}
+
+	/** @param {string} content */
+	add_style(content) {
+		this.csp_provider.add_style(content);
+		this.report_only_provider.add_style(content);
+	}
+}

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

@@ -0,0 +1,286 @@
+import * as cookie from 'cookie';
+import * as set_cookie_parser from 'set-cookie-parser';
+import { respond } from '../index.js';
+import { domain_matches, path_matches } from '../cookie.js';
+
+/**
+ * @param {{
+ *   event: import('types').RequestEvent;
+ *   options: import('types').SSROptions;
+ *   state: import('types').SSRState;
+ *   route: import('types').SSRRoute | import('types').SSRErrorPage;
+ *   prerender_default?: import('types').PrerenderOption;
+ *   resolve_opts: import('types').RequiredResolveOptions;
+ * }} opts
+ */
+export function create_fetch({ event, options, state, route, prerender_default, resolve_opts }) {
+	/** @type {import('./types').Fetched[]} */
+	const fetched = [];
+
+	const initial_cookies = cookie.parse(event.request.headers.get('cookie') || '');
+
+	/** @type {import('set-cookie-parser').Cookie[]} */
+	const set_cookies = [];
+
+	/**
+	 * @param {URL} url
+	 * @param {string | null} header
+	 */
+	function get_cookie_header(url, header) {
+		/** @type {Record<string, string>} */
+		const new_cookies = {};
+
+		for (const cookie of set_cookies) {
+			if (!domain_matches(url.hostname, cookie.domain)) continue;
+			if (!path_matches(url.pathname, cookie.path)) continue;
+
+			new_cookies[cookie.name] = cookie.value;
+		}
+
+		// cookies from explicit `cookie` header take precedence over cookies previously set
+		// during this load with `set-cookie`, which take precedence over the cookies
+		// sent by the user agent
+		const combined_cookies = {
+			...initial_cookies,
+			...new_cookies,
+			...cookie.parse(header ?? '')
+		};
+
+		return Object.entries(combined_cookies)
+			.map(([name, value]) => `${name}=${value}`)
+			.join('; ');
+	}
+
+	/** @type {typeof fetch} */
+	const fetcher = async (info, init) => {
+		const request = normalize_fetch_input(info, init, event.url);
+
+		const request_body = init?.body;
+
+		/** @type {import('types').PrerenderDependency} */
+		let dependency;
+
+		const response = await options.hooks.handleFetch({
+			event,
+			request,
+			fetch: async (info, init) => {
+				const request = normalize_fetch_input(info, init, event.url);
+
+				const url = new URL(request.url);
+
+				if (url.origin !== event.url.origin) {
+					// allow cookie passthrough for "same-origin"
+					// if SvelteKit is serving my.domain.com:
+					// -        domain.com WILL NOT receive cookies
+					// -     my.domain.com WILL receive cookies
+					// -    api.domain.dom WILL NOT receive cookies
+					// - sub.my.domain.com WILL receive cookies
+					// ports do not affect the resolution
+					// leading dot prevents mydomain.com matching domain.com
+					if (
+						`.${url.hostname}`.endsWith(`.${event.url.hostname}`) &&
+						request.credentials !== 'omit'
+					) {
+						const cookie = get_cookie_header(url, request.headers.get('cookie'));
+						if (cookie) request.headers.set('cookie', cookie);
+					}
+
+					let response = await fetch(request);
+
+					if (request.mode === 'no-cors') {
+						response = new Response('', {
+							status: response.status,
+							statusText: response.statusText,
+							headers: response.headers
+						});
+					} else {
+						if (url.origin !== event.url.origin) {
+							const acao = response.headers.get('access-control-allow-origin');
+							if (!acao || (acao !== event.url.origin && acao !== '*')) {
+								throw new Error(
+									`CORS error: ${
+										acao ? 'Incorrect' : 'No'
+									} 'Access-Control-Allow-Origin' header is present on the requested resource`
+								);
+							}
+						}
+					}
+
+					return response;
+				}
+
+				/** @type {Response} */
+				let response;
+
+				// handle fetch requests for static assets. e.g. prebaked data, etc.
+				// we need to support everything the browser's fetch supports
+				const prefix = options.paths.assets || options.paths.base;
+				const decoded = decodeURIComponent(url.pathname);
+				const filename = (
+					decoded.startsWith(prefix) ? decoded.slice(prefix.length) : decoded
+				).slice(1);
+				const filename_html = `${filename}/index.html`; // path may also match path/index.html
+
+				const is_asset = options.manifest.assets.has(filename);
+				const is_asset_html = options.manifest.assets.has(filename_html);
+
+				if (is_asset || is_asset_html) {
+					const file = is_asset ? filename : filename_html;
+
+					if (options.read) {
+						const type = is_asset
+							? options.manifest.mimeTypes[filename.slice(filename.lastIndexOf('.'))]
+							: 'text/html';
+
+						return new Response(options.read(file), {
+							headers: type ? { 'content-type': type } : {}
+						});
+					}
+
+					return await fetch(request);
+				}
+
+				if (request.credentials !== 'omit') {
+					const cookie = get_cookie_header(url, request.headers.get('cookie'));
+					if (cookie) {
+						request.headers.set('cookie', cookie);
+					}
+
+					const authorization = event.request.headers.get('authorization');
+					if (authorization && !request.headers.has('authorization')) {
+						request.headers.set('authorization', authorization);
+					}
+				}
+
+				if (request_body && typeof request_body !== 'string') {
+					// TODO is this still necessary? we just bail out below
+					// per https://developer.mozilla.org/en-US/docs/Web/API/Request/Request, this can be a
+					// Blob, BufferSource, FormData, URLSearchParams, USVString, or ReadableStream object.
+					// non-string bodies are irksome to deal with, but luckily aren't particularly useful
+					// in this context anyway, so we take the easy route and ban them
+					throw new Error('Request body must be a string');
+				}
+
+				response = await respond(request, options, {
+					prerender_default,
+					...state,
+					initiator: route
+				});
+
+				if (state.prerendering) {
+					dependency = { response, body: null };
+					state.prerendering.dependencies.set(url.pathname, dependency);
+				}
+
+				return response;
+			}
+		});
+
+		const set_cookie = response.headers.get('set-cookie');
+		if (set_cookie) {
+			set_cookies.push(
+				...set_cookie_parser
+					.splitCookiesString(set_cookie)
+					.map((str) => set_cookie_parser.parseString(str))
+			);
+		}
+
+		const proxy = new Proxy(response, {
+			get(response, key, _receiver) {
+				async function text() {
+					const body = await response.text();
+
+					if (!body || typeof body === 'string') {
+						const status_number = Number(response.status);
+						if (isNaN(status_number)) {
+							throw new Error(
+								`response.status is not a number. value: "${
+									response.status
+								}" type: ${typeof response.status}`
+							);
+						}
+
+						fetched.push({
+							url: request.url.startsWith(event.url.origin)
+								? request.url.slice(event.url.origin.length)
+								: request.url,
+							method: request.method,
+							request_body: /** @type {string | undefined} */ (request_body),
+							response_body: body,
+							response: response
+						});
+
+						// ensure that excluded headers can't be read
+						const get = response.headers.get;
+						response.headers.get = (key) => {
+							const lower = key.toLowerCase();
+							const value = get.call(response.headers, lower);
+							if (value && !lower.startsWith('x-sveltekit-')) {
+								const included = resolve_opts.filterSerializedResponseHeaders(lower, value);
+								if (!included) {
+									throw new Error(
+										`Failed to get response header "${lower}" — it must be included by the \`filterSerializedResponseHeaders\` option: https://kit.svelte.dev/docs/hooks#handle`
+									);
+								}
+							}
+
+							return value;
+						};
+					}
+
+					if (dependency) {
+						dependency.body = body;
+					}
+
+					return body;
+				}
+
+				if (key === 'arrayBuffer') {
+					return async () => {
+						const buffer = await response.arrayBuffer();
+
+						if (dependency) {
+							dependency.body = new Uint8Array(buffer);
+						}
+
+						// TODO should buffer be inlined into the page (albeit base64'd)?
+						// any conditions in which it shouldn't be?
+
+						return buffer;
+					};
+				}
+
+				if (key === 'text') {
+					return text;
+				}
+
+				if (key === 'json') {
+					return async () => {
+						return JSON.parse(await text());
+					};
+				}
+
+				// TODO arrayBuffer?
+
+				return Reflect.get(response, key, response);
+			}
+		});
+
+		return proxy;
+	};
+
+	return { fetcher, fetched, cookies: set_cookies };
+}
+
+/**
+ * @param {RequestInfo | URL} info
+ * @param {RequestInit | undefined} init
+ * @param {URL} url
+ */
+function normalize_fetch_input(info, init, url) {
+	if (info instanceof Request) {
+		return info;
+	}
+
+	return new Request(typeof info === 'string' ? new URL(info, url) : info, init);
+}