fix: XSS vulnerability in block-input and support-var-input components (#24835)

web/app/components/app/configuration/base/var-highlight/index.tsx

@@ -16,19 +16,26 @@ const VarHighlight: FC<IVarHighlightProps> = ({
   return (
     <div
       key={name}
-      className={`${s.item} ${className} mb-2 flex h-5 items-center justify-center rounded-md px-1 text-xs font-medium text-primary-600`}
+      className={`${s.item} ${className} mb-2 inline-flex h-5 items-center justify-center rounded-md px-1 text-xs font-medium text-primary-600`}
     >
-      <span className='opacity-60'>{'{{'}</span>
-      <span>{name}</span>
-      <span className='opacity-60'>{'}}'}</span>
+      <span className='opacity-60'>{'{{'}</span><span>{name}</span><span className='opacity-60'>{'}}'}</span>
     </div>
   )
 }
 
+// DEPRECATED: This function is vulnerable to XSS attacks and should not be used
+// Use the VarHighlight React component instead
 export const varHighlightHTML = ({ name, className = '' }: IVarHighlightProps) => {
+  const escapedName = name
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+
   const html = `<div class="${s.item} ${className} inline-flex mb-2 items-center justify-center px-1 rounded-md h-5 text-xs font-medium text-primary-600">
   <span class='opacity-60'>{{</span>
-  <span>${name}</span>
+  <span>${escapedName}</span>
   <span class='opacity-60'>}}</span>
 </div>`
   return html

web/app/components/base/block-input/index.tsx

@@ -3,7 +3,7 @@
 import type { ChangeEvent, FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { varHighlightHTML } from '../../app/configuration/base/var-highlight'
+import VarHighlight from '../../app/configuration/base/var-highlight'
 import Toast from '../toast'
 import classNames from '@/utils/classnames'
 import { checkKeys } from '@/utils/var'
@@ -66,11 +66,24 @@ const BlockInput: FC<IBlockInputProps> = ({
     'block-input--editing': isEditing,
   })
 
-  const coloredContent = (currentValue || '')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
-    .replace(/\n/g, '<br />')
+  const renderSafeContent = (value: string) => {
+    const parts = value.split(/(\{\{[^}]+\}\}|\n)/g)
+    return parts.map((part, index) => {
+      const variableMatch = part.match(/^\{\{([^}]+)\}\}$/)
+      if (variableMatch) {
+        return (
+          <VarHighlight
+            key={`var-${index}`}
+            name={variableMatch[1]}
+          />
+        )
+      }
+      if (part === '\n')
+        return <br key={`br-${index}`} />
+
+      return <span key={`text-${index}`}>{part}</span>
+    })
+  }
 
   // Not use useCallback. That will cause out callback get old data.
   const handleSubmit = (value: string) => {
@@ -96,11 +109,11 @@ const BlockInput: FC<IBlockInputProps> = ({
 
   // Prevent rerendering caused cursor to jump to the start of the contentEditable element
   const TextAreaContentView = () => {
-    return <div
-      className={classNames(style, className)}
-      dangerouslySetInnerHTML={{ __html: coloredContent }}
-      suppressContentEditableWarning={true}
-    />
+    return (
+      <div className={classNames(style, className)}>
+        {renderSafeContent(currentValue || '')}
+      </div>
+    )
   }
 
   const placeholder = ''

web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import cn from '@/utils/classnames'
-import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
+import VarHighlight from '@/app/components/app/configuration/base/var-highlight'
 type Props = {
   isFocus?: boolean
   onFocus?: () => void
@@ -22,11 +22,24 @@ const SupportVarInput: FC<Props> = ({
   textClassName,
   readonly,
 }) => {
-  const withHightContent = (value || '')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/\{\{([^}]+)\}\}/g, varHighlightHTML({ name: '$1', className: '!mb-0' })) // `<span class="${highLightClassName}">{{$1}}</span>`
-    .replace(/\n/g, '<br />')
+  const renderSafeContent = (inputValue: string) => {
+    const parts = inputValue.split(/(\{\{[^}]+\}\}|\n)/g)
+    return parts.map((part, index) => {
+      const variableMatch = part.match(/^\{\{([^}]+)\}\}$/)
+      if (variableMatch) {
+        return (
+          <VarHighlight
+            key={`var-${index}`}
+            name={variableMatch[1]}
+          />
+        )
+      }
+      if (part === '\n')
+        return <br key={`br-${index}`} />
+
+      return <span key={`text-${index}`}>{part}</span>
+    })
+  }
 
   return (
     <div
@@ -42,9 +55,9 @@ const SupportVarInput: FC<Props> = ({
           <div
             className={cn(textClassName, 'h-full w-0 grow truncate whitespace-nowrap')}
             title={value}
-            dangerouslySetInnerHTML={{
-              __html: withHightContent,
-            }}></div>
+          >
+            {renderSafeContent(value || '')}
+          </div>
         )}
     </div>
   )