fix(devtools): continue hardening the RPC surface (#1049)

Author: antfubot

package.json

@@ -65,6 +65,7 @@
 "esbuild": "catalog:buildtools",
 "rollup": "catalog:buildtools",
 "semver": "catalog:prod",
+"structured-clone-es": "catalog:frontend",
 "typescript": "catalog:cli",
 "unimport": "catalog:types",
 "vite": "catalog:buildtools",

packages/devtools-kit/src/_types/rpc.ts

@@ -15,7 +15,7 @@ export interface ServerFunctions {
 getServerConfig: ()=>NuxtOptions
 getServerDebugContext: ()=>Promise<ServerDebugContext|undefined>
 getServerData: (token: string)=>Promise<NuxtServerData>
-getServerRuntimeConfig: ()=>Record<string,any>
+getServerRuntimeConfig: (token: string)=>Promise<Record<string,any>>
 getModuleOptions: ()=>ModuleOptions
 getComponents: ()=>Component[]
 getComponentsRelationships: ()=>Promise<ComponentRelationship[]>
@@ -66,16 +66,16 @@ export interface ServerFunctions {
 
 // Actions
 telemetryEvent: (payload: object,immediate?: boolean)=>void
-customTabAction: (name: string,action: number)=>Promise<boolean>
+customTabAction: (token: string,name: string,action: number)=>Promise<boolean>
 runWizard: <TextendsWizardActions>(token: string,name: T, ...args: GetWizardArgs<T>)=>Promise<void>
 openInEditor: (token: string,filepath: string)=>Promise<boolean>
 restartNuxt: (token: string,hard?: boolean)=>Promise<void>
 installNuxtModule: (token: string,name: string,dry?: boolean)=>Promise<InstallModuleReturn>
 uninstallNuxtModule: (token: string,name: string,dry?: boolean)=>Promise<InstallModuleReturn>
-enableTimeline: (dry: boolean)=>Promise<[string,string]>
+enableTimeline: (token: string,dry: boolean)=>Promise<[string,string]>
 
 // Dev Token
-requestForAuth: (info?: string,origin?: string)=>Promise<void>
+requestForAuth: (info?: string)=>Promise<void>
 verifyAuthToken: (token: string)=>Promise<boolean>
 }
 

packages/devtools/client/composables/dev-auth.ts

@@ -64,7 +64,7 @@ export async function requestForAuth() {
 userAgentInfo.os.version,
 userAgentInfo.device.type,
 ].filter(i=>i).join(' ')
-returnawaitrpc.requestForAuth(desc,window.location.origin)
+returnawaitrpc.requestForAuth(desc)
 }
 
 asyncfunctionauthConfirmAction(){

packages/devtools/client/composables/state.ts

@@ -4,6 +4,7 @@ import { objectPick } from '@antfu/utils'
 import{computed}from'vue'
 import{useFetch}from'#app/composables/fetch'
 import{useClientRouter}from'./client'
+import{ensureDevAuthToken}from'./dev-auth'
 import{rpc}from'./rpc'
 import{useAsyncState}from'./utils'
 
@@ -44,7 +45,7 @@ export function useServerDebugContext() {
 }
 
 exportfunctionuseServerRuntimeConfig(){
-returnuseAsyncState('getServerRuntimeConfig',()=>rpc.getServerRuntimeConfig())
+returnuseAsyncState('getServerRuntimeConfig',async()=>rpc.getServerRuntimeConfig(awaitensureDevAuthToken()))
 }
 
 exportfunctionuseModuleOptions(){

packages/devtools/client/pages/modules/custom-[name].vue

@@ -3,7 +3,7 @@ import type { ModuleCustomTab } from '~/../src/types'
 import { computed, onMounted } from'vue'
 import { useRoute, useRouter } from'#app/composables/router'
 import { definePageMeta } from'#imports'
-import { isDevAuthed, requestForAuth } from'~/composables/dev-auth'
+import { ensureDevAuthToken, isDevAuthed, requestForAuth } from'~/composables/dev-auth'
 import { rpc } from'~/composables/rpc'
 import { useAllTabs } from'~/composables/state-tabs'
 
@@ -68,7 +68,7 @@ onMounted(() => {
  :title="tab.view.title||tab.title"
  :description="tab.view.description"
  :actions="tab.view.actions"
- @action="idx=>rpc.customTabAction(tab!.name, idx)"
+ @action="asyncidx=>rpc.customTabAction(awaitensureDevAuthToken(), tab!.name, idx)"
  />
  </template>
  <templatev-else>

packages/devtools/client/pages/modules/timeline.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { createTemplatePromise } from'@vueuse/core'
 import { definePageMeta, devtoolsUiShowNotification } from'#imports'
+import { ensureDevAuthToken } from'~/composables/dev-auth'
 import { useOpenInEditor } from'~/composables/editor'
 import { rpc } from'~/composables/rpc'
 import { useModuleOptions, useServerConfig } from'~/composables/state'
@@ -20,10 +21,10 @@ const openInEditor = useOpenInEditor()
 
 asyncfunction showPopup() {
 try {
-const [source, modified] =awaitrpc.enableTimeline(true)
+const [source, modified] =awaitrpc.enableTimeline(awaitensureDevAuthToken(), true)
 if (!awaitDialog.start(source, modified))
 return
-awaitrpc.enableTimeline(false)
+awaitrpc.enableTimeline(awaitensureDevAuthToken(), false)
  }
 catch {
 devtoolsUiShowNotification({

packages/devtools/src/server-rpc/custom-tabs.ts

@@ -1,6 +1,6 @@
 importtype{ModuleCustomTab,NuxtDevtoolsServerContext,ServerFunctions}from'../types'
 
-exportfunctionsetupCustomTabRPC({ nuxt, options, refresh }: NuxtDevtoolsServerContext){
+exportfunctionsetupCustomTabRPC({ nuxt, options, refresh, ensureDevAuthToken}: NuxtDevtoolsServerContext){
 constiframeTabs: ModuleCustomTab[]=[]
 constcustomTabs: ModuleCustomTab[]=[]
 
@@ -35,7 +35,8 @@ export function setupCustomTabRPC({ nuxt, options, refresh }: NuxtDevtoolsServer
 returni
 })
 },
-asynccustomTabAction(name,actionIndex){
+asynccustomTabAction(token,name,actionIndex){
+awaitensureDevAuthToken(token)
 consttab=customTabs.find(i=>i.name===name)
 if(!tab)
 returnfalse

packages/devtools/src/server-rpc/general.ts

@@ -87,7 +87,19 @@ export function setupGeneralRPC({
 
 return{
 getServerConfig(): NuxtOptions{
-returnnuxt.optionsasunknownasNuxtOptions
+// This method is intentionally reachable without a dev auth token (the
+// client reads it eagerly across many views), so strip the private
+// `runtimeConfig` values — they can hold secrets — from the payload.
+// The Runtime Config tab reads them separately via the token-gated
+// `getServerRuntimeConfig`. `public`/`app` are non-secret and kept.
+const{ runtimeConfig, ...rest}=nuxt.options
+return{
+ ...rest,
+runtimeConfig: {
+app: runtimeConfig?.app,
+public: runtimeConfig?.public,
+},
+}asunknownasNuxtOptions
 },
 asyncgetServerDebugContext(){
 if(!nuxt._debug)
@@ -124,7 +136,10 @@ export function setupGeneralRPC({
 ),
 }
 },
-getServerRuntimeConfig(): Record<string,any>{
+asyncgetServerRuntimeConfig(token: string): Promise<Record<string,any>>{
+// Exposes runtimeConfig merged with env vars, which can hold secrets, so
+// require the dev auth token.
+awaitensureDevAuthToken(token)
 // Ported from https://github.com/unjs/nitro/blob/88e79fcdb2a024c96a3d1fd272d0acbff0405013/src/runtime/config.ts#L31
 // Since this operation happends on the Nitro runtime
 constENV_PREFIX='NITRO_'
@@ -239,13 +254,17 @@ export function setupGeneralRPC({
 logger.info('Restarting Nuxt...')
 returnnuxt.callHook('restart',{ hard })
 },
-asyncrequestForAuth(info,origin?){
+asyncrequestForAuth(info){
 if(options.disableAuthorization)
 return
 
 consttoken=awaitgetDevAuthToken()
 
-origin||=`${nuxt.options.devServer.https ? 'https' : 'http'}://${nuxt.options.devServer.host==='::' ? 'localhost' : (nuxt.options.devServer.host||'localhost')}:${nuxt.options.devServer.port}`
+// Always derive the origin from the dev server config. Never trust a
+// client-supplied origin here: it is printed next to the real auth token
+// in an "open this URL" instruction, so an attacker-controlled origin
+// would turn this into a token-exfiltration lure.
+constorigin=`${nuxt.options.devServer.https ? 'https' : 'http'}://${nuxt.options.devServer.host==='::' ? 'localhost' : (nuxt.options.devServer.host||'localhost')}:${nuxt.options.devServer.port}`
 
 constROUTE_AUTH=`${nuxt.options.app.baseURL||'/'}/__nuxt_devtools__/auth`.replace(MULTIPLE_SLASHES_RE,'/')
 

packages/devtools/src/server-rpc/index.ts

@@ -1,4 +1,5 @@
 importtype{ChannelOptions}from'birpc'
+importtype{IncomingMessage}from'node:http'
 importtype{Nuxt}from'nuxt/schema'
 importtype{Plugin}from'vite'
 
@@ -10,6 +11,7 @@ import { colors } from 'consola/utils'
 import{parse,stringify}from'structured-clone-es'
 import{WS_EVENT_NAME}from'../constant'
 import{getDevAuthToken}from'../dev-auth'
+import{isAllowedRpcOrigin}from'../utils/rpc-origin'
 import{setupAnalyzeBuildRPC}from'./analyze-build'
 import{setupAssetsRPC}from'./assets'
 import{setupCustomTabRPC}from'./custom-tabs'
@@ -48,6 +50,16 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
 +colors.red(error?.message||''),
 )
 },
+// A malformed or hostile frame over the (unauthenticated) HMR socket can
+// make deserialization throw. Swallow it here so a bad frame is dropped
+// rather than surfacing as an unhandled rejection that crashes dev.
+onGeneralError(error){
+logger.error(
+colors.yellow('[nuxt-devtools] RPC channel error:\n')
++colors.red((errorasError)?.message||String(error)),
+)
+returntrue
+},
 timeout: 120_000,
 },
 )
@@ -110,7 +122,17 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
 constvitePlugin: Plugin={
 name: 'nuxt:devtools:rpc',
 configureServer(server){
-server.ws.on('connection',(ws)=>{
+server.ws.on('connection',(ws: WebSocket,request: IncomingMessage)=>{
+// Cross-site WebSocket hijacking guard: a browser page on another
+// origin can reach the (origin-less) Vite HMR socket. Only same-origin
+// browser connections may open a DevTools RPC channel. We leave the
+// HMR socket itself untouched so normal HMR keeps working.
+if(!isAllowedRpcOrigin(request?.headers?.origin,request?.headers?.host)){
+logger.warn(
+colors.yellow(`[nuxt-devtools] Ignored a cross-origin RPC connection from origin "${request?.headers?.origin}".`),
+)
+return
+}
 wsClients.add(ws)
 constchannel: ChannelOptions={
 post: d=>ws.send(JSON.stringify({

packages/devtools/src/server-rpc/timeline.ts

@@ -4,9 +4,10 @@ import { parseModule } from 'magicast'
 import{getDefaultExportOptions}from'magicast/helpers'
 import{magicastGuard}from'../utils/magicast'
 
-exportfunctionsetupTimelineRPC({ nuxt }: NuxtDevtoolsServerContext){
+exportfunctionsetupTimelineRPC({ nuxt, ensureDevAuthToken}: NuxtDevtoolsServerContext){
 return{
-asyncenableTimeline(dry: boolean){
+asyncenableTimeline(token: string,dry: boolean){
+awaitensureDevAuthToken(token)
 constfilepath=nuxt.options._nuxtConfigFile
 constsource=awaitfs.readFile(filepath,'utf-8')
 constgenerated=awaitmagicastGuard(async()=>{