fix: make @fs URLs work with special characters (#7510)

packages/playground/fs-serve/__tests__/fs-serve.spec.ts

@@ -23,6 +23,15 @@ describe('main', () => {
       expect(await page.textContent('.safe-fetch-status')).toBe('200')
     })
 
+    test('safe fetch with special characters', async () => {
+      expect(
+        await page.textContent('.safe-fetch-subdir-special-characters')
+      ).toMatch('KEY=safe')
+      expect(
+        await page.textContent('.safe-fetch-subdir-special-characters-status')
+      ).toBe('200')
+    })
+
     test('unsafe fetch', async () => {
       expect(await page.textContent('.unsafe-fetch')).toMatch('403 Restricted')
       expect(await page.textContent('.unsafe-fetch-status')).toBe('403')
@@ -33,6 +42,13 @@ describe('main', () => {
       expect(await page.textContent('.safe-fs-fetch-status')).toBe('200')
     })
 
+    test('safe fs fetch with special characters', async () => {
+      expect(await page.textContent('.safe-fs-fetch-special-characters')).toBe(
+        stringified
+      )
+      expect(await page.textContent('.safe-fs-fetch-status')).toBe('200')
+    })
+
     test('unsafe fs fetch', async () => {
       expect(await page.textContent('.unsafe-fs-fetch')).toBe('')
       expect(await page.textContent('.unsafe-fs-fetch-status')).toBe('403')

packages/playground/fs-serve/root/src/index.html

@@ -11,6 +11,8 @@ <h2>Safe Fetch</h2>
 <h2>Safe Fetch Subdirectory</h2>
 <pre class="safe-fetch-subdir-status"></pre>
 <pre class="safe-fetch-subdir"></pre>
+<pre class="safe-fetch-subdir-special-characters-status"></pre>
+<pre class="safe-fetch-subdir-special-characters"></pre>
 
 <h2>Unsafe Fetch</h2>
 <pre class="unsafe-fetch-status"></pre>
@@ -19,6 +21,8 @@ <h2>Unsafe Fetch</h2>
 <h2>Safe /@fs/ Fetch</h2>
 <pre class="safe-fs-fetch-status"></pre>
 <pre class="safe-fs-fetch"></pre>
+<pre class="safe-fs-fetch-special-characters-status"></pre>
+<pre class="safe-fs-fetch-special-characters"></pre>
 
 <h2>Unsafe /@fs/ Fetch</h2>
 <pre class="unsafe-fs-fetch-status"></pre>
@@ -56,6 +60,16 @@ <h2>Denied</h2>
       text('.safe-fetch-subdir', JSON.stringify(data))
     })
 
+  // inside allowed dir, with special characters, safe fetch
+  fetch('/src/special%20characters%20%C3%A5%C3%A4%C3%B6/safe.txt')
+    .then((r) => {
+      text('.safe-fetch-subdir-special-characters-status', r.status)
+      return r.text()
+    })
+    .then((data) => {
+      text('.safe-fetch-subdir-special-characters', JSON.stringify(data))
+    })
+
   // outside of allowed dir, treated as unsafe
   fetch('/unsafe.txt')
     .then((r) => {
@@ -92,6 +106,20 @@ <h2>Denied</h2>
       console.error(e)
     })
 
+  // not imported before, inside root with special characters, treated as safe
+  fetch(
+    '/@fs/' +
+      ROOT +
+      '/root/src/special%20characters%20%C3%A5%C3%A4%C3%B6/safe.json'
+  )
+    .then((r) => {
+      text('.safe-fs-fetch-special-characters-status', r.status)
+      return r.json()
+    })
+    .then((data) => {
+      text('.safe-fs-fetch-special-characters', JSON.stringify(data))
+    })
+
   // .env, denied by default
   fetch('/@fs/' + ROOT + '/root/.env')
     .then((r) => {

packages/playground/fs-serve/root/src/special characters åäö/safe.json

@@ -0,0 +1,3 @@
+{
+  "msg": "safe"
+}

packages/playground/fs-serve/root/src/special characters åäö/safe.txt

@@ -0,0 +1 @@
+KEY=safe

packages/vite/src/node/server/middlewares/static.ts

@@ -111,7 +111,7 @@ export function serveRawFsMiddleware(
 
   // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
   return function viteServeRawFsMiddleware(req, res, next) {
-    let url = req.url!
+    let url = decodeURI(req.url!)
     // In some cases (e.g. linked monorepos) files outside of root will
     // reference assets that are also out of served root. In such cases
     // the paths are rewritten to `/@fs/` prefixed paths and must be served by