mihari 5.3.0 → 5.3.2

data/frontend/package.json

@@ -14,13 +14,17 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.4.0",
-    "@vueuse/core": "^10.2.1",
-    "@vueuse/router": "^10.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@vueuse/core": "^10.3.0",
+    "@vueuse/router": "^10.3.0",
+    "ace-builds": "^1.23.4",
     "axios": "^1.4.0",
     "bulma": "^0.9.4",
     "bulma-helpers": "^0.4.3",
     "dayjs": "^1.11.9",
+    "font-awesome-animation": "^1.1.1",
     "js-sha256": "^0.9.0",
     "truncate": "^3.0.0",
     "ts-dedent": "^2.2.0",
@@ -29,36 +33,35 @@
     "vue": "^3.3.4",
     "vue-concurrency": "4.0.1",
     "vue-json-pretty": "^2.2.4",
-    "vue-prism-editor": "^2.0.0-alpha.2",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "vue3-ace-editor": "^2.2.3"
   },
   "devDependencies": {
-    "@redocly/cli": "^1.0.0-beta.131",
+    "@redocly/cli": "1.0.0",
     "@rushstack/eslint-patch": "^1.3.2",
-    "@tsconfig/node20": "^1.0.2",
+    "@tsconfig/node20": "^20.1.1",
     "@types/jsdom": "^21.1.1",
-    "@types/node": "^20.4.2",
-    "@types/prismjs": "^1.26.0",
+    "@types/node": "^20.4.8",
     "@types/url-parse": "^1.4.8",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "2.4.0",
+    "@vue/test-utils": "2.4.1",
     "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-vue": "^9.15.1",
+    "eslint-plugin-vue": "^9.16.1",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.0",
+    "prettier": "^3.0.1",
     "typescript": "~5.1.6",
-    "vite": "^4.4.4",
-    "vitest": "^0.33.0",
-    "vue-tsc": "^1.8.5"
+    "vite": "^4.4.9",
+    "vitest": "^0.34.1",
+    "vue-tsc": "^1.8.8"
   }
 }

data/frontend/src/ace-config.ts

@@ -0,0 +1,6 @@
+import ace from "ace-builds"
+import modeYamlUrl from "ace-builds/src-min-noconflict/mode-yaml?url"
+import themeMonokaiUrl from "ace-builds/src-min-noconflict/theme-monokai?url"
+
+ace.config.setModuleUrl("ace/mode/yaml", modeYamlUrl)
+ace.config.setModuleUrl("ace/theme/monokai", themeMonokaiUrl)

data/frontend/src/components/Loading.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="has-text-centered">
     <div class="fa-3x">
-      <i class="fas fa-spinner fa-spin"></i>
+      <font-awesome-icon icon="spinner" spin></font-awesome-icon>
     </div>
   </div>
 </template>

data/frontend/src/components/alert/Alert.vue

@@ -8,7 +8,7 @@
           <button class="button is-light is-small is-pulled-right" @click="deleteAlert">
             <span>Delete</span>
             <span class="icon is-small">
-              <i class="fas fa-times"></i>
+              <font-awesome-icon icon="times"></font-awesome-icon>
             </span>
           </button>
         </td>

data/frontend/src/components/alert/AlertsWrapper.vue

@@ -16,7 +16,7 @@
           <p class="control">
             <a class="button is-primary" @click="search">
               <span class="icon is-small">
-                <i class="fas fa-search"></i>
+                <font-awesome-icon icon="search"></font-awesome-icon>
               </span>
               <span>Search</span>
             </a>

data/frontend/src/components/alert/Form.vue

@@ -95,7 +95,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref, watch } from "vue"
+import { defineComponent, type PropType, ref, toRef,watch } from "vue"
 import { useRoute } from "vue-router"
 
 import type { AlertSearchParams } from "@/types"
@@ -126,7 +126,7 @@ export default defineComponent({
 
     const artifact = ref<string | undefined>(undefined)
     const fromAt = ref<string | undefined>(undefined)
-    const tagInput = ref<string | undefined>(props.tag)
+    const tagInput = toRef(props, "tag")
     const ruleId = ref<string | undefined>(undefined)
     const toAt = ref<string | undefined>(undefined)
     const asn = ref<number | undefined>(undefined)

data/frontend/src/components/artifact/Artifact.vue

@@ -44,7 +44,7 @@
                   <button class="button is-primary is-light is-small" @click="enrichArtifact">
                     <span>Enrich</span>
                     <span class="icon is-small">
-                      <i class="fas fa-lightbulb"></i>
+                      <font-awesome-icon icon="lightbulb"></font-awesome-icon>
                     </span>
                   </button>
 
@@ -55,14 +55,14 @@
                   >
                     <span>Metadata</span>
                     <span class="icon is-small">
-                      <i class="fas fa-info-circle"></i>
+                      <font-awesome-icon icon="info-circle"></font-awesome-icon>
                     </span>
                   </button>
 
                   <button class="button is-light is-small" @click="deleteArtifact">
                     <span>Delete</span>
                     <span class="icon is-small">
-                      <i class="fas fa-times"></i>
+                      <font-awesome-icon icon="times"></font-awesome-icon>
                     </span>
                   </button>
                 </span>

data/frontend/src/components/config/Configs.vue

@@ -21,13 +21,13 @@
             <td>
               <button class="button is-success is-small ml-1" v-if="config.isConfigured">
                 <span class="icon is-small">
-                  <i class="fas fa-check"></i>
+                  <font-awesome-icon icon="check"></font-awesome-icon>
                 </span>
                 <span>Yes</span>
               </button>
               <button class="button is-warning is-small ml-1" v-else>
                 <span class="icon is-small">
-                  <i class="fas fa-exclamation"></i>
+                  <font-awesome-icon icon="exclamation"></font-awesome-icon>
                 </span>
                 <span>No</span>
               </button>

data/frontend/src/components/rule/EditRule.vue

@@ -8,7 +8,7 @@
       <p class="control">
         <a class="button is-primary" @click="edit">
           <span class="icon is-small">
-            <i class="fas fa-edit"></i>
+            <font-awesome-icon icon="edit"></font-awesome-icon>
           </span>
           <span>Edit</span>
         </a>
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref } from "vue"
+import { defineComponent, type PropType, toRef } from "vue"
 import { useRouter } from "vue-router"
 
 import { generateUpdateRuleTask } from "@/api-helper"
@@ -46,7 +46,8 @@ export default defineComponent({
   setup(props) {
     const router = useRouter()
 
-    const yaml = ref(props.rule.yaml)
+    const rule = toRef(props, "rule")
+    const yaml = toRef(rule.value, "yaml")
 
     const updateRuleTask = generateUpdateRuleTask()
 

data/frontend/src/components/rule/Form.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref, watch } from "vue"
+import { defineComponent, type PropType, ref, toRef,watch } from "vue"
 import { useRoute } from "vue-router"
 
 import type { RuleSearchParams } from "@/types"
@@ -115,7 +115,7 @@ export default defineComponent({
 
     const description = ref<string | undefined>(undefined)
     const fromAt = ref<string | undefined>(undefined)
-    const tagInput = ref<string | undefined>(props.tag)
+    const tagInput = toRef(props, "tag")
     const title = ref<string | undefined>(undefined)
     const toAt = ref<string | undefined>(undefined)
 

data/frontend/src/components/rule/InputForm.vue

@@ -1,31 +1,29 @@
 <template>
-  <div class="block my-editor-wrapper" ref="wrapper">
-    <PrismEditor
-      class="my-editor"
-      v-model="yamlInput"
-      :highlight="highlighter"
-      line-numbers
-    ></PrismEditor>
+  <div class="block">
+    <VAceEditor
+      class="vue-ace-editor"
+      v-model:value="yamlInput"
+      lang="yaml"
+      theme="monokai"
+      :options="{
+        fontSize: 16,
+        minLines: 6,
+        maxLines: 10000
+      }"
+    ></VAceEditor>
   </div>
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line simple-import-sort/imports
-import "vue-prism-editor/dist/prismeditor.min.css"
+import "@/ace-config"
 
-import { defineComponent, ref, watchEffect } from "vue"
-import { PrismEditor } from "vue-prism-editor"
-
-import Prism from "prismjs"
-
-import "prismjs/components/prism-yaml"
-import "prismjs/plugins/custom-class/prism-custom-class"
-import "prismjs/themes/prism-twilight.css"
+import { defineComponent, toRef, watchEffect } from "vue"
+import { VAceEditor } from "vue3-ace-editor"
 
 export default defineComponent({
   name: "RuleInputForm",
   components: {
-    PrismEditor
+    VAceEditor
   },
   props: {
     yaml: {
@@ -35,52 +33,13 @@ export default defineComponent({
   },
   emits: ["update-yaml"],
   setup(props, context) {
-    const yamlInput = ref(props.yaml)
-    const wrapper = ref<HTMLElement | undefined>(undefined)
-
-    Prism.plugins.customClass.map({
-      number: "prism-number",
-      tag: "prism-tag"
-    })
-
-    const highlighter = (code: string) => {
-      return Prism.highlight(code, Prism.languages.yaml, "yaml")
-    }
+    const yamlInput = toRef(props, "yaml")
 
     watchEffect(() => {
       context.emit("update-yaml", yamlInput.value)
-
-      // TODO: a dirty hack to change the default text color
-      if (wrapper.value) {
-        const strings = wrapper.value.querySelectorAll(":not(span.token)")
-        strings.forEach((string) => {
-          ;(string as HTMLElement).style.color = "white"
-        })
-      }
     })
 
-    return { yamlInput, highlighter, wrapper }
+    return { yamlInput }
   }
 })
 </script>
-
-<style scoped>
-.my-editor {
-  background: hsl(0, 0%, 8%);
-  font-family:
-    Fira code,
-    Fira Mono,
-    Consolas,
-    Menlo,
-    Courier,
-    monospace;
-  font-size: 1em;
-  line-height: 1.5;
-  padding: 5px;
-}
-
-.my-editor-wrapper {
-  background: hsl(0, 0%, 8%);
-  padding: 10px;
-}
-</style>

data/frontend/src/components/rule/NewRule.vue

@@ -8,7 +8,7 @@
       <p class="control">
         <a class="button is-primary" @click="create">
           <span class="icon is-small">
-            <i class="fas fa-plus"></i>
+            <font-awesome-icon icon="plus"></font-awesome-icon>
           </span>
           <span>Create</span>
         </a>

data/frontend/src/components/rule/Rule.vue

@@ -17,7 +17,7 @@
         <button class="button is-primary is-light is-small" @click="runRule">
           <span>Run</span>
           <span class="icon is-small">
-            <i class="fas fa-arrow-right"></i>
+            <font-awesome-icon icon="arrow-right"></font-awesome-icon>
           </span>
         </button>
         <router-link
@@ -26,13 +26,13 @@
         >
           <span>Edit</span>
           <span class="icon is-small">
-            <i class="fas fa-edit"></i>
+            <font-awesome-icon icon="edit"></font-awesome-icon>
           </span>
         </router-link>
         <button class="button is-light is-small" @click="deleteRule">
           <span>Delete</span>
           <span class="icon is-small">
-            <i class="fas fa-times"></i>
+            <font-awesome-icon icon="times"></font-awesome-icon>
           </span>
         </button>
       </span>

data/frontend/src/components/rule/RulesWrapper.vue

@@ -14,7 +14,7 @@
         <p class="control">
           <a class="button is-primary" @click="search">
             <span class="icon is-small">
-              <i class="fas fa-search"></i>
+              <font-awesome-icon icon="search"></font-awesome-icon>
             </span>
             <span>Search</span>
           </a>

data/frontend/src/components/rule/YAML.vue

@@ -1,44 +1,37 @@
 <template>
-  <pre ref="pre" class="line-numbers"><code class="language-yaml">{{ yaml }}</code></pre>
+  <div class="block">
+    <VAceEditor
+      class="vue-ace-editor"
+      :value="yaml"
+      lang="yaml"
+      theme="monokai"
+      :options="{
+        readOnly: true,
+        fontSize: 16,
+        maxLines: 10000,
+        minLines: 6
+      }"
+    ></VAceEditor>
+  </div>
 </template>
 
 <script lang="ts">
-// eslint-disable-next-line simple-import-sort/imports
-import { defineComponent, onMounted, ref } from "vue"
+import "@/ace-config"
 
-import Prism from "prismjs"
-
-import "prismjs/components/prism-yaml"
-import "prismjs/plugins/custom-class/prism-custom-class"
-import "prismjs/plugins/line-numbers/prism-line-numbers.css"
-import "prismjs/plugins/line-numbers/prism-line-numbers"
-import "prismjs/themes/prism-twilight.css"
+import { defineComponent } from "vue"
+import { VAceEditor } from "vue3-ace-editor"
 
 export default defineComponent({
   name: "YAML",
+  components: {
+    VAceEditor
+  },
   props: {
     yaml: {
       type: String,
       required: true
     }
   },
-  setup() {
-    const pre = ref<HTMLElement | undefined>(undefined)
-
-    Prism.plugins.customClass.map({
-      number: "prism-number",
-      tag: "prism-tag"
-    })
-
-    onMounted(() => {
-      if (pre.value) {
-        pre.value.querySelectorAll("code").forEach((elem) => {
-          Prism.highlightElement(elem)
-        })
-      }
-    })
-
-    return { pre }
-  }
+  setup() {}
 })
 </script>

data/frontend/src/main.ts

@@ -1,11 +1,41 @@
 import "bulma/css/bulma.css"
 import "bulma-helpers/css/bulma-helpers.min.css"
-import "@fortawesome/fontawesome-free/css/all.css"
-import "@fortawesome/fontawesome-free/js/all.js"
+import "font-awesome-animation/css/font-awesome-animation.min.css"
 
+import { library } from "@fortawesome/fontawesome-svg-core"
+import {
+  faArrowRight,
+  faCheck,
+  faEdit,
+  faExclamation,
+  faInfoCircle,
+  faLightbulb,
+  faPlus,
+  faSearch,
+  faSpinner,
+  faTimes
+} from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 import { createApp } from "vue"
 
 import App from "@/App.vue"
 import router from "@/router"
 
-createApp(App).use(router).mount("#app")
+library.add(
+  faArrowRight,
+  faCheck,
+  faEdit,
+  faExclamation,
+  faInfoCircle,
+  faLightbulb,
+  faPlus,
+  faSearch,
+  faSpinner,
+  faTimes
+)
+
+const app = createApp(App)
+
+app.component("font-awesome-icon", FontAwesomeIcon)
+
+app.use(router).mount("#app")

data/frontend/src/views/Artifact.vue

@@ -1,10 +1,10 @@
 <template>
-  <Artifact :id="artifactId"></Artifact>
+  <Artifact :id="id"></Artifact>
 </template>
 
 <script lang="ts">
 import { useTitle } from "@vueuse/core"
-import { defineComponent, onMounted, ref, watch } from "vue"
+import { defineComponent, onMounted, watch } from "vue"
 
 import Artifact from "@/components/artifact/ArtifactWrapper.vue"
 
@@ -20,10 +20,8 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const artifactId = ref<string>(props.id)
-
     const updateTitle = () => {
-      useTitle(`Artifact:${artifactId.value} - Mihari`)
+      useTitle(`Artifact:${props.id} - Mihari`)
     }
 
     onMounted(() => {
@@ -33,12 +31,9 @@ export default defineComponent({
     watch(
       () => props.id,
       () => {
-        artifactId.value = props.id
         updateTitle()
       }
     )
-
-    return { artifactId }
   }
 })
 </script>

data/frontend/src/views/EditRule.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import { useTitle } from "@vueuse/core"
-import { defineComponent, onMounted, ref, watch } from "vue"
+import { defineComponent, onMounted, watch } from "vue"
 
 import EditRule from "@/components/rule/EditRuleWrapper.vue"
 
@@ -20,10 +20,8 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const ruleId = ref<string>(props.id)
-
     const updateTitle = () => {
-      useTitle(`Edit rule:${ruleId.value} - Mihari`)
+      useTitle(`Edit rule:${props.id} - Mihari`)
     }
 
     onMounted(() => {
@@ -33,12 +31,9 @@ export default defineComponent({
     watch(
       () => props.id,
       () => {
-        ruleId.value = props.id
         updateTitle()
       }
     )
-
-    return { ruleId }
   }
 })
 </script>

data/frontend/src/views/Rule.vue

@@ -1,10 +1,10 @@
 <template>
-  <Rule :id="ruleId"></Rule>
+  <Rule :id="id"></Rule>
 </template>
 
 <script lang="ts">
 import { useTitle } from "@vueuse/core"
-import { defineComponent, onMounted, ref, watch } from "vue"
+import { defineComponent, onMounted, watch } from "vue"
 
 import Rule from "@/components/rule/RuleWrapper.vue"
 
@@ -20,10 +20,8 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const ruleId = ref<string>(props.id)
-
     const updateTitle = () => {
-      useTitle(`Rule:${ruleId.value} - Mihari`)
+      useTitle(`Rule:${props.id} - Mihari`)
     }
 
     onMounted(() => {
@@ -33,12 +31,9 @@ export default defineComponent({
     watch(
       () => props.id,
       () => {
-        ruleId.value = props.id
         updateTitle()
       }
     )
-
-    return { ruleId }
   }
 })
 </script>

data/lib/mihari/analyzers/base.rb

@@ -73,6 +73,12 @@ module Mihari
 
       alias_method :source, :class_name
 
+      private
+
+      def sleep_interval
+        sleep(interval) if interval
+      end
+
       class << self
         #
         # Initialize an analyzer by query params

data/lib/mihari/analyzers/binaryedge.rb

@@ -64,7 +64,7 @@ module Mihari
           break if total <= page * PAGE_SIZE
 
           # sleep #{interval} seconds to avoid the rate limitation (if it is set)
-          sleep(interval) if interval
+          sleep_interval
         end
         responses
       end

data/lib/mihari/analyzers/censys.rb

@@ -42,7 +42,7 @@ module Mihari
           break if cursor.nil? || cursor.empty?
 
           # sleep #{interval} seconds to avoid the rate limitation (if it is set)
-          sleep(interval) if interval
+          sleep_interval
         end
 
         artifacts.flatten.uniq(&:data)

data/lib/mihari/analyzers/onyphe.rb

@@ -65,7 +65,7 @@ module Mihari
           break if total <= page * PAGE_SIZE
 
           # sleep #{interval} seconds to avoid the rate limitation (if it is set)
-          sleep(interval) if interval
+          sleep_interval
         end
         responses
       end