From 5703c1f8ebd94def4accd9b4d11cfecf30358a50 Mon Sep 17 00:00:00 2001
From: v_xugzhou <941071842@qq.com>
Date: Mon, 13 Nov 2023 14:55:33 +0800
Subject: [PATCH] =?UTF-8?q?bugfix:=20=E9=81=BF=E5=85=8Dxss?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/RenderForm/tags/TagInput.vue   | 12 ++++++++----
 .../common/RenderForm/tags/TagTextarea.vue           |  9 +++++++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
index 0bcf4d691f..2867372e2b 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
@@ -417,13 +417,13 @@
                         return item.type === 'button' ? item.value : item.textContent
                     }).join('')
                 }
+                // 将html标签拆成文本形式
+                domValue = domValue.replace(/(<|>)/g, ($0, $1) => `<span>${$1}</span>`)
                 // 用户手动输入的空格编码渲染时需要切开展示
                 domValue = domValue.replace(/&(nbsp|ensp|emsp|thinsp|zwnj|zwj);/g, ($0, $1) => {
                     return `<span>&</span><span>${$1}</span><span>;</span>`
                 })
 
-                // 初始化时是通过innerText进行复制的，如果有多个连续空格则只会显示一个，所以需手动将转为&nbsp;
-                domValue = domValue.replace(/( )/g, '&nbsp;')
                 const innerHtml = domValue.replace(varRegexp, (match, $0) => {
                     let isExistVar = false
                     if ($0) {
@@ -437,7 +437,11 @@
                     }
                     if (isExistVar) {
                         const randomId = Math.random().toString().slice(-6)
-                        return `<input type="button" class="var-tag" id="${randomId}" value=${match} />` // 两边留空格保持间距
+                        // 将装转的尖括号恢复原样
+                        let value = match.replace(/<span>(<|>)<\/span>/g, ($0, $1) => $1)
+                        // 将双引号转为实体字符
+                        value = value.replace(/"/g, '&quot;')
+                        return `<input type="button" class="var-tag" id="${randomId}" value="${value}" />` // 两边留空格保持间距
                     }
                     return match
                 })
@@ -593,7 +597,7 @@
         line-height: 18px;
         padding: 7px 0;
         color: #63656e;
-        white-space: nowrap;
+        white-space: pre;
         overflow: hidden;
         /deep/.var-tag {
             margin-right: 1px;
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
index 7df465f3c9..2212208699 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
@@ -386,6 +386,8 @@
                             return item.type === 'button' ? item.value : item.textContent
                         }).join('')
                     }
+                    // 将html标签拆成文本形式
+                    domValue = domValue.replace(/(<|>)/g, ($0, $1) => `<span>${$1}</span>`)
                     // 用户手动输入的空格编码渲染时需要切开展示
                     domValue = domValue.replace(/&(nbsp|ensp|emsp|thinsp|zwnj|zwj);/g, ($0, $1) => {
                         return `<span>&</span><span>${$1}</span><span>;</span>`
@@ -406,9 +408,12 @@
                             })
                         }
                         if (isExistVar) {
-                            // 两边留空格保持间距
                             const randomId = Math.random().toString().slice(-6)
-                            return `<input type="button" class="var-tag" id="tag_${randomId}" value=${match} />`
+                            // 将装转的尖括号恢复原样
+                            let value = match.replace(/<span>(<|>)<\/span>/g, ($0, $1) => $1)
+                            // 将双引号转为实体字符
+                            value = value.replace(/"/g, '&quot;')
+                            return `<input type="button" class="var-tag" id="tag_${randomId}" value="${value}" />`
                         }
                         return match
                     })