sonar 12 left. XSS on Performance page

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'}