Cannot have encoded % in URL outside of parameter

[benmccann]

Describe the bug

#7521 will not allow you to have a URL like this:

Probably the way to fix this is to replace the parameters with placeholders, decodeURI the altered URL, match with regex, and then decodeURIComponent on the parameters

Reproduction

https://github.com/benmccann/kit/tree/encoded-percent-test

Logs

No response

System Info

`master`

Severity

annoyance

Additional Information

No response

[dmkret]

@benmccann here is what i found:

1. It seems like you forgot to add a link to +page.svelte

<a href="/encoded/99%">99%</a>

2. Decoding /encoded/99% uri will throw en error, so it should be /encoded/99%25

decodeURI('/encoded/99%')
// Uncaught URIError: URI malformed
//     at decodeURI (<anonymous>)
//     at <anonymous>:1:1

decodeURI('/encoded/99%25')
// '/encoded/99%'

3. There is an issue with % in directory name, caused by viteTransformMiddleware (at least).
   This middleware uses decodeURI on folder path. /encoded/[percent]%25 becomes /encoded/[percent]% and any attempt to resolve /encoded/[percent]%25 causes 404.

It seems like it is safe to use characters that are ignored by decodeURI: %3B %2F %3F %3A %40 %26 %3D %2B %24 %2C %23 (; / ? : @ & = + $ , #) and others.

P.S. If you remove [percent]%25 folder and use [slug], all will be fine, but % will be part of the slug.

[dmkret]

As a solution maybe we can check path segments on build like this:

const decoded = decodeURI(segment);
if (decoded !== segment) {
  throw Error('there is an unavailable encoded character') // and show original and decoded segments
}

[benmccann]

Thanks for catching my mistakes in the test! Sorry about that. I just pushed the fixes you mentioned

I'm not sure I understand what you're suggesting might be wrong with viteTransformMiddleware. Can you explain in more detail?

I'm actually pretty confused at the moment because the Playwright tests are failing, but I can load the page just fine in my browser:

[dmkret]

@benmccann expects should be updated too:

test('allows %-encoded percent character in directory names', async ({ page, clicknav }) => {
	await page.goto('/encoded');
	await clicknav('[href="/encoded/99%25"]');
	expect(await page.textContent('h1')).toBe('dynamic');
	expect(await page.textContent('h2')).toBe('/encoded/99%25: 99%');
	expect(await page.textContent('h3')).toBe('/encoded/99%25: 99%');
});

[dmkret]

About viteTransformMiddleware, sorry, i was wrong.

This is a regression with %25, but placeholders shouldn't help...

[dmkret]

It is ok when %2525 used instead of %25 is in folder name ([percent]%2525).
As a solution I see avoid decoding of %25 on segments parsing:

kit/packages/kit/src/utils/routing.js

Line 24 in 11950e0

const decoded_segment = decodeURIComponent(segment);

const decoded_segment = segment.split('%25').map(decodeURIComponent).join('%25'));