vitejs · antfu · May 10, 2021 · May 9, 2021 · May 9, 2021 · May 9, 2021
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
@@ -2,7 +2,7 @@ import fs from 'fs'
 import path from 'path'
 import { Plugin } from './plugin'
 import { BuildOptions, resolveBuildOptions } from './build'
-import { ServerOptions } from './server'
+import { ResolvedServerOptions, ServerOptions } from './server'
 import { CSSOptions } from './plugins/css'
 import {
   createDebugger,
@@ -35,6 +35,7 @@ import {
 } from './server/pluginContainer'
 import aliasPlugin from '@rollup/plugin-alias'
 import { build } from 'esbuild'
+import { searchForWorkspaceRoot } from './server/searchRoot'
 
 const debug = createDebugger('vite:config')
 
@@ -201,7 +202,7 @@ export type ResolvedConfig = Readonly<
       alias: Alias[]
     }
     plugins: readonly Plugin[]
-    server: ServerOptions
+    server: ResolvedServerOptions
     build: ResolvedBuildOptions
     assetsInclude: (file: string) => boolean
     logger: Logger
@@ -369,6 +370,13 @@ export async function resolveConfig(
     }
   }
 
+  const server = config.server || {}
+  const serverRoot = path.resolve(
+    resolvedRoot,
+    server.fsServe?.root || searchForWorkspaceRoot(resolvedRoot)
+  )
+  server.fsServe = { root: serverRoot }
+
   const { publicDir } = config
   const resolvedPublicDir =
     publicDir !== false && publicDir !== ''
@@ -392,7 +400,7 @@ export async function resolveConfig(
     mode,
     isProduction,
     plugins: userPlugins,
-    server: config.server || {},
+    server: server as ResolvedServerOptions,
     build: resolvedBuildOptions,
     env: {
       ...userEnv,

diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
@@ -126,6 +126,10 @@ export interface ServerOptions {
   fsServe?: FileSystemServeOptions
 }
 
+export interface ResolvedServerOptions extends ServerOptions {
+  fsServe: Required<FileSystemServeOptions>
+}
+
 export interface FileSystemServeOptions {
   /**
    * Restrict accessing files outside this directory will result in a 403.
@@ -276,7 +280,7 @@ export async function createServer(
 ): Promise<ViteDevServer> {
   const config = await resolveConfig(inlineConfig, 'serve', 'development')
   const root = config.root
-  const serverConfig = config.server || {}
+  const serverConfig = config.server
   const middlewareMode = !!serverConfig.middlewareMode
 
   const middlewares = connect() as Connect.Server
@@ -550,7 +554,7 @@ async function startServer(
     throw new Error('Cannot call server.listen in middleware mode.')
   }
 
-  const options = server.config.server || {}
+  const options = server.config.server
   let port = inlinePort || options.port || 3000
   let hostname: string | undefined
   if (options.host === undefined || options.host === 'localhost') {

diff --git a/packages/vite/src/node/server/middlewares/error.ts b/packages/vite/src/node/server/middlewares/error.ts
@@ -63,8 +63,35 @@ export function errorMiddleware(
     if (allowNext) {
       next()
     } else {
+      if (err instanceof FileOutSideError) {
+        res.statusCode = 403
+        res.write(renderErrorHTML(err.message))
+        res.end()
+      }
       res.statusCode = 500
       res.end()
     }
   }
 }
+
+export class FileOutSideError extends Error {
+  constructor(msg: string, public url: string, public serveRoot: string) {
+    super(msg)
+  }
+}
+
+export function renderErrorHTML(msg: string): string {
+  // to have syntax highlighting and autocompletion in IDE
+  const html = String.raw
+  return html`
+    <body>
+      <h1>403 Restricted</h1>
+      <p>${msg.replace(/\n/g, '<br/>')}</p>
+      <style>
+        body {
+          padding: 1em 2em;
+        }
+      </style>
+    </body>
+  `
+}
diff --git a/packages/vite/src/node/server/middlewares/static.ts b/packages/vite/src/node/server/middlewares/static.ts
@@ -5,7 +5,7 @@ import { Connect } from 'types/connect'
 import { ResolvedConfig } from '../..'
 import { FS_PREFIX } from '../../constants'
 import { cleanUrl, fsPathFromId, isImportRequest } from '../../utils'
-import { searchForWorkspaceRoot } from '../searchRoot'
+import { FileOutSideError } from './error'
 
 const sirvOptions: Options = {
   dev: true,
@@ -80,10 +80,6 @@ export function serveRawFsMiddleware(
 ): Connect.NextHandleFunction {
   const isWin = os.platform() === 'win32'
   const serveFromRoot = sirv('/', sirvOptions)
-  const serveRoot = path.resolve(
-    config.root,
-    config.server?.fsServe?.root || searchForWorkspaceRoot(config.root)
-  )
 
   // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
   return function viteServeRawFsMiddleware(req, res, next) {
@@ -94,12 +90,10 @@ export function serveRawFsMiddleware(
     // searching based from fs root.
     if (url.startsWith(FS_PREFIX)) {
       // restrict files outside of `fsServe.root`
-      if (!path.resolve(fsPathFromId(url)).startsWith(serveRoot + path.sep)) {
-        res.statusCode = 403
-        res.write(renderFsRestrictedHTML(serveRoot))
-        res.end()
-        return
-      }
+      checkFileOutSide(
+        path.resolve(fsPathFromId(url)),
+        config.server.fsServe.root
+      )
 
       url = url.slice(FS_PREFIX.length)
       if (isWin) url = url.replace(/^[A-Z]:/i, '')
@@ -112,28 +106,12 @@ export function serveRawFsMiddleware(
   }
 }
 
-function renderFsRestrictedHTML(root: string) {
-  // to have syntax highlighting and autocompletion in IDE
-  const html = String.raw
-  return html`
-    <body>
-      <h1>403 Restricted</h1>
-      <p>
-        For security concerns, accessing files outside of workspace root
-        (<code>${root}</code>) is restricted since Vite v2.3.x
-      </p>
-      <p>
-        Refer to docs
-        <a href="https://vitejs.dev/config/#server-fsserveroot">
-          https://vitejs.dev/config/#server-fsserveroot
-        </a>
-        for configurations and more details.
-      </p>
-      <style>
-        body {
-          padding: 1em 2em;
-        }
-      </style>
-    </body>
-  `
+export function checkFileOutSide(url: string, serveRoot: string): void {
+  if (!url.startsWith(serveRoot + path.sep)) {
+    throw new FileOutSideError(
+      `The request url "${url}" is outside of vite dev server root "${serveRoot}". \nFor security concerns, accessing files outside of workspace root is restricted since Vite v2.3.x. \nRefer to docs https://vitejs.dev/config/#server-fsserveroot for configurations and more details.`,
+      url,
+      serveRoot
+    )
+  }
 }
diff --git a/packages/vite/src/node/server/transformRequest.ts b/packages/vite/src/node/server/transformRequest.ts
@@ -16,6 +16,7 @@ import {
 import { checkPublicFile } from '../plugins/asset'
 import { ssrTransform } from '../ssr/ssrTransform'
 import { injectSourcesContent } from './sourcemap'
+import { checkFileOutSide } from './middlewares/static'
 
 const debugLoad = createDebugger('vite:load')
 const debugTransform = createDebugger('vite:transform')
@@ -73,6 +74,9 @@ export async function transformRequest(
     // if the file is a binary, there should be a plugin that already loaded it
     // as string
     try {
+      if (!options.ssr) {
+        checkFileOutSide(file, config.server.fsServe.root)
+      }
       code = await fs.readFile(file, 'utf-8')
       isDebug && debugLoad(`${timeFrom(loadStart)} [fs] ${prettyUrl}`)
     } catch (e) {