@sveltejs/kit 1.0.0-next.41 → 1.0.0-next.410

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,265 @@
+import * as cookie from 'cookie';
+import * as set_cookie_parser from 'set-cookie-parser';
+import { respond } from '../index.js';
+import { is_root_relative, resolve } from '../../../utils/url.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').SSRPage | import('types').SSRErrorPage;
+ * }} opts
+ */
+export function create_fetch({ event, options, state, route }) {
+	/** @type {import('./types').Fetched[]} */
+	const fetched = [];
+
+	const initial_cookies = cookie.parse(event.request.headers.get('cookie') || '');
+
+	/** @type {import('set-cookie-parser').Cookie[]} */
+	const cookies = [];
+
+	/** @type {typeof fetch} */
+	const fetcher = async (resource, opts = {}) => {
+		/** @type {string} */
+		let requested;
+
+		if (typeof resource === 'string' || resource instanceof URL) {
+			requested = resource.toString();
+		} else {
+			requested = resource.url;
+
+			opts = {
+				method: resource.method,
+				headers: resource.headers,
+				body: resource.body,
+				mode: resource.mode,
+				credentials: resource.credentials,
+				cache: resource.cache,
+				redirect: resource.redirect,
+				referrer: resource.referrer,
+				integrity: resource.integrity,
+				...opts
+			};
+		}
+
+		opts.headers = new Headers(opts.headers);
+
+		// merge headers from request
+		for (const [key, value] of event.request.headers) {
+			if (
+				key !== 'authorization' &&
+				key !== 'connection' &&
+				key !== 'cookie' &&
+				key !== 'host' &&
+				key !== 'if-none-match' &&
+				!opts.headers.has(key)
+			) {
+				opts.headers.set(key, value);
+			}
+		}
+
+		const resolved = resolve(event.url.pathname, requested.split('?')[0]);
+
+		/** @type {Response} */
+		let response;
+
+		/** @type {import('types').PrerenderDependency} */
+		let dependency;
+
+		// 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 filename = decodeURIComponent(
+			resolved.startsWith(prefix) ? resolved.slice(prefix.length) : resolved
+		).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';
+
+				response = new Response(options.read(file), {
+					headers: type ? { 'content-type': type } : {}
+				});
+			} else {
+				response = await fetch(`${event.url.origin}/${file}`, /** @type {RequestInit} */ (opts));
+			}
+		} else if (is_root_relative(resolved)) {
+			if (opts.credentials !== 'omit') {
+				const authorization = event.request.headers.get('authorization');
+
+				// combine cookies from the initiating request with any that were
+				// added via set-cookie
+				const combined_cookies = { ...initial_cookies };
+
+				for (const cookie of cookies) {
+					if (!domain_matches(event.url.hostname, cookie.domain)) continue;
+					if (!path_matches(resolved, cookie.path)) continue;
+
+					combined_cookies[cookie.name] = cookie.value;
+				}
+
+				const cookie = Object.entries(combined_cookies)
+					.map(([name, value]) => `${name}=${value}`)
+					.join('; ');
+
+				if (cookie) {
+					opts.headers.set('cookie', cookie);
+				}
+
+				if (authorization && !opts.headers.has('authorization')) {
+					opts.headers.set('authorization', authorization);
+				}
+			}
+
+			if (opts.body && typeof opts.body !== 'string') {
+				// 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(
+				new Request(new URL(requested, event.url).href, { ...opts }),
+				options,
+				{
+					...state,
+					initiator: route
+				}
+			);
+
+			if (state.prerendering) {
+				dependency = { response, body: null };
+				state.prerendering.dependencies.set(resolved, dependency);
+			}
+		} else {
+			// external
+			if (resolved.startsWith('//')) {
+				requested = event.url.protocol + requested;
+			}
+
+			// external fetch
+			// 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 (
+				`.${new URL(requested).hostname}`.endsWith(`.${event.url.hostname}`) &&
+				opts.credentials !== 'omit'
+			) {
+				const cookie = event.request.headers.get('cookie');
+				if (cookie) opts.headers.set('cookie', cookie);
+			}
+
+			// we need to delete the connection header, as explained here:
+			// https://github.com/nodejs/undici/issues/1470#issuecomment-1140798467
+			// TODO this may be a case for being selective about which headers we let through
+			opts.headers.delete('connection');
+
+			const external_request = new Request(requested, /** @type {RequestInit} */ (opts));
+			response = await options.hooks.externalFetch.call(null, external_request);
+		}
+
+		const set_cookie = response.headers.get('set-cookie');
+		if (set_cookie) {
+			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();
+
+					/** @type {import('types').ResponseHeaders} */
+					const headers = {};
+					for (const [key, value] of response.headers) {
+						// TODO skip others besides set-cookie and etag?
+						if (key !== 'set-cookie' && key !== 'etag') {
+							headers[key] = value;
+						}
+					}
+
+					if (!opts.body || typeof opts.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: requested,
+							body: opts.body,
+							response: {
+								status: status_number,
+								statusText: response.statusText,
+								headers,
+								body
+							}
+						});
+					}
+
+					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 };
+}