From 4755f12a56d8878e7e8e3e14a1bdc31ff17ccadb Mon Sep 17 00:00:00 2001
From: yiwenZhou <67539158+ywywZhou@users.noreply.github.com>
Date: Mon, 13 Nov 2023 19:31:18 +0800
Subject: [PATCH] =?UTF-8?q?bugfix:=20=E9=81=BF=E5=85=8Dxss=20(#7166)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* bugfix: 避免xss

* optimization: 实体名称切开展示

* optimization: 脚本种没有全局变量时提示自动关闭
---
 .../common/RenderForm/tags/TagCodeEditor.vue     |  1 +
 .../common/RenderForm/tags/TagInput.vue          | 16 ++++++++++------
 .../common/RenderForm/tags/TagTextarea.vue       | 16 ++++++++++++----
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagCodeEditor.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagCodeEditor.vue
index e438f40b05..b9804d79e5 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagCodeEditor.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagCodeEditor.vue
@@ -223,6 +223,7 @@
                         })
                     })
                     this.decorationsMap = {}
+                    this.globalVarLength = 0
                 }
             },
             onLanguageChange () {
diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue
index 0bcf4d691f..acd8f81606 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('')
                 }
-                // 用户手动输入的空格编码渲染时需要切开展示
-                domValue = domValue.replace(/&(nbsp|ensp|emsp|thinsp|zwnj|zwj);/g, ($0, $1) => {
+                // 将html标签拆成文本形式
+                domValue = domValue.replace(/(<|>)/g, ($0, $1) => `<span>${$1}</span>`)
+                // 用户手动输入的实体字符渲染时需要切开展示
+                domValue = domValue.replace(/&(nbsp|ensp|emsp|thinsp|zwnj|zwj|quot|apos|lt|gt|amp|cent|pound|yen|euro|sect|copy|reg|trade|times|divide);/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..cc8e5f8f45 100644
--- a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
+++ b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue
@@ -386,8 +386,10 @@
                             return item.type === 'button' ? item.value : item.textContent
                         }).join('')
                     }
-                    // 用户手动输入的空格编码渲染时需要切开展示
-                    domValue = domValue.replace(/&(nbsp|ensp|emsp|thinsp|zwnj|zwj);/g, ($0, $1) => {
+                    // 将html标签拆成文本形式
+                    domValue = domValue.replace(/(<|>)/g, ($0, $1) => `<span>${$1}</span>`)
+                    // 用户手动输入的实体字符渲染时需要切开展示
+                    domValue = domValue.replace(/&(nbsp|ensp|emsp|thinsp|zwnj|zwj|quot|apos|lt|gt|amp|cent|pound|yen|euro|sect|copy|reg|trade|times|divide);/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
                     })
@@ -602,6 +607,9 @@
                 background: #eaebf0;
             }
         }
+        /deep/div {
+            word-break: break-all;
+        }
         &.input-before::before {
             content: attr(data-placeholder);
             color: #c4c6cc;