URLs with a "%" character encoded in a param don't work in SvelteKit.

Describe the bug

SvelteKit’s router can’t navigate consistently to a URL with a ‘%’ encoded in it (as in “%25” appears in the URL).

_navigate calls const info = this.parse(url);, which decodes the URL. Then routes in the manifest calls decodeURIComponent on the already decoded component.

So this route:

const href = `/route/${encodeURIComponent('%test')}`;

If delivered to goto will break, but if you go to that URL directly, it will be handled.

As such, if you use this route instead:

const href = encodeURI(`/route/${encodeURIComponent('%test')}`);

goto can handle it just fine, but if you go to the URL directly, you end up with an encoded string in your page params.

Reproduction

I created a simple repo that reproduces this bug.

Basically, have a link with a “%” character in the URL in one of the params. If you single encode it, it won’t work when you navigate in the app. If you double encode it, it won’t work when you go directly to the page.

Logs

Uncaught (in promise) URIError: malformed URI sequence
    routes http://localhost:3000/.svelte-kit/dev/generated/manifest.js?t=1639767160433:15
    _load http://localhost:3000/.svelte-kit/dev/runtime/internal/start.js:982
    _get_navigation_result http://localhost:3000/.svelte-kit/dev/runtime/internal/start.js:790
    update http://localhost:3000/.svelte-kit/dev/runtime/internal/start.js:621
    handle_navigation http://localhost:3000/.svelte-kit/dev/runtime/internal/start.js:610
    _navigate http://localhost:3000/.svelte-kit/dev/runtime/internal/start.js:287
    init_listeners http://localhost:3000/.svelte-kit/dev/runtime/internal/start.js:170

System Info

System:
    OS: Linux 5.15 Manjaro Linux
    CPU: (12) x64 Intel(R) Core(TM) i5-10500H CPU @ 2.50GHz
    Memory: 5.64 GB / 15.45 GB
    Container: Yes
    Shell: 3.3.1 - /usr/bin/fish
  Binaries:
    Node: 14.18.1 - /usr/local/bin/node
    npm: 8.2.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 96.1.33.106
    Firefox: 95.0.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.4 
    @sveltejs/kit: next => 1.0.0-next.202 
    svelte: ^3.44.0 => 3.44.3 

Severity

blocking all usage of SvelteKit

Additional Information

I’m working on an app that requires being able to use a percent sign in a query, so this breaks some portions of my app.

[hperrin]

It also appears that returning a redirect in a load function will run encodeURI on the URL, meaning that there is no way to properly encode a URI component within it, since it will be double encoded.

[hperrin]

I can’t reproduce this. @hperrin’s project is fairly old at this point, but I created a new project and copied his files over and it seems to be working as expected.

I suspect this was fixed last month by https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md#100-next385 and @dciug is probably on a version older than that

Yes. It looks like this is the fix. 😄 https://github.com/sveltejs/kit/commit/d02f1f25ac8acb29e21a06b94418c333928fb9bb#diff-d2344aa425f99c605f40fdf8ea76be2f063c21cafc0402e044b1a9a254f60e7dL13