fix(vite,webpack): restrict access via cors to local origins + allow configuration via devServer.cors

Author: danielroe

Diff for: packages/schema/src/config/dev.ts

@@ -39,5 +39,13 @@ export default defineUntypedSchema({
      * @type {(data: { loading?: string }) => string}
      */
     loadingTemplate,
+
+    /**
+     * Set CORS options for the dev server
+     * @type {typeof import('h3').H3CorsOptions}
+     */
+    cors: {
+      origin: [/^https?:\/\/(?:(?:[^:]+\.)?localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/],
+    },
   },
 })

Diff for: packages/vite/src/client.ts

@@ -9,7 +9,7 @@ import { getPort } from 'get-port-please'
 import { joinURL, withoutLeadingSlash } from 'ufo'
 import { defu } from 'defu'
 import { env, nodeless } from 'unenv'
-import { appendCorsHeaders, appendCorsPreflightHeaders, defineEventHandler } from 'h3'
+import { defineEventHandler, handleCors, setHeader } from 'h3'
 import type { ViteConfig } from '@nuxt/schema'
 import type { ViteBuildContext } from './vite'
 import { devStyleSSRPlugin } from './plugins/dev-ssr-css'
@@ -255,11 +255,11 @@ export async function buildClient (ctx: ViteBuildContext) {
         // @ts-expect-error _skip_transform is a private property
         event.node.req._skip_transform = true
       } else if (!useViteCors) {
-        if (event.method === 'OPTIONS') {
-          appendCorsPreflightHeaders(event, {})
+        const isPreflight = handleCors(event, ctx.nuxt.options.devServer.cors)
+        if (isPreflight) {
           return null
         }
-        appendCorsHeaders(event, {})
+        setHeader(event, 'Vary', 'Origin')
       }
 
       // Workaround: vite devmiddleware modifies req.url

Diff for: packages/webpack/src/webpack.ts

@@ -1,6 +1,7 @@
 import pify from 'pify'
 import { resolve } from 'pathe'
-import { defineEventHandler, fromNodeMiddleware } from 'h3'
+import { defineEventHandler, fromNodeMiddleware, handleCors, setHeader } from 'h3'
+import type { H3CorsOptions } from 'h3'
 import type { IncomingMessage, MultiWatching, ServerResponse } from 'webpack-dev-middleware'
 import webpackDevMiddleware from 'webpack-dev-middleware'
 import webpackHotMiddleware from 'webpack-hot-middleware'
@@ -125,7 +126,7 @@ async function createDevMiddleware (compiler: Compiler) {
   })
 
   // Register devMiddleware on server
-  const devHandler = wdmToH3Handler(devMiddleware)
+  const devHandler = wdmToH3Handler(devMiddleware, nuxt.options.devServer.cors)
   const hotHandler = fromNodeMiddleware(hotMiddleware)
   await nuxt.callHook('server:devHandler', defineEventHandler(async (event) => {
     const body = await devHandler(event)
@@ -139,8 +140,14 @@ async function createDevMiddleware (compiler: Compiler) {
 }
 
 // TODO: implement upstream in `webpack-dev-middleware`
-function wdmToH3Handler (devMiddleware: webpackDevMiddleware.API<IncomingMessage, ServerResponse>) {
+function wdmToH3Handler (devMiddleware: webpackDevMiddleware.API<IncomingMessage, ServerResponse>, corsOptions: H3CorsOptions) {
   return defineEventHandler(async (event) => {
+    const isPreflight = handleCors(event, corsOptions)
+    if (isPreflight) {
+      return null
+    }
+    setHeader(event, 'Vary', 'Origin')
+
     event.context.webpack = {
       ...event.context.webpack,
       devMiddleware: devMiddleware.context,