URL encode references to JS files with brackets

[tommy4st]

Describe the bug

Filenames containing brackets [] are allowed on all major file systems, but not in URLs. Files, which are compiled from pages with dynamic parameters, cannot be correctly referenced by JAVA-based frameworks or servers, because they apply RFC3986 very strictly. For more context, see this Stack Overflow comment and this Quarkus issue.

Reproduction

Repository: repro-quarkus-sveltekit-badrequest

For reproduction, you will need Java 11.

Logs

No response

System Info

System:
    OS: Linux 5.12 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 2.47 GB / 15.31 GB
    Container: Yes
    Shell: 3.3.1 - /usr/bin/fish
  Binaries:
    Node: 16.5.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 7.17.0 - /usr/bin/npm
  Browsers:
    Chromium: 91.0.4472.164
    Firefox: 90.0
  npmPackages:
    @sveltejs/adapter-static: ^1.0.0-next.13 => 1.0.0-next.13 
    @sveltejs/kit: next => 1.0.0-next.132 
    svelte: ^3.38.3 => 3.38.3

Severity

blocking all usage of SvelteKit

Additional Information

Some bits and pieces are already mentioned in #1149.

[benmccann]

I don't understand what the issue is. It's not clear to me what you're trying to do, but you should URL encode the brackets as others have suggested

[tommy4st]

After building the static svelte-kit app, I use the result and serve them using a Java-based web server. That means that the compiled JavaScript files are accessed through Java, which doesn't support brackets in URLs. But that's the way files are accessed through the server, any web server as far as I know. So, brackets in filenames eventually mean brackets in URLs. The files are referenced in the compiled JavaScript using brackets, and that's the problem. How am I supposed to URL encode that? That's still the JavaScript part, where Java does not intervene yet.

So, URL encoding does actually help. 👍🏻

But shouldn't the svelte-kit compile workflow generate encoded URLs? I don't know how I am supposed to do it afterwards efficiently. A simple search and replace approach sounds rather dirty to me.

[tommy4st]

I figured something out myself, but maybe someone can confirm if this is a sane thing to do. I added the following plugin to vite.plugins:

{
  name: 'java-compatible-import-urls',
  renderChunk(code) {
    return code.replace(/(import\b.*?)(["'])(.*?)(\2)/g, (match, p1, p2, p3, p4) => {
      p3 = p3.replace(/(\[|\])/g, (match, p1) => encodeURIComponent(p1));
      return `${p1}${p2}${p3}${p4}`;
    });
  },
},

This doesn't fix the problem completely, because CSS files are not imported this way 😞

[benmccann]

examples/hn.svelte.dev/.svelte-kit/output/client/_app/_app/start-e999a0df.js has import("./pages/[list]/[page].svelte-61307560.js"). That should be URL-encoded. I'm not sure if it's coming from SvelteKit or Vite

It's not super high priority to me since it only happens from Java app servers, so it's one that you'd probably have to track down and send a PR for yourself

[tommy4st]

I found another approach using vite.build.rollupOptions. It's more straight forward and probably less error-prone, and covers assets as well.

output: {
  // adapted from https://github.com/rollup/rollup/blob/master/src/utils/sanitizeFileName.ts
  sanitizeFileName(name) {
    const match = /^[a-z]:/i.exec(name);
    const driveLetter = match ? match[0] : '';

    // A `:` is only allowed as part of a windows drive letter (ex: C:\foo)
    // Otherwise, avoid them because they can refer to NTFS alternate data streams.
    return driveLetter + name.substr(driveLetter.length).replace(/[\0?*:\[\]]/g, '_');
  }
}

It's a totally different approach as it changes the filenames, but it works like a charm 😄

[RaeesBhatti]

I just ran into this on AWS API Gateway (for someone who's scratching their head).

[bojanv55]

Just to mention here (If using Java), Tomcat is not working, while Jetty is working OK with [ and ].

[Rich-Harris]

Is this still happening? When I svelte-kit build, [ and ] are replaced with _ characters — I'm not totally sure where that's happening, or why it changed, but it seems like we shouldn't be experiencing this issue any more?

[benmccann]

I can confirm underscores are now present in the output instead of brackets. E.g. pages/item/_id_.svelte-7f9dd470.js. This issue should be fixed, so I'm going to go ahead and close it

[dominikg]

uhh, where and why is this replacement happening and what would happen if there were _id_.svelte and [id].svelte files present?

[bojanv55]

@dominikg seems like _id_.svelte is silently ignored - that is probably not what you would want...

[benmccann]

I would assume it's happening somewhere in Vite

[bojanv55]

I guess this would work if [ and ] are left inside filenames. But then just when generating js importing statements - to URL encode with %5B and %5D e.g. import("./pages/some_subfolder/%5Bid%5D.svelte-3710ec8b.js")