fix(client): XSS vulnerability in components tab (#726)

Author: xuzuodong

packages/applet/src/components/state/StateFieldViewer.vue

@@ -2,7 +2,7 @@
 import type { CustomInspectorState, InspectorCustomState } from '@vue/devtools-kit'
 import type { EditorAddNewPropType } from '~/composables/state-editor'
 import { rpc } from '@vue/devtools-core'
-import { DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from '@vue/devtools-kit'
+import { DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, escape, formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from '@vue/devtools-kit'
 import { isArray, isObject, sortByKey } from '@vue/devtools-shared'
 import { vTooltip, VueButton, VueIcon } from '@vue/devtools-ui'
 import { computed, ref, watch } from 'vue'
@@ -71,7 +71,7 @@ const normalizedDisplayedValue = computed(() => {
     const _value = type.value === 'custom' && !_type ? `"${displayedValue.value}"` : (displayedValue.value === '' ? `""` : displayedValue.value)
     const normalizedType = type.value === 'custom' && _type === 'ref' ? getInspectorStateValueType(_value) : type.value
     const selectText = type.value === 'string' ? 'select-text' : ''
-    const result = `<span title="${type.value === 'string' ? props.data.value : ''}" class="${normalizedType}-state-type flex whitespace-nowrap ${selectText}">${_value}</span>`
+    const result = `<span title="${type.value === 'string' ? escape(props.data.value as unknown as string) : ''}" class="${normalizedType}-state-type flex whitespace-nowrap ${selectText}">${_value}</span>`
 
     if (extraDisplayedValue)
       return `${result} <span class="text-gray-500">(${extraDisplayedValue})</span>`

packages/devtools-kit/src/index.ts

@@ -12,6 +12,7 @@ export type * from './core/component-inspector'
 export { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED } from './core/component/state/constants'
 export { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from './core/component/state/format'
 export { isPlainObject } from './core/component/state/is'
+export { escape } from './core/component/state/util'
 export type * from './core/component/types'
 export { updateDevToolsClientDetected } from './core/devtools-client/detected'
 export type * from './core/open-in-editor'