HTTP 403 response with valid route component called tests.svelte in dev

[qbunt]

Describe the bug

With a route component called tests.svelte, I'm seeing the following warning in dev only.

When I run this in Stackblitz or similar, I don't see this issue when I hit the /tests route directly, but in a brand-new local SvelteKit project (either the skeleton or the demo), I see it.

The other slightly strange thing is that when I click through a link to this route from an index page, the page renders as expected, no errors at all. When I reload /tests, this error shows.

Bug could be in vite's dev server rather than Sveltekit directly, but it's certainly impacting sveltekit.

Reproduction

• Clone https://github.com/qbunt/tests-route-sveltekit
• Install deps
• Run npm run dev -- --open
• Click the link to tests link
• See no error and the content of the tests page
• Refresh the page
• See 403 response regardless of a valid route

Logs

403 Restricted

The request url "/Users/qbunt/Desktop/test-svelte/tests" is outside of Vite serving allow list.

- /Users/qbunt/Desktop/test-svelte/static
- /Users/qbunt/Desktop/test-svelte/src/lib
- /Users/qbunt/Desktop/test-svelte/src/routes
- /Users/qbunt/Desktop/test-svelte/.svelte-kit
- /Users/qbunt/Desktop/test-svelte/src
- /Users/qbunt/Desktop/test-svelte/node_modules

Refer to docs https://vitejs.dev/config/#server-fs-allow for configurations and more details.

System Info

System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Max
    Memory: 6.59 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/Library/Caches/fnm_multishells/55751_1647444823499/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.3.1 - ~/Library/Caches/fnm_multishells/55751_1647444823499/bin/npm
  Browsers:
    Brave Browser: 96.1.32.115
    Chrome: 99.0.4844.74
    Chrome Canary: 98.0.4758.2
    Edge: 99.0.1150.39
    Firefox: 98.0.1
    Firefox Developer Edition: 96.0
    Firefox Nightly: 97.0a1
    Safari: 15.4
    Safari Technology Preview: 15.4
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.33 
    @sveltejs/kit: next => 1.0.0-next.298 
    svelte: ^3.46.0 => 3.46.4

Severity

annoyance

Additional Information

When working with the static adapter, after a build, the tests route renders as expected during a refresh. If this should be re-filed with Vite, please let me know, I have actual tests routes I'd like to support. You guys rule, thanks!

[benmccann]

Does this work for you with the latest Vite 2.9 beta? Dominik just got a change in that might fix this: vitejs/vite#6518

[qbunt]

@benmccann thanks, bug is present in vite 2.9.0-beta.3

[aolose]

The issue is not about tests.svelte. You will get this error if your url path starts with any root-relative path. For example, if you create a src.svelte or package.json in your routes folder, then you visit http://localhost:3000/src or http://localhost:3000/package.json, you'll get the same error.

In dev mode, the request flow is as below:
request ---> vite server ---> vite middlewares ---> vite serveStaticMiddleware ---> ... ---> svelte kit routes

serveStaticMiddleware will treat /xxxx as local file/folder, so if same file/folder exist and not allowed to access, the middleware will return a error.

serveStaticMiddleware will call the function ensureServingAccess.
Below is the part code of ensureServingAccess.

    if (isFileReadable(cleanUrl(url))) {
        const urlMessage = `The request url "${url}" is outside of Vite serving allow list.`;
        const hintMessage = `
${server.config.server.fs.allow.map((i) => `- ${i}`).join('\n')}

Refer to docs https://vitejs.dev/config/#server-fs-allow for configurations and more details.`;
        server.config.logger.error(urlMessage);
        server.config.logger.warnOnce(hintMessage + '\n');
        res.statusCode = 403;
        res.write(renderRestrictedErrorHTML(urlMessage + '\n' + hintMessage));
        res.end();
    }
    else {
        // if the file doesn't exist, we shouldn't restrict this path as it can
        // be an API call. Middlewares would issue a 404 if the file isn't handled
        next();
    }

[qbunt]

@aolose got it, thanks for the detailed explanation, helps a ton. @benmccann when you select playwright tests in the kit cli, you end up with a tests folder in the root. Based on the above, that folder is getting caught by the static middleware and handled by vite before it lands in a route, causing this issue.

Potential solution could be to move tests -> .tests, but it really depends if this is an issue worth caring about 😄 definitely going to make me rethink polluting that root level.

[benmccann]

I filed an issue upstream for this: vitejs/vite#7363

[qbunt]

@benmccann hadn't thought of that environment var leak scenario. Thanks for the fast response, I think this is good to close 🚀

[benmccann]

I will leave this open since the issue is still present

[glitchedgitz]

@benmccann @Rich-Harris
I am still facing this issue.

I am using a sveltekit component library.

Project Structure

Showing 403 error on accessing fonts.

[qbunt]

@glitchedgitz you're not seeing the same issue I filed. Items inside the lib folder are not accessible directly the browser, and you probably want those in static unless I'm misunderstanding.

[glitchedgitz]

Hi @qbunt I am using that as a component library. So content in static folder is not moving to /package after running npm run build. And as you said the content in the library is not accessible outside directly which I need to be accessible outside to use in the another application.

I already check vite rules to allow it in vite.config.js server.fs.strict:false but it's not working because this vite file never moves to /package I guess.

[justingolden21]

Encountered this for the first time today after making a /test route when running dev, then switching branches to one without /test. /test gave me the above 403 but /tes and any other missing routes gave me a 404 (correctly so). Is it a caching thing?