sonar scanner 14 left. XSS fixed

src/views/Compare/Dashboard/Compare.vue

@@ -9,9 +9,8 @@
               <p class="h1">{{ i18next.t("Compare.timeUsage") }}</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,10 +18,9 @@
               <p class="h1">{{ i18next.t("Compare.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">
+                  @click="handleClick(item.tagId)" class="cursor-pointer hover:text-primary">
-                  <a :href="item.tagId">
                     {{ item.label }}
-                  </a></li>
+                  </li>
               </ul>
             </div>
           </section>
@@ -263,6 +261,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'}