diff --git a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
index 3feacd22ab..185e107ca6 100644
--- a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
+++ b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
@@ -58,6 +58,8 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
   const coloredContent = (tempValue || '')
     .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
     .replace(/\n/g, '<br />')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
 
 
   const handleEdit = () => {
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index e5884bf3fb..3417d06de4 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -75,7 +75,7 @@ const PromptValuePanel: FC<IPromptValuePanelProps> = ({
               <div
                 className="max-h-48 overflow-y-auto text-sm text-gray-700 break-all"
                 dangerouslySetInnerHTML={{
-                  __html: format(replaceStringWithValuesWithFormat(promptTemplate, promptVariables, inputs)),
+                  __html: format(replaceStringWithValuesWithFormat(promptTemplate.replace(/</g, '&lt;').replace(/>/g, '&gt;'), promptVariables, inputs)),
                 }}
               >
               </div>
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index 1b9758593f..440fd63d13 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -70,6 +70,8 @@ const BlockInput: FC<IBlockInputProps> = ({
   const coloredContent = (currentValue || '')
     .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
     .replace(/\n/g, '<br />')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
 
   // Not use useCallback. That will cause out callback get old data.
   const handleSubmit = () => {