From b20eec31d560a3dcdcc606e66b8fd6e5f972599d Mon Sep 17 00:00:00 2001 From: Matthew Sexton <3129598+signus@users.noreply.github.com> Date: Tue, 20 Feb 2024 22:23:43 -0700 Subject: [PATCH 1/3] Adds basic query-code syntax highlight changing Adds the ability to modify the DOM to change the PrismJS class utilized in the `query-code` block to update with the new class and remove the previously used class prior to adding the new one. This can help to ease formatting for visibilty as well as promote syntax definitions for the other target query languages. --- static/css/style.css | 15 ++++++++++++++- static/js/index.js | 41 +++++++++++++++++++++++++++++++++++++++++ templates/index.html | 4 +++- 3 files changed, 58 insertions(+), 2 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 8274bd5..7467643 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -61,7 +61,13 @@ pre[class*="language-yaml"] { white-space: pre !important; } -div[class*="language-splunk"], +code[class*="language-kusto"], +code[class*="language-kusto"] *, +pre[class*="language-kusto"] { + word-break: break-word !important; + white-space: pre-line !important; +} + code[class*="language-splunk"], code[class*="language-splunk"] *, pre[class*="language-splunk"] { @@ -69,6 +75,13 @@ pre[class*="language-splunk"] { white-space: pre-line !important; } +code[class*="language-sql"], +code[class*="language-sql"] *, +pre[class*="language-sql"] { + word-break: break-word !important; + white-space: pre-line !important; +} + :not(pre) > code[class*="language-"], pre[class*="language-"] { background-color: var(--sigma-dark) !important; diff --git a/static/js/index.js b/static/js/index.js index 2bb9b5d..4d4b9cc 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -101,6 +101,7 @@ window.onload = function () { // define onchange handler for select dropdowns document.getElementById("select-backend").onchange = function () { + updateBackendSyntax(); filterFormatOptions(); filterPipelineOptions(); generateCli(); @@ -309,3 +310,43 @@ function filterPipelineOptions() { }); }); } + +// Updates the query-code code block with a prismjs class mapped to the language +function updateBackendSyntax() { + let backend = getSelectValue("select-backend"); + let language = ""; + let prev_language = ""; + + // Determines what class was previously present upon a new backend selection + let prev_lang_class = document.getElementById("query-code").classList; + for (let prev of prev_lang_class) { + if (prev.match(/^language-\w+(-\w+)?/)) { + prev_language = prev + } + } + + // TODO: Find a more effective method (e.g. Enum) to implement targets + // with their respective language syntax highlighting. + switch(backend) { + case "azure": + language = "language-kusto"; + break; + case "ibm-qradar-aql": + language = "language-sql"; + break; + case "microsoft365defender": + language = "language-kusto"; + break; + case "splunk": + language = "language-splunk-spl"; + break; + case "qradar": + language = "language-sql"; + break; + default: + language = "language-sql"; + } + + document.getElementById("query-code").classList.remove(prev_language); + document.getElementById("query-code").classList.toggle(language); +} diff --git a/templates/index.html b/templates/index.html index 267bb7f..e01d879 100644 --- a/templates/index.html +++ b/templates/index.html @@ -175,7 +175,7 @@ query

- 
+          
             the generated query should be displayed here :)

         
 
@@ -191,6 +191,8 @@
   
   
   
+  
+  
   
   
   

From b8a4e205ce0f90a8c6354e395198008aa5d6f375 Mon Sep 17 00:00:00 2001
From: Matthew Sexton <3129598+signus@users.noreply.github.com>
Date: Tue, 20 Feb 2024 22:27:38 -0700
Subject: [PATCH 2/3] Updates flask to use major updates instead of a pinned
 version to resolve PR#36

---
 pyproject.toml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pyproject.toml b/pyproject.toml
index e679c41..c57e591 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "sigconverter.io"
-version = "0.1.0"
+version = "0.1.1"
 description = ""
 authors = ["magicsword "]
 readme = "README.md"
@@ -11,7 +11,7 @@ pysigma-backend-azure = {git = "https://github.com/sifex/pySigma-backend-azure.g
 pysigma-backend-loki = {git = "https://github.com/grafana/pySigma-backend-loki.git", rev = "452aa0d8bb096bbabdca5a83a884c45662dec666"}
 pysigma-backend-microsoft365defender = {git = "https://github.com/AttackIQ/pySigma-backend-microsoft365defender.git", rev = "731db4b6c7cbab8898973b4350d93268e135c495"}
 pysigma-backend-stix = {git = "https://github.com/barvhaim/pySigma-backend-stix", rev = "0d7c05e187249c26f5abb99f63bf839c78705d1e"}
-flask = "3.0.0"
+flask = "^3.0.0"
 sigma-cli = "0.7.6"
 pysigma = "0.9.11"
 pysigma-backend-carbonblack = "0.1.4"

From ebbc364e935210daf3bb897bf0d0b852bd71250e Mon Sep 17 00:00:00 2001
From: Matthew Sexton <3129598+signus@users.noreply.github.com>
Date: Fri, 23 Feb 2024 09:26:35 -0700
Subject: [PATCH 3/3] Swap case-switch for a map to select lang

Utilizes a map for handling the selection of the PrismJS language class
instead of the original switch statement for brevity.
---
 static/js/index.js | 31 ++++++++++---------------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 4d4b9cc..1ec4d4b 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -316,6 +316,7 @@ function updateBackendSyntax() {
   let backend = getSelectValue("select-backend");
   let language = "";
   let prev_language = "";
+  let default_language = "language-sql";
 
   // Determines what class was previously present upon a new backend selection
   let prev_lang_class = document.getElementById("query-code").classList;
@@ -325,27 +326,15 @@ function updateBackendSyntax() {
     }
   }
 
-  // TODO: Find a more effective method (e.g. Enum) to implement targets
-  // with their respective language syntax highlighting.
-  switch(backend) {
-    case "azure":
-      language = "language-kusto";
-      break;
-    case "ibm-qradar-aql":
-      language = "language-sql";
-      break;
-    case "microsoft365defender":
-      language = "language-kusto";
-      break;
-    case "splunk":
-      language = "language-splunk-spl";
-      break;
-    case "qradar":
-      language = "language-sql";
-      break;
-    default:
-      language = "language-sql";
-  }
+  const languageMap = {
+    "azure" : "language-kusto",
+    "ibm-qradar-aql": "language-sql",
+    "microsoft365defender": "language-kusto",
+    "splunk": "language-splunk-spl",
+    "qradar": "language-sql"
+  };
+
+  language = languageMap[backend] ? languageMap[backend] : default_language;
 
   document.getElementById("query-code").classList.remove(prev_language);
   document.getElementById("query-code").classList.toggle(language);