wip: reject no-cors requests

Author: sapphi-red

packages/vite/src/node/server/index.ts

@@ -102,6 +102,7 @@ import type { DevEnvironment } from './environment'
 import { hostValidationMiddleware } from './middlewares/hostCheck'
 import { rejectInvalidRequestMiddleware } from './middlewares/rejectInvalidRequest'
 import { memoryFilesMiddleware } from './middlewares/memoryFiles'
+import { rejectNoCorsRequestMiddleware } from './middlewares/rejectNoCorsRequest'
 
 const usedConfigs = new WeakSet<ResolvedConfig>()
 
@@ -864,8 +865,8 @@ export async function _createServer(
     middlewares.use(timeMiddleware(root))
   }
 
-  // disallows request that contains `#` in the URL
   middlewares.use(rejectInvalidRequestMiddleware())
+  middlewares.use(rejectNoCorsRequestMiddleware())
 
   // cors
   const { cors } = serverConfig

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

@@ -1,5 +1,6 @@
 import type { Connect } from 'dep-types/connect'
 
+// disallows request that contains `#` in the URL
 export function rejectInvalidRequestMiddleware(): Connect.NextHandleFunction {
   // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
   return function viteRejectInvalidRequestMiddleware(req, res, next) {

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

@@ -0,0 +1,32 @@
+import type { Connect } from 'dep-types/connect'
+
+/**
+ * A middleware that rejects no-cors mode requests that are not same-origin.
+ *
+ * We should avoid untrusted sites to load the script to avoid attacks like GHSA-4v9v-hfq4-rm2v.
+ * This is because:
+ * - the path of HMR patch files / entry point files can be predictable
+ * - the HMR patch files may not include ESM syntax
+ *   (if they include ESM syntax, loading as a classic script would fail)
+ * - the HMR runtime in the browser has the list of all loaded modules
+ *
+ * https://github.com/webpack/webpack-dev-server/security/advisories/GHSA-4v9v-hfq4-rm2v
+ * https://green.sapphi.red/blog/local-server-security-best-practices#_2-using-xssi-and-modifying-the-prototype
+ * https://green.sapphi.red/blog/local-server-security-best-practices#properly-check-the-request-origin
+ */
+export function rejectNoCorsRequestMiddleware(): Connect.NextHandleFunction {
+  // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
+  return function viteRejectNoCorsRequestMiddleware(req, res, next) {
+    // While we can set Cross-Origin-Resource-Policy header instead of rejecting requests,
+    // we choose to reject the request to be safer in case the request handler has any side-effects.
+    if (
+      req.headers['sec-fetch-mode'] === 'no-cors' &&
+      req.headers['sec-fetch-site'] !== 'same-origin'
+    ) {
+      res.statusCode = 403
+      res.end('Cross-origin requests must be made with CORS mode enabled.')
+      return
+    }
+    return next()
+  }
+}

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

@@ -560,3 +560,49 @@ describe.runIf(!isServe)('preview HTML', () => {
       .toBe('404')
   })
 })
+
+test.runIf(isServe)(
+  'load script with no-cors mode from a different origin',
+  async () => {
+    const viteTestUrlUrl = new URL(viteTestUrl)
+
+    // NOTE: fetch cannot be used here as `fetch` sets some headers automatically
+    const res = await new Promise<http.IncomingMessage>((resolve, reject) => {
+      http
+        .get(
+          viteTestUrl + '/src/code.js',
+          {
+            headers: {
+              'Sec-Fetch-Dest': 'script',
+              'Sec-Fetch-Mode': 'no-cors',
+              'Sec-Fetch-Site': 'same-site',
+              Origin: 'http://vite.dev',
+              Host: viteTestUrlUrl.host,
+            },
+          },
+          (res) => {
+            resolve(res)
+          },
+        )
+        .on('error', (e) => {
+          reject(e)
+        })
+    })
+    expect(res.statusCode).toBe(403)
+    const body = Buffer.concat(await ArrayFromAsync(res)).toString()
+    expect(body).toBe(
+      'Cross-origin requests must be made with CORS mode enabled.',
+    )
+  },
+)
+
+// Note: Array.fromAsync is only supported in Node.js 22+
+async function ArrayFromAsync<T>(
+  asyncIterable: AsyncIterable<T>,
+): Promise<T[]> {
+  const chunks = []
+  for await (const chunk of asyncIterable) {
+    chunks.push(chunk)
+  }
+  return chunks
+}