From 1e0796e56e5a8b4e8f54213c56704770845d4b12 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Tue, 13 Aug 2024 10:44:11 +0800
Subject: [PATCH] sonar 12 left. XSS on Performance page

---
 src/views/Discover/Performance/index.vue | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/views/Discover/Performance/index.vue b/src/views/Discover/Performance/index.vue
index 68b450d..3eaf897 100644
--- a/src/views/Discover/Performance/index.vue
+++ b/src/views/Discover/Performance/index.vue
@@ -9,9 +9,8 @@
               <p class="h1">Time Usage</p>
               <ul class="list-disc list-inside text-sm leading-5 pl-3">
                 <li v-for="(item, index) in timeUsageData" :key="index" :class="{active: isActive === item.tagId}"
-                  @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">
+                  @click="handleClick(item.tagId)" class="cursor-pointer hover:text-primary">
                     {{ item.label }}
-                  </a>
                 </li>
               </ul>
             </div>
@@ -19,9 +18,8 @@
               <p class="h1">Frequency</p>
               <ul class="list-disc list-inside text-sm leading-5 pl-3">
                 <li v-for="(item, index) in frequencyData" :key="index" :class="{active: isActive === item.tagId}"
-                  @click="isActive = item.tagId" class="cursor-pointer hover:text-primary"><a :href="item.tagId">
+                  @click="handleClick(item.tagId)" class="cursor-pointer hover:text-primary">
                     {{ item.label }}
-                  </a>
                   </li>
               </ul>
             </div>
@@ -233,6 +231,24 @@ export default {
     }
   },
   methods: {
+    handleClick(tagId) {
+      this.isActive = tagId;
+
+      // 在進行導航前，檢查或處理 tagId 的值
+      if (this.isSafeTagId(tagId)) {
+        window.location.href = tagId; // 確保這個路徑是安全的
+        // 或者使用 Vue Router 進行導航
+        // this.$router.push({ path: tagId });
+      } else {
+        console.warn("不安全的 tagId: ", tagId);
+      }
+    },
+    // 避免直接使用動態 href：改用安全的方法來處理動態導航，避免直接將未經驗證的數據綁定到 href 屬性。
+    isSafeTagId(tagId) {
+      // 檢查 tagId 是否符合安全的格式（例如只允許特定的模式或路徑）
+      const pattern = /^#?[a-zA-Z0-9-_\/]*$/; // 例如： #waitingTime
+      return pattern.test(tagId);
+    },
     /**
      * 手刻折線圖 x label 時間刻度
      * @param { object } valueData {min: '2022-02-20T19:54:12', max: '2023-11-27T07:21:53'}