webapp: highlight match

webapp/main.py

@@ -20,6 +20,9 @@
 
 def row_to_dict(row: aiosqlite.Row) -> dict:
     row_dict = dict(row)
+    if "metadata" in row_dict:
+        metadata = json.loads(row_dict.pop("metadata"))
+        row_dict.update(metadata)
     extra_data = json.loads(row_dict.pop("extra_data"))
     row_dict.update(extra_data)
     return row_dict
@@ -118,7 +121,7 @@ async def api_flow_get(request):
     cursor = await eve_database.execute(
         (
             "SELECT id, ts_start, ts_end, src_ipport, dest_ipport, dest_port, "
-            "pcap_filename, proto, app_proto, extra_data "
+            "pcap_filename, proto, app_proto, metadata, extra_data "
             "FROM flow WHERE id = ?"
         ),
         [flow_id],

webapp/static/js/flowdisplay.js

@@ -19,6 +19,9 @@ const MAGIC_EXT = {
   'Zip archive': 'zip'
 }
 
+// Payloads are escaped using this function
+const htmlEscape = (str) => str.replace(/[\u00A0-\u9999<>&]/g, i => '&#' + i.charCodeAt(0) + ';')
+
 /**
  * Flow display
  */
@@ -255,7 +258,12 @@ class FlowDisplay {
         fetch(fileHref, {}).then((d) => d.arrayBuffer()).then((d) => {
           const byteArray = new Uint8Array(d)
           const utf8Decoder = new TextDecoder()
-          utf8View.textContent = utf8Decoder.decode(byteArray)
+          let content = htmlEscape(utf8Decoder.decode(byteArray))
+          flow.flow.flowvars?.forEach(data => {
+            const match = htmlEscape(data.match)
+            content = content.replaceAll(match, `<mark>${match}</mark>`)
+          })
+          utf8View.innerHTML = content
           hexView.textContent = this.renderHexDump(byteArray)
           hexView.classList.add('d-none')
           mainEl.appendChild(utf8View)
@@ -322,7 +330,12 @@ class FlowDisplay {
         codeElUtf8.classList.add('text-white')
         codeElUtf8.classList.toggle('bg-danger', chunk.server_to_client === 0)
         codeElUtf8.classList.toggle('bg-success', chunk.server_to_client === 1)
-        codeElUtf8.textContent = utf8Decoder.decode(byteArray)
+        let content = htmlEscape(utf8Decoder.decode(byteArray))
+        flow.flow.flowvars?.forEach(data => {
+          const match = htmlEscape(data.match)
+          content = content.replaceAll(match, `<mark>${match}</mark>`)
+        })
+        codeElUtf8.innerHTML = content
         utf8View.appendChild(codeElUtf8)
 
         const codeElHex = document.createElement('code')