[fix] decode parameters on client

Author: benmccann

.changeset/warm-news-stare.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[fix] decode parameters on client

packages/kit/src/runtime/client/client.js

@@ -2,7 +2,7 @@ import { onMount, tick } from 'svelte';
 import { writable } from 'svelte/store';
 import { coalesce_to_error } from '../../utils/error.js';
 import { normalize } from '../load.js';
-import { LoadURL, normalize_path } from '../../utils/url.js';
+import { LoadURL, decode_params, normalize_path } from '../../utils/url.js';
 import {
 	create_updated_store,
 	find_anchor,
@@ -893,7 +893,7 @@ export function create_client({ target, session, base, trailing_slash }) {
 			if (params) {
 				const id = normalize_path(url.pathname, trailing_slash) + url.search;
 				/** @type {import('./types').NavigationIntent} */
-				const intent = { id, route, params, url };
+				const intent = { id, route, params: decode_params(params), url };
 				return intent;
 			}
 		}

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

@@ -3,8 +3,8 @@ import { render_page } from './page/index.js';
 import { render_response } from './page/render.js';
 import { respond_with_error } from './page/respond_with_error.js';
 import { coalesce_to_error } from '../../utils/error.js';
-import { decode_params, serialize_error, GENERIC_ERROR } from './utils.js';
-import { normalize_path } from '../../utils/url.js';
+import { serialize_error, GENERIC_ERROR } from './utils.js';
+import { decode_params, normalize_path } from '../../utils/url.js';
 import { exec } from '../../utils/routing.js';
 import { negotiate } from '../../utils/http.js';
 

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

@@ -10,28 +10,6 @@ export function lowercase_keys(obj) {
 	return clone;
 }
 
-/** @param {Record<string, string>} params */
-export function decode_params(params) {
-	for (const key in params) {
-		// input has already been decoded by decodeURI
-		// now handle the rest that decodeURIComponent would do
-		params[key] = params[key]
-			.replace(/%23/g, '#')
-			.replace(/%3[Bb]/g, ';')
-			.replace(/%2[Cc]/g, ',')
-			.replace(/%2[Ff]/g, '/')
-			.replace(/%3[Ff]/g, '?')
-			.replace(/%3[Aa]/g, ':')
-			.replace(/%40/g, '@')
-			.replace(/%26/g, '&')
-			.replace(/%3[Dd]/g, '=')
-			.replace(/%2[Bb]/g, '+')
-			.replace(/%24/g, '$');
-	}
-
-	return params;
-}
-
 /** @param {any} body */
 export function is_pojo(body) {
 	if (typeof body !== 'object') return false;

packages/kit/src/utils/url.js

@@ -53,6 +53,28 @@ export function normalize_path(path, trailing_slash) {
 	return path;
 }
 
+/** @param {Record<string, string>} params */
+export function decode_params(params) {
+	for (const key in params) {
+		// input has already been decoded by decodeURI
+		// now handle the rest that decodeURIComponent would do
+		params[key] = params[key]
+			.replace(/%23/g, '#')
+			.replace(/%3[Bb]/g, ';')
+			.replace(/%2[Cc]/g, ',')
+			.replace(/%2[Ff]/g, '/')
+			.replace(/%3[Ff]/g, '?')
+			.replace(/%3[Aa]/g, ':')
+			.replace(/%40/g, '@')
+			.replace(/%26/g, '&')
+			.replace(/%3[Dd]/g, '=')
+			.replace(/%2[Bb]/g, '+')
+			.replace(/%24/g, '$');
+	}
+
+	return params;
+}
+
 export class LoadURL extends URL {
 	/** @returns {string} */
 	get hash() {

packages/kit/test/apps/basics/src/routes/encoded/index.svelte

@@ -4,3 +4,6 @@
 <a href="/encoded/redirect">Redirect</a>
 <a href="/encoded/@svelte">@svelte</a>
 <a href="/encoded/$SVLT">$SVLT</a>
+<a href="/encoded/test%2520me">test%20me</a>
+<a href="/encoded/AC%2fDC">AC/DC</a>
+<a href="/encoded/%5b">[</a>

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

@@ -262,30 +262,30 @@ test.describe('Encoded paths', () => {
 		expect(decodeURI(await page.innerHTML('h3'))).toBe('/encoded/苗条');
 	});
 
-	test('visits a route with a doubly encoded space', async ({ page }) => {
-		await page.goto('/encoded/test%2520me');
+	test('visits a route with a doubly encoded space', async ({ page, clicknav }) => {
+		await page.goto('/encoded');
+		await clicknav('[href="/encoded/test%2520me"]');
+		expect(await page.innerHTML('h1')).toBe('dynamic');
 		expect(await page.innerHTML('h2')).toBe('/encoded/test%2520me: test%20me');
 		expect(await page.innerHTML('h3')).toBe('/encoded/test%2520me: test%20me');
 	});
 
-	test('visits a route with an encoded slash', async ({ page }) => {
-		await page.goto('/encoded/AC%2fDC');
+	test('visits a route with an encoded slash', async ({ page, clicknav }) => {
+		await page.goto('/encoded');
+		await clicknav('[href="/encoded/AC%2fDC"]');
+		expect(await page.innerHTML('h1')).toBe('dynamic');
 		expect(await page.innerHTML('h2')).toBe('/encoded/AC%2fDC: AC/DC');
 		expect(await page.innerHTML('h3')).toBe('/encoded/AC%2fDC: AC/DC');
 	});
 
-	test('visits a route with an encoded bracket', async ({ page }) => {
-		await page.goto('/encoded/%5b');
+	test('visits a route with an encoded bracket', async ({ page, clicknav }) => {
+		await page.goto('/encoded');
+		await clicknav('[href="/encoded/%5b"]');
+		expect(await page.innerHTML('h1')).toBe('dynamic');
 		expect(await page.innerHTML('h2')).toBe('/encoded/%5b: [');
 		expect(await page.innerHTML('h3')).toBe('/encoded/%5b: [');
 	});
 
-	test('visits a route with an encoded question mark', async ({ page }) => {
-		await page.goto('/encoded/%3f');
-		expect(await page.innerHTML('h2')).toBe('/encoded/%3f: ?');
-		expect(await page.innerHTML('h3')).toBe('/encoded/%3f: ?');
-	});
-
 	test('visits a dynamic route with non-ASCII character', async ({ page, clicknav }) => {
 		await page.goto('/encoded');
 		await clicknav('[href="/encoded/土豆"]');