security: harden highlight directive against html injection

cmdb-ui/src/directive/highlight/highlight.js

@@ -1,14 +1,34 @@
 import './highlight.less'
 
+const escapeRegExp = (value) => {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+const escapeHtml = (value) => {
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+const sanitizeClassName = (value) => {
+  const className = value ? `${value}` : 'ops-text-highlight'
+  return /^[A-Za-z0-9_-]+$/.test(className) ? className : 'ops-text-highlight'
+}
+
 const highlight = (el, binding) => {
-    if (binding.value.value) {
-        let testValue = `${binding.value.value}`
-        if (['(', ')', '$'].includes(testValue)) {
-            testValue = `\\${testValue}`
-        }
-        const regex = new RegExp(`(${testValue})`, 'gi')
-        el.innerHTML = el.innerText.replace(regex, `<span class='${binding.value.class ?? 'ops-text-highlight'}'>$1</span>`)
-    }
+  const options = (binding && binding.value) || {}
+  if (options.value === undefined || options.value === null || `${options.value}` === '') {
+    return
+  }
+
+  const text = escapeHtml(el.innerText || '')
+  const keyword = escapeRegExp(`${options.value}`)
+  const className = sanitizeClassName(options.class)
+  const regex = new RegExp(`(${keyword})`, 'gi')
+  el.innerHTML = text.replace(regex, `<span class='${className}'>$1</span>`)
 }
 
 export default highlight