Add filterSerializedResponseHeaders function

.changeset/silent-cycles-reply.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] exclude headers from serialized responses by default, add filterSerializedResponseHeaders resolve option

documentation/docs/05-load.md

@@ -143,7 +143,7 @@ export async function load({ depends }) {
 - it can be used to make credentialed requests on the server, as it inherits the `cookie` and `authorization` headers for the page request
 - it can make relative requests on the server (ordinarily, `fetch` requires a URL with an origin when used in a server context)
 - internal requests (e.g. for `+server.js` routes) go direct to the handler function when running on the server, without the overhead of an HTTP call
-- during server-side rendering, the response will be captured and inlined into the rendered HTML
+- during server-side rendering, the response will be captured and inlined into the rendered HTML. Note that headers will _not_ be serialized, unless explicitly included via [`filterSerializedResponseHeaders`](/docs/hooks#handle)
 - during hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request
 
 > Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it.

documentation/docs/06-hooks.md

@@ -64,13 +64,15 @@ You can add call multiple `handle` functions with [the `sequence` helper functio
 `resolve` also supports a second, optional parameter that gives you more control over how the response will be rendered. That parameter is an object that can have the following fields:
 
 - `transformPageChunk(opts: { html: string, done: boolean }): MaybePromise<string | undefined>` — applies custom transforms to HTML. If `done` is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML (they could include an element's opening tag but not its closing tag, for example) but they will always be split at sensible boundaries such as `%sveltekit.head%` or layout/page components.
+- `filterSerializedResponseHeaders(name: string, value: string): boolean` — determines which headers should be included in serialized responses when a `load` function loads a resource with `fetch`. By default, none will be included
 
 ```js
 /// file: src/hooks.js
 /** @type {import('@sveltejs/kit').Handle} */
 export async function handle({ event, resolve }) {
 	const response = await resolve(event, {
-		transformPageChunk: ({ html }) => html.replace('old', 'new')
+		transformPageChunk: ({ html }) => html.replace('old', 'new'),
+		filterSerializedResponseHeaders: (name) => name.startsWith('x-')
 	});
 
 	return response;

packages/kit/src/runtime/server/index.js

@@ -14,6 +14,8 @@ import { DATA_SUFFIX } from '../../constants.js';
 /** @param {{ html: string }} opts */
 const default_transform = ({ html }) => html;
 
+const default_filter = () => false;
+
 /** @type {import('types').Respond} */
 export async function respond(request, options, state) {
 	let url = new URL(request.url);
@@ -201,7 +203,8 @@ export async function respond(request, options, state) {
 
 	/** @type {import('types').RequiredResolveOptions} */
 	let resolve_opts = {
-		transformPageChunk: default_transform
+		transformPageChunk: default_transform,
+		filterSerializedResponseHeaders: default_filter
 	};
 
 	/**
@@ -226,7 +229,8 @@ export async function respond(request, options, state) {
 				}
 
 				resolve_opts = {
-					transformPageChunk: opts.transformPageChunk || default_transform
+					transformPageChunk: opts.transformPageChunk || default_transform,
+					filterSerializedResponseHeaders: opts.filterSerializedResponseHeaders || default_filter
 				};
 			}
 

packages/kit/src/runtime/server/page/fetch.js

@@ -214,13 +214,9 @@ export function create_fetch({ event, options, state, route, prerender_default }
 								? request.url.slice(event.url.origin.length)
 								: request.url,
 							method: request.method,
-							body: /** @type {string | undefined} */ (request_body),
-							response: {
-								status: status_number,
-								statusText: response.statusText,
-								headers,
-								body
-							}
+							request_body: /** @type {string | undefined} */ (request_body),
+							response_body: body,
+							response: response
 						});
 					}
 

packages/kit/src/runtime/server/page/render.js

@@ -284,7 +284,11 @@ export async function render_response({
 	}
 
 	if (page_config.ssr && page_config.csr) {
-		body += `\n\t${fetched.map((item) => serialize_data(item, !!state.prerendering)).join('\n\t')}`;
+		body += `\n\t${fetched
+			.map((item) =>
+				serialize_data(item, resolve_opts.filterSerializedResponseHeaders, !!state.prerendering)
+			)
+			.join('\n\t')}`;
 	}
 
 	if (options.service_worker) {

packages/kit/src/runtime/server/page/serialize_data.js

@@ -35,32 +35,47 @@ const pattern = new RegExp(`[${Object.keys(replacements).join('')}]`, 'g');
  * and that the resulting string isn't further modified.
  *
  * @param {import('./types.js').Fetched} fetched
+ * @param {(name: string, value: string) => boolean} filter
  * @param {boolean} [prerendering]
  * @returns {string} The raw HTML of a script element carrying the JSON payload.
  * @example const html = serialize_data('/data.json', null, { foo: 'bar' });
  */
-export function serialize_data(fetched, prerendering = false) {
-	const safe_payload = JSON.stringify(fetched.response).replace(
-		pattern,
-		(match) => replacements[match]
-	);
+export function serialize_data(fetched, filter, prerendering = false) {
+	/** @type {Record<string, string>} */
+	const headers = {};
+
+	for (const [key, value] of fetched.response.headers) {
+		const lower = key.toLowerCase();
+		if (filter(lower, value)) {
+			headers[lower] = value;
+		}
+	}
+
+	const payload = {
+		status: fetched.response.status,
+		statusText: fetched.response.statusText,
+		headers,
+		body: fetched.response_body
+	};
+
+	const safe_payload = JSON.stringify(payload).replace(pattern, (match) => replacements[match]);
 
 	const attrs = [
 		'type="application/json"',
 		'data-sveltekit-fetched',
 		`data-url=${escape_html_attr(fetched.url)}`
 	];
 
-	if (fetched.body) {
-		attrs.push(`data-hash=${escape_html_attr(hash(fetched.body))}`);
+	if (fetched.request_body) {
+		attrs.push(`data-hash=${escape_html_attr(hash(fetched.request_body))}`);
 	}
 
 	if (!prerendering && fetched.method === 'GET') {
-		const cache_control = /** @type {string} */ (fetched.response.headers['cache-control']);
+		const cache_control = fetched.response.headers.get('cache-control');
 		if (cache_control) {
 			const match = /s-maxage=(\d+)/g.exec(cache_control) ?? /max-age=(\d+)/g.exec(cache_control);
 			if (match) {
-				const age = /** @type {string} */ (fetched.response.headers['age']) ?? '0';
+				const age = fetched.response.headers.get('age') ?? '0';
 
 				const ttl = +match[1] - +age;
 				attrs.push(`data-ttl="${ttl}"`);

packages/kit/src/runtime/server/page/serialize_data.spec.js

@@ -3,59 +3,61 @@ import * as assert from 'uvu/assert';
 import { serialize_data } from './serialize_data.js';
 
 test('escapes slashes', () => {
+	const response_body = '</script><script>alert("xss")';
+
 	assert.equal(
-		serialize_data({
-			url: 'foo',
-			method: 'GET',
-			body: null,
-			response: {
-				status: 200,
-				statusText: 'OK',
-				headers: {},
-				body: '</script><script>alert("xss")'
-			}
-		}),
+		serialize_data(
+			{
+				url: 'foo',
+				method: 'GET',
+				request_body: null,
+				response_body,
+				response: new Response(response_body)
+			},
+			() => false
+		),
 		'<script type="application/json" data-sveltekit-fetched data-url="foo">' +
-			'{"status":200,"statusText":"OK","headers":{},"body":"\\u003C/script>\\u003Cscript>alert(\\"xss\\")"}' +
+			'{"status":200,"statusText":"","headers":{},"body":"\\u003C/script>\\u003Cscript>alert(\\"xss\\")"}' +
 			'</script>'
 	);
 });
 
 test('escapes exclamation marks', () => {
+	const response_body = '<!--</script>...-->alert("xss")';
+
 	assert.equal(
-		serialize_data({
-			url: 'foo',
-			method: 'GET',
-			body: null,
-			response: {
-				status: 200,
-				statusText: 'OK',
-				headers: {},
-				body: '<!--</script>...-->alert("xss")'
-			}
-		}),
+		serialize_data(
+			{
+				url: 'foo',
+				method: 'GET',
+				request_body: null,
+				response_body,
+				response: new Response(response_body)
+			},
+			() => false
+		),
 		'<script type="application/json" data-sveltekit-fetched data-url="foo">' +
-			'{"status":200,"statusText":"OK","headers":{},"body":"\\u003C!--\\u003C/script>...-->alert(\\"xss\\")"}' +
+			'{"status":200,"statusText":"","headers":{},"body":"\\u003C!--\\u003C/script>...-->alert(\\"xss\\")"}' +
 			'</script>'
 	);
 });
 
 test('escapes the attribute values', () => {
 	const raw = 'an "attr" & a \ud800';
 	const escaped = 'an &quot;attr&quot; &amp; a &#55296;';
+	const response_body = '';
 	assert.equal(
-		serialize_data({
-			url: raw,
-			method: 'GET',
-			body: null,
-			response: {
-				status: 200,
-				statusText: 'OK',
-				headers: {},
-				body: ''
-			}
-		}),
-		`<script type="application/json" data-sveltekit-fetched data-url="${escaped}">{"status":200,"statusText":"OK","headers":{},"body":\"\"}</script>`
+		serialize_data(
+			{
+				url: raw,
+				method: 'GET',
+				request_body: null,
+				response_body,
+				response: new Response(response_body)
+			},
+			() => false
+		),
+		`<script type="application/json" data-sveltekit-fetched data-url="${escaped}">{"status":200,"statusText":"","headers":{},"body":\"\"}</script>`
 	);
 });
 

packages/kit/src/runtime/server/page/types.d.ts

@@ -1,16 +1,12 @@
-import { ResponseHeaders, SSRNode, CspDirectives } from 'types';
+import { SSRNode, CspDirectives } from 'types';
 import { HttpError } from '../../control.js';
 
 export interface Fetched {
 	url: string;
 	method: string;
-	body?: string | null;
-	response: {
-		status: number;
-		statusText: string;
-		headers: ResponseHeaders;
-		body: string;
-	};
+	request_body?: string | null;
+	response_body: string;
+	response: Response;
 }
 
 export interface FetchState {

packages/kit/test/apps/basics/test/test.js

@@ -682,8 +682,7 @@ test.describe('Load', () => {
 			// by the time JS has run, hydration will have nuked these scripts
 			const script_contents = await page.innerHTML('script[data-sveltekit-fetched]');
 
-			const payload =
-				'{"status":200,"statusText":"","headers":{"content-type":"application/json"},"body":"{\\"answer\\":42}"}';
+			const payload = '{"status":200,"statusText":"","headers":{},"body":"{\\"answer\\":42}"}';
 
 			expect(script_contents).toBe(payload);
 		}
@@ -701,11 +700,8 @@ test.describe('Load', () => {
 		expect(await page.textContent('h1')).toBe('a: X');
 		expect(await page.textContent('h2')).toBe('b: Y');
 
-		const payload_a =
-			'{"status":200,"statusText":"","headers":{"content-type":"text/plain;charset=UTF-8"},"body":"X"}';
-
-		const payload_b =
-			'{"status":200,"statusText":"","headers":{"content-type":"text/plain;charset=UTF-8"},"body":"Y"}';
+		const payload_a = '{"status":200,"statusText":"","headers":{},"body":"X"}';
+		const payload_b = '{"status":200,"statusText":"","headers":{},"body":"Y"}';
 
 		if (!javaScriptEnabled) {
 			// by the time JS has run, hydration will have nuked these scripts

packages/kit/types/index.d.ts

@@ -273,6 +273,7 @@ export interface RequestHandler<
 
 export interface ResolveOptions {
 	transformPageChunk?: (input: { html: string; done: boolean }) => MaybePromise<string | undefined>;
+	filterSerializedResponseHeaders?: (name: string, value: string) => boolean;
 }
 
 export class Server {