fix(devtools): require dev auth token for openInEditor and options RPC methods (#1039)

Author: antfubot

package.json

@@ -14,7 +14,8 @@
 "lint": "eslint --cache .",
 "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
 "release": "pnpm test && bumpp -r -x \"pnpm run changelog\" --all",
-"test": "pnpm lint",
+"test": "pnpm lint && pnpm test:unit",
+"test:unit": "pnpm -r --filter \"./packages/*\" run test:unit",
 "docs": "nuxi dev docs",
 "docs:build": "CI=true nuxi generate docs",
 "typecheck": "vue-tsc --noEmit",

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

@@ -31,8 +31,8 @@ export interface ServerFunctions {
 
 // Options
 getOptions: <TextendskeyofNuxtDevToolsOptions>(tab: T)=>Promise<NuxtDevToolsOptions[T]>
-updateOptions: <TextendskeyofNuxtDevToolsOptions>(tab: T,settings: Partial<NuxtDevToolsOptions[T]>)=>Promise<void>
-clearOptions: ()=>Promise<void>
+updateOptions: <TextendskeyofNuxtDevToolsOptions>(token: string,tab: T,settings: Partial<NuxtDevToolsOptions[T]>)=>Promise<void>
+clearOptions: (token: string)=>Promise<void>
 
 // Updates
 checkForUpdateFor: (name: string)=>Promise<PackageUpdateInfo|undefined>
@@ -68,7 +68,7 @@ export interface ServerFunctions {
 telemetryEvent: (payload: object,immediate?: boolean)=>void
 customTabAction: (name: string,action: number)=>Promise<boolean>
 runWizard: <TextendsWizardActions>(token: string,name: T, ...args: GetWizardArgs<T>)=>Promise<void>
-openInEditor: (filepath: string)=>Promise<boolean>
+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>

packages/devtools/client/composables/editor.ts

@@ -1,6 +1,7 @@
 import{useClipboard}from'@vueuse/core'
 import{useRouter}from'#app/composables/router'
 import{devtoolsUiShowNotification}from'#imports'
+import{ensureDevAuthToken}from'./dev-auth'
 import{rpc}from'./rpc'
 import{useServerConfig,useVirtualFiles}from'./state'
 import{useCurrentVirtualFile}from'./state-routes'
@@ -33,7 +34,7 @@ export function useOpenInEditor() {
 router.push('/modules/virtual-files')
 }
 else{
-awaitrpc.openInEditor(filepath)
+awaitrpc.openInEditor(awaitensureDevAuthToken(),filepath)
 }
 }
 }

packages/devtools/client/composables/storage-options.ts

@@ -3,6 +3,7 @@ import type { NuxtDevToolsOptions } from '../../types'
 import{watchDebounced}from'@vueuse/core'
 import{reactive,toRefs}from'vue'
 import{defaultTabOptions}from'../../src/constant'
+import{devAuthToken,isDevAuthed}from'./dev-auth'
 import{rpc}from'./rpc'
 
 constcache=newMap<string,any>()
@@ -22,7 +23,12 @@ function getTabOptions<T extends keyof NuxtDevToolsOptions>(tab: T): ToRefs<Nuxt
 watchDebounced(
 source,
 async(options)=>{
-rpc.updateOptions(tab,options)
+// Persisting options writes to disk and is a token-gated action.
+// Only persist when the session is already authenticated, and never
+// trigger an auth prompt from this passive watcher.
+if(!isDevAuthed.value||!devAuthToken.value)
+return
+rpc.updateOptions(devAuthToken.value,tab,options)
 },
 {deep: true,flush: 'post',debounce: 500,maxWait: 1000},
 )

packages/devtools/client/pages/settings.vue

@@ -2,6 +2,7 @@
 import { watchEffect } from'vue'
 import { definePageMeta } from'#imports'
 import { useClient } from'~/composables/client'
+import { ensureDevAuthToken, isDevAuthed } from'~/composables/dev-auth'
 import { rpc } from'~/composables/rpc'
 import { getCategorizedTabs, useAllTabs } from'~/composables/state-tabs'
 import { telemetryEnabled } from'~/composables/telemetry'
@@ -62,28 +63,48 @@ const MinimizeInactiveOptions = [
 
 const categories =getCategorizedTabs(useAllTabs())
 
+// Persisting settings is a token-gated action (see storage-options watcher).
+// When the user deliberately edits a setting on this page, ensure the session
+// is authenticated once so the change is actually written to disk.
+let authEnsured =false
+asyncfunction onEdit() {
+if (authEnsured||isDevAuthed.value)
+return
+authEnsured=true
+try {
+awaitensureDevAuthToken()
+ }
+catch {
+authEnsured=false
+ }
+}
+
 function toggleTab(name:string, v?:boolean) {
+onEdit()
 if (v)
 hiddenTabs.value=hiddenTabs.value.filter(i=>i!==name)
 else
 hiddenTabs.value.push(name)
 }
 
 function toggleTabCategory(name:string, v?:boolean) {
+onEdit()
 if (v)
 hiddenTabCategories.value=hiddenTabCategories.value.filter(i=>i!==name)
 else
 hiddenTabCategories.value.push(name)
 }
 
 function togglePinTab(name:string) {
+onEdit()
 if (pinnedTabs.value.includes(name))
 pinnedTabs.value=pinnedTabs.value.filter(i=>i!==name)
 else
 pinnedTabs.value.push(name)
 }
 
 function pinMove(name:string, delta:number) {
+onEdit()
 const index =pinnedTabs.value.indexOf(name)
 if (index===-1)
 return
@@ -105,7 +126,7 @@ async function clearOptions() {
 if (key.startsWith('nuxt-devtools-'))
 localStorage.removeItem(key)
  })
-awaitrpc.clearOptions()
+awaitrpc.clearOptions(awaitensureDevAuthToken())
 client.value?.app?.reload?.()
 window.location.reload()
  }
@@ -200,18 +221,18 @@ watchEffect(() => {
  </div>
  <divmx--2my1h-1pxborder="b base"op75 />
  <p>UI Scale</p>
- <NSelectv-model="scale" n="primary">
+ <NSelectv-model="scale" n="primary" @update:model-value="onEdit">
  <optionv-for="i of scaleOptions":key="i[0]":value="i[1]">
  {{ i[0] }}
  </option>
  </NSelect>
  <divmx--2my1h-1pxborder="b base"op75 />
- <NCheckboxv-model="sidebarExpanded" n-primary>
+ <NCheckboxv-model="sidebarExpanded" n-primary @update:model-value="onEdit">
  <span>
  Expand Sidebar
  </span>
  </NCheckbox>
- <NCheckboxv-model="sidebarScrollable" :disabled="sidebarExpanded" n-primary>
+ <NCheckboxv-model="sidebarScrollable" :disabled="sidebarExpanded" n-primary @update:model-value="onEdit">
  <span>
  Scrollable Sidebar
  </span>
@@ -222,24 +243,24 @@ watchEffect(() => {
  Features
  </h3>
  <NCard p4 flex="~ col gap-2">
- <NCheckboxv-model="interactionCloseOnOutsideClick" n-primary>
+ <NCheckboxv-model="interactionCloseOnOutsideClick" n-primary @update:model-value="onEdit">
  <span>Close DevTools when clicking outside</span>
  </NCheckbox>
 <!-- <NCheckbox v-model="showExperimentalFeatures" n-primary>
  <span>Show experimental features</span>
  </NCheckbox> -->
- <NCheckboxv-model="showHelpButtons" n-primary>
+ <NCheckboxv-model="showHelpButtons" n-primary @update:model-value="onEdit">
  <span>Show help buttons</span>
  </NCheckbox>
 
- <NCheckboxv-model="showPanel" n-primary>
+ <NCheckboxv-model="showPanel" n-primary @update:model-value="onEdit">
  <span>Show the floating panel</span>
  </NCheckbox>
 
  <divmx--2my1h-1pxborder="b base"op75 />
 
  <p>Minimize floating panel on inactive</p>
- <NSelectv-model.number="minimizePanelInactive" n-primary>
+ <NSelectv-model.number="minimizePanelInactive" n-primary @update:model-value="onEdit">
  <optionv-for="i of MinimizeInactiveOptions":key="i[0]":value="i[1]">
  {{ i[0] }}
  </option>
@@ -248,7 +269,7 @@ watchEffect(() => {
  <divmx--2my1h-1pxborder="b base"op75 />
 
  <p>Open In Editor</p>
- <NSelectv-model="openInEditor" n-primary>
+ <NSelectv-model="openInEditor" n-primary @update:model-value="onEdit">
  <optionv-for="i of editorOptions":key="i[0]":value="i[1]">
  {{ i[0] }}
  </option>

packages/devtools/client/plugins/global.ts

@@ -2,6 +2,7 @@ import type { NuxtDevtoolsHostClient } from '@nuxt/devtools-kit/types'
 import{triggerRef}from'vue'
 import{defineNuxtPlugin,useRouter}from'#imports'
 import{useClient}from'../composables/client'
+import{ensureDevAuthToken}from'../composables/dev-auth'
 import{rpc}from'../composables/rpc'
 
 exportdefaultdefineNuxtPlugin(()=>{
@@ -13,8 +14,8 @@ export default defineNuxtPlugin(() => {
 client.value.revision.value+=1
 }
 
-functiononInspectorClick(path: string){
-rpc.openInEditor(path)
+asyncfunctiononInspectorClick(path: string){
+rpc.openInEditor(awaitensureDevAuthToken(),path)
 }
 
 functionsetupClient(_client: NuxtDevtoolsHostClient){

packages/devtools/package.json

@@ -43,7 +43,8 @@
 "dev:playground": "pnpm build && nuxi dev playground",
 "dev:prepare": "pnpm run stub && nuxi prepare client",
 "prepare": "tsx scripts/prepare.ts",
-"prepack": "pnpm build"
+"prepack": "pnpm build",
+"test:unit": "vitest run"
  },
 "peerDependencies": {
 "@vitejs/devtools": "*",
@@ -139,6 +140,7 @@
 "vanilla-jsoneditor": "catalog:frontend",
 "vis-data": "catalog:frontend",
 "vis-network": "catalog:frontend",
+"vitest": "catalog:cli",
 "vue-tsc": "catalog:cli",
 "vue-virtual-scroller": "catalog:frontend"
  }

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

@@ -1,5 +1,5 @@
 importtype{ModuleOptions,NuxtLayout}from'@nuxt/schema'
-importtype{Component,NuxtApp,NuxtPage}from'nuxt/schema'
+importtype{Component,NuxtApp,NuxtOptions,NuxtPage}from'nuxt/schema'
 importtype{Import,Unimport}from'unimport'
 importtype{AutoImportsWithMetadata,HookInfo,NuxtDevtoolsServerContext,ServerDebugContext,ServerFunctions}from'../types'
 import{existsSync}from'node:fs'
@@ -86,8 +86,8 @@ export function setupGeneralRPC({
 })
 
 return{
-getServerConfig(){
-returnnuxt.options
+getServerConfig(): NuxtOptions{
+returnnuxt.optionsasunknownasNuxtOptions
 },
 asyncgetServerDebugContext(){
 if(!nuxt._debug)
@@ -191,7 +191,8 @@ export function setupGeneralRPC({
 getServerHooks(): HookInfo[]{
 returnObject.values(serverHooks)
 },
-asyncopenInEditor(input: string): Promise<boolean>{
+asyncopenInEditor(token: string,input: string): Promise<boolean>{
+awaitensureDevAuthToken(token)
 if(input.startsWith('./')||!ABSOLUTE_PATH_RE.test(input))
 input=resolve(process.cwd(),input)
 

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

@@ -8,7 +8,7 @@ export function getOptions() {
 returnoptions
 }
 
-exportfunctionsetupOptionsRPC({ nuxt }: NuxtDevtoolsServerContext){
+exportfunctionsetupOptionsRPC({ nuxt, ensureDevAuthToken}: NuxtDevtoolsServerContext){
 asyncfunctiongetOptions<TextendskeyofNuxtDevToolsOptions>(tab: T): Promise<NuxtDevToolsOptions[T]>{
 if(!options||options[tab]){
 options=defaultTabOptions
@@ -28,15 +28,17 @@ export function setupOptionsRPC({ nuxt }: NuxtDevtoolsServerContext) {
 
 getOptions('ui')
 
-asyncfunctionclearOptions(){
+asyncfunctionclearOptions(token: string){
+awaitensureDevAuthToken(token)
 options=undefined
 awaitclearLocalOptions({
 root: nuxt.options.rootDir,
 })
 }
 
 return{
-asyncupdateOptions(tab,_settings){
+asyncupdateOptions(token,tab,_settings){
+awaitensureDevAuthToken(token)
 constsettings=awaitgetOptions(tab)
 Object.assign(settings,_settings)
 awaitwriteLocalOptions(

packages/devtools/test/server-rpc-auth.test.ts

@@ -0,0 +1,99 @@
+import{mkdtemp}from'node:fs/promises'
+import{tmpdir}from'node:os'
+import{join}from'node:path'
+import{createHooks}from'hookable'
+import{beforeEach,describe,expect,it,vi}from'vitest'
+import{setupGeneralRPC}from'../src/server-rpc/general'
+import{setupOptionsRPC}from'../src/server-rpc/options'
+
+constVALID_TOKEN='valid-token'
+
+// Mutating RPC methods must gate on the dev auth token, exactly like the rest
+// of the RPC surface (restartNuxt, storage writes, npm, terminals, ...). These
+// tests assert the guard runs before any side effect.
+functioncreateAuthStub(){
+returnvi.fn(async(token: string)=>{
+if(token!==VALID_TOKEN)
+thrownewError('[Nuxt DevTools] Invalid dev auth token.')
+})
+}
+
+functioncreateNuxtStub(rootDir: string){
+consthooks=createHooks()
+return{
+ hooks,
+hook: hooks.hook.bind(hooks),
+callHook: hooks.callHook.bind(hooks),
+options: { rootDir },
+}asany
+}
+
+describe('options rpc auth',()=>{
+letrootDir: string
+
+beforeEach(async()=>{
+rootDir=awaitmkdtemp(join(tmpdir(),'nuxt-devtools-test-'))
+// sandbox where local options are persisted (see getHomeDir)
+process.env.XDG_CONFIG_HOME=rootDir
+})
+
+it('updateOptions rejects an invalid token',async()=>{
+constensureDevAuthToken=createAuthStub()
+constrpc=setupOptionsRPC({nuxt: createNuxtStub(rootDir), ensureDevAuthToken }asany)
+
+awaitexpect(rpc.updateOptions('invalid','behavior',{openInEditor: 'malicious'}))
+.rejects
+.toThrow(/invaliddevauthtoken/i)
+expect(ensureDevAuthToken).toHaveBeenCalledWith('invalid')
+})
+
+it('updateOptions proceeds with a valid token',async()=>{
+constensureDevAuthToken=createAuthStub()
+constrpc=setupOptionsRPC({nuxt: createNuxtStub(rootDir), ensureDevAuthToken }asany)
+
+awaitexpect(rpc.updateOptions(VALID_TOKEN,'ui',{scale: 2})).resolves.toBeUndefined()
+expect(ensureDevAuthToken).toHaveBeenCalledWith(VALID_TOKEN)
+})
+
+it('clearOptions rejects an invalid token',async()=>{
+constensureDevAuthToken=createAuthStub()
+constrpc=setupOptionsRPC({nuxt: createNuxtStub(rootDir), ensureDevAuthToken }asany)
+
+awaitexpect(rpc.clearOptions('invalid')).rejects.toThrow(/invaliddevauthtoken/i)
+expect(ensureDevAuthToken).toHaveBeenCalledWith('invalid')
+})
+})
+
+describe('general rpc auth',()=>{
+functioncreateGeneralRPC(ensureDevAuthToken: ReturnType<typeofcreateAuthStub>){
+returnsetupGeneralRPC({
+nuxt: createNuxtStub(process.cwd()),
+options: {},
+refresh: vi.fn(),
+ ensureDevAuthToken,
+openInEditorHooks: [],
+}asany)
+}
+
+it('openInEditor rejects an invalid token before touching the filesystem',async()=>{
+constensureDevAuthToken=createAuthStub()
+constgeneral=createGeneralRPC(ensureDevAuthToken)
+
+awaitexpect(general.openInEditor('invalid','./some-file.ts'))
+.rejects
+.toThrow(/invaliddevauthtoken/i)
+expect(ensureDevAuthToken).toHaveBeenCalledWith('invalid')
+})
+
+it('openInEditor proceeds past auth with a valid token',async()=>{
+constensureDevAuthToken=createAuthStub()
+constgeneral=createGeneralRPC(ensureDevAuthToken)
+
+// A non-existent file resolves to `false` (never spawns an editor), which
+// proves the auth guard passed rather than short-circuiting with a throw.
+awaitexpect(general.openInEditor(VALID_TOKEN,'/definitely/not/a/real/path-xyz'))
+.resolves
+.toBe(false)
+expect(ensureDevAuthToken).toHaveBeenCalledWith(VALID_TOKEN)
+})
+})