From 9ee9290c8971907525e82f51ad840c0692534c1a Mon Sep 17 00:00:00 2001
From: STEVEN <imrealleonardo@gmail.com>
Date: Fri, 11 Feb 2022 18:31:01 +0800
Subject: [PATCH] fix: escape html string before v-html (#549)

---
 .../AsidePanel/QueryHistoryContainer.vue          |  8 ++++++--
 .../SqlEditor/AsidePanel/SavedQueryContainer.vue  | 15 +++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/SqlEditor/AsidePanel/QueryHistoryContainer.vue b/frontend/src/views/SqlEditor/AsidePanel/QueryHistoryContainer.vue
index ca725540ec3add..7c06b5184564f5 100644
--- a/frontend/src/views/SqlEditor/AsidePanel/QueryHistoryContainer.vue
+++ b/frontend/src/views/SqlEditor/AsidePanel/QueryHistoryContainer.vue
@@ -72,6 +72,7 @@
 </template>
 
 <script lang="ts" setup>
+import { escape } from "lodash-es";
 import { computed, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { useClipboard } from "@vueuse/core";
@@ -140,8 +141,11 @@ const data = computed(() => {
     return {
       ...history,
       formatedStatement: state.search
-        ? getHighlightHTMLByKeyWords(history.statement, state.search)
-        : history.statement,
+        ? getHighlightHTMLByKeyWords(
+            escape(history.statement),
+            escape(state.search)
+          )
+        : escape(history.statement),
     };
   });
 });
diff --git a/frontend/src/views/SqlEditor/AsidePanel/SavedQueryContainer.vue b/frontend/src/views/SqlEditor/AsidePanel/SavedQueryContainer.vue
index 36a6e3a4f01316..a2836c1b454410 100644
--- a/frontend/src/views/SqlEditor/AsidePanel/SavedQueryContainer.vue
+++ b/frontend/src/views/SqlEditor/AsidePanel/SavedQueryContainer.vue
@@ -93,6 +93,7 @@
 </template>
 
 <script lang="ts" setup>
+import { escape } from "lodash-es";
 import { computed, reactive, ref, nextTick } from "vue";
 import { useI18n } from "vue-i18n";
 import {
@@ -178,11 +179,17 @@ const data = computed(() => {
     return {
       ...savedQuery,
       formatedName: state.search
-        ? getHighlightHTMLByKeyWords(savedQuery.name, state.search)
-        : savedQuery.name,
+        ? getHighlightHTMLByKeyWords(
+            escape(savedQuery.name),
+            escape(state.search)
+          )
+        : escape(savedQuery.name),
       formatedStatement: state.search
-        ? getHighlightHTMLByKeyWords(savedQuery.statement, state.search)
-        : savedQuery.statement,
+        ? getHighlightHTMLByKeyWords(
+            escape(savedQuery.statement),
+            escape(state.search)
+          )
+        : escape(savedQuery.statement),
     };
   });
 });