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

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>
   )