Fix highlight xss bug

web/src/components/search/SearchResult.vue

@@ -148,6 +148,7 @@ import { date } from "quasar";
 import { useI18n } from "vue-i18n";
 
 import searchService from "../../services/search";
+import { getKeywords, highlightAndSpecialChars } from "../../utils/highlight";
 
 export default defineComponent({
   name: "ComponentSearchSearchList",
@@ -436,67 +437,6 @@ export default defineComponent({
       searchTable.value.setPagination(pagination.value);
     };
 
-    // eg.1: Gold => ['Gold']
-    // eg.2: City:Paris => ['Paris']
-    // eg.3: City:Paris Gold => ['Paris', 'Gold']
-    // eg.4: City:par* => ['par']
-    // eg.5: "Paris Gold" => ['Paris Gold']
-    const getKeywords = (queryString) => {
-      if (!queryString || queryString.trim().length == 0) {
-        return [];
-      }
-
-      let arr = [];
-      // queryString + " " is for special split regular
-      // split by space, but ignore double quotation marks
-      const groups = (queryString + " ").split(/ s*(?![^"]*"\ )/);
-      for (let i = 0; i < groups.length - 1; i++) {
-        const group = groups[i];
-        if (!group || group.trim().length == 0) {
-          continue;
-        }
-        // group + ":" is for special split regular
-        // split by :, but ignore "
-        const fieldWordArr = (group + ":").split(/:s*(?![^"]*"\:)/);
-        let keyword = group;
-        if (fieldWordArr.length > 2) {
-          keyword = fieldWordArr[1];
-        }
-        // delete start and end of * and "
-        keyword = keyword.replace(/(^\**)|(\**$)/g,"").replace(/(^"*)|("*$)/g,"");
-        if (keyword.trim().length > 0) {
-          // make sure key not empty or not space
-          arr.push(keyword);
-        }
-      }
-      return arr;
-    };
-
-    const highlightResultValue = (value, keywords) => {
-      if (!value) {
-        return value;
-      }
-
-      if (typeof value == "string") {
-        for (const idx in keywords) {
-          const keyword = keywords[idx];
-          const highlightText = "<span class='highlight'>" + keyword + "</span>";
-          value = value.replaceAll(keyword, highlightText);
-        }
-      } else if (Array.isArray(value)) {
-        for (let i = 0; i < value.length; i++) {
-          value[i] = highlightResultValue(value[i], keywords);
-        }
-      } else if (typeof value == "object") {
-        for (const key in value) {
-          value[key] = highlightResultValue(value[key], keywords);
-        }
-      } else {
-        // other type direct return value.
-      }
-      return value;
-    };
-
     let lastIndexName = "";
     const searchLoading = ref(false);
     const searchData = (indexData, queryData) => {
@@ -530,10 +470,8 @@ export default defineComponent({
                 fields[keys[i]] = {};
               }
 
-              if (keywords && keywords.length > 0) {
-                // highlight keyword
-                row._source = highlightResultValue(row._source, keywords);
-              }
+              // highlight keyword and htmlSpecialChars
+              row._source = highlightAndSpecialChars(row._source, keywords);
             });
             emit("updated:fields", Object.keys(fields));
           }

web/src/utils/highlight.ts

@@ -0,0 +1,64 @@
+
+// eg.1: Gold => ['Gold']
+// eg.2: City:Paris => ['Paris']
+// eg.3: City:Paris Gold => ['Paris', 'Gold']
+// eg.4: City:par* => ['par']
+// eg.5: "Paris Gold" => ['Paris Gold']
+import {htmlSpecialChars} from "./html";
+
+export function getKeywords (queryString: string) {
+  if (!queryString || queryString.trim().length == 0) {
+    return [];
+  }
+
+  let arr = [];
+  // queryString + " " is for special split regular
+  // split by space, but ignore double quotation marks
+  const groups = (queryString + " ").split(/ s*(?![^"]*"\ )/);
+  for (let i = 0; i < groups.length - 1; i++) {
+    const group = groups[i];
+    if (!group || group.trim().length == 0) {
+      continue;
+    }
+    // group + ":" is for special split regular
+    // split by :, but ignore "
+    const fieldWordArr = (group + ":").split(/:s*(?![^"]*"\:)/);
+    let keyword = group;
+    if (fieldWordArr.length > 2) {
+      keyword = fieldWordArr[1];
+    }
+    // delete start and end of * and "
+    keyword = keyword.replace(/(^\**)|(\**$)/g,"").replace(/(^"*)|("*$)/g,"");
+    if (keyword.trim().length > 0) {
+      // make sure key not empty or not space
+      arr.push(keyword);
+    }
+  }
+  return arr;
+};
+
+export function highlightAndSpecialChars (value: any, keywords:[]) {
+  if (!value) {
+    return value;
+  }
+
+  if (typeof value == "string") {
+    value = htmlSpecialChars(value)
+    for (const idx in keywords) {
+      const keyword = htmlSpecialChars(keywords[idx]);
+      const highlightText = "<span class='highlight'>" + keyword + "</span>";
+      value = value.replaceAll(keyword, highlightText);
+    }
+  } else if (Array.isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      value[i] = highlightAndSpecialChars(value[i], keywords);
+    }
+  } else if (typeof value == "object") {
+    for (const key in value) {
+      value[key] = highlightAndSpecialChars(value[key], keywords);
+    }
+  } else {
+    // other type direct return value.
+  }
+  return value;
+};

web/src/utils/html.ts

@@ -0,0 +1,42 @@
+export function htmlSpecialChars(str: string) {
+
+  if (!str || str.length == 0) {
+    return "";
+  }
+
+  let s = "";
+  for (let i = 0; i < str.length; i++) {
+    switch (str.substring(i, i + 1)) {
+      case "<":
+        s += "&lt;";
+        break;
+      case ">":
+        s += "&gt;";
+        break;
+      case "&":
+        s += "&amp;";
+        break;
+      case " ":
+        if (str.substring(i + 1, i + 1 + 1) == " ") {
+          s += " &nbsp;";
+          i++;
+        } else {
+          s += " ";
+        }
+        break;
+      case "\"":
+        s += "&quot;";
+        break;
+      case "'":
+        s += "&#39;";
+        break;
+      case "\n":
+        s += "<br>";
+        break;
+      default:
+        s += str.substring(i, i + 1);
+        break;
+    }
+  }
+  return s;
+}