mihari 5.6.2 → 5.7.1

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

@@ -1,287 +0,0 @@
-<template>
-  <div class="column">
-    <div v-if="enrichArtifactTask.isRunning">
-      <Loading></Loading>
-      <hr />
-    </div>
-    <h2 class="is-size-2 mb-4">Artifact</h2>
-    <div class="columns">
-      <div
-        class="column is-half"
-        v-if="googleMapSrc !== undefined || urlscanLiveshotSrc !== undefined"
-      >
-        <div v-if="googleMapSrc">
-          <h4 class="is-size-4 mb-2">
-            Geolocation
-            <span class="has-text-grey">{{
-              countryCode || artifact.geolocation?.countryCode
-            }}</span>
-          </h4>
-          <iframe class="mb-4" :src="googleMapSrc" width="100%" height="240px"></iframe>
-        </div>
-        <div v-if="urlscanLiveshotSrc">
-          <h4 class="is-size-4 mb-2">
-            Live screenshot
-            <span class="has-text-grey">Hover to expand</span>
-          </h4>
-          <img :src="urlscanLiveshotSrc" class="liveshot" alt="liveshot" />
-        </div>
-      </div>
-      <div class="column">
-        <div class="block">
-          <h4 class="is-size-4 mb-2">Information</h4>
-          <table class="table is-fullwidth is-completely-borderless">
-            <tr>
-              <th>ID</th>
-              <td>
-                {{ artifact.id }}
-                <span class="buttons is-pulled-right">
-                  <button class="button is-primary is-light is-small" @click="enrichArtifact">
-                    <span>Enrich</span>
-                    <span class="icon is-small">
-                      <font-awesome-icon icon="lightbulb"></font-awesome-icon>
-                    </span>
-                  </button>
-                  <button
-                    class="button is-info is-light is-small"
-                    @click="flipShowMetadata"
-                    v-if="artifact.metadata"
-                  >
-                    <span>Metadata</span>
-                    <span class="icon is-small">
-                      <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">
-                      <font-awesome-icon icon="times"></font-awesome-icon>
-                    </span>
-                  </button>
-                </span>
-              </td>
-            </tr>
-            <tr>
-              <th>Data type</th>
-              <td>{{ artifact.dataType }}</td>
-            </tr>
-            <tr>
-              <th>Data</th>
-              <td>{{ artifact.data }}</td>
-            </tr>
-            <tr>
-              <th>Source</th>
-              <td>{{ artifact.source }}</td>
-            </tr>
-            <tr v-if="artifact.tags.length > 0">
-              <th>Tags</th>
-              <td><Tags :tags="artifact.tags"></Tags></td>
-            </tr>
-          </table>
-        </div>
-        <div v-if="artifact.metadata && showMetadata">
-          <div class="modal is-active">
-            <div class="modal-background" @click="flipShowMetadata"></div>
-            <div class="modal-card">
-              <header class="modal-card-head">
-                <p class="modal-card-title">Metadata</p>
-                <button class="delete" aria-label="close" @click="flipShowMetadata"></button>
-              </header>
-              <section class="modal-card-body">
-                <VueJsonPretty :data="artifact.metadata as any"></VueJsonPretty>
-              </section>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="block" v-if="artifact.autonomousSystem">
-      <h4 class="is-size-4 mb-2">AS</h4>
-      <AS :autonomousSystem="artifact.autonomousSystem"></AS>
-    </div>
-    <div class="block" v-if="artifact.reverseDnsNames">
-      <h4 class="is-size-4 mb-2">Reverse DNS</h4>
-      <ReverseDnsNames :reverseDnsNames="artifact.reverseDnsNames"></ReverseDnsNames>
-    </div>
-    <div class="block" v-if="artifact.dnsRecords">
-      <h4 class="is-size-4 mb-2">DNS records</h4>
-      <DnsRecords :dnsRecords="artifact.dnsRecords"></DnsRecords>
-    </div>
-    <div class="block" v-if="artifact.cpes">
-      <h4 class="is-size-4 mb-2">CPEs</h4>
-      <CPEs :cpes="artifact.cpes"></CPEs>
-    </div>
-    <div class="block" v-if="artifact.ports">
-      <h4 class="is-size-4 mb-2">Ports</h4>
-      <Ports :ports="artifact.ports"></Ports>
-    </div>
-    <div class="block" v-if="artifact.whoisRecord">
-      <h4 class="is-size-4 mb-2">Whois record</h4>
-      <WhoisRecord :whoisRecord="artifact.whoisRecord"></WhoisRecord>
-    </div>
-    <div class="block">
-      <h4 class="is-size-4 mb-2">Links</h4>
-      <Links :data="artifact.data" :type="artifact.dataType"></Links>
-    </div>
-  </div>
-  <hr />
-  <div class="column">
-    <h2 class="is-size-2 mb-4">Related alerts</h2>
-    <Alerts :artifact="artifact.data"></Alerts>
-  </div>
-</template>
-
-<script lang="ts">
-import "vue-json-pretty/lib/styles.css"
-
-import { computed, defineComponent, onMounted, type PropType, ref } from "vue"
-import VueJsonPretty from "vue-json-pretty"
-import { useRouter } from "vue-router"
-
-import {
-  generateDeleteArtifactTask,
-  generateEnrichArtifactTask,
-  generateGetAlertsTask,
-  generateGetIPTask
-} from "@/api-helper"
-import Alerts from "@/components/alert/AlertsWithPagination.vue"
-import AS from "@/components/artifact/AS.vue"
-import CPEs from "@/components/artifact/CPEs.vue"
-import DnsRecords from "@/components/artifact/DnsRecords.vue"
-import Ports from "@/components/artifact/Ports.vue"
-import ReverseDnsNames from "@/components/artifact/ReverseDnsNames.vue"
-import Tags from "@/components/artifact/Tags.vue"
-import WhoisRecord from "@/components/artifact/WhoisRecord.vue"
-import Links from "@/components/link/Links.vue"
-import Loading from "@/components/Loading.vue"
-import type { ArtifactWithTags, GCS } from "@/types"
-import { getGCSByCountryCode, getGCSByIPInfo } from "@/utils"
-
-export default defineComponent({
-  name: "ArtifactItem",
-  props: {
-    artifact: {
-      type: Object as PropType<ArtifactWithTags>,
-      required: true
-    }
-  },
-  components: {
-    Alerts,
-    AS,
-    DnsRecords,
-    Links,
-    Loading,
-    ReverseDnsNames,
-    Tags,
-    VueJsonPretty,
-    WhoisRecord,
-    CPEs,
-    Ports
-  },
-  emits: ["refresh"],
-  setup(props, context) {
-    const googleMapSrc = ref<string | undefined>(undefined)
-    const countryCode = ref<string | undefined>(undefined)
-    const showMetadata = ref(false)
-
-    const router = useRouter()
-
-    const urlscanLiveshotSrc = computed<string | undefined>(() => {
-      if (props.artifact.dataType === "domain") {
-        const url = `http://${props.artifact.data}`
-        return `https://urlscan.io/liveshot/?url=${url}`
-      }
-
-      if (props.artifact.dataType === "url") {
-        return `https://urlscan.io/liveshot/?url=${props.artifact.data}`
-      }
-
-      return undefined
-    })
-
-    const getGoogleMapSrc = (gcs: GCS | undefined): string | undefined => {
-      if (gcs !== undefined) {
-        return `https://maps.google.co.jp/maps?output=embed&q=${gcs.lat},${gcs.long}&z=3`
-      }
-
-      return undefined
-    }
-
-    const getIPInfoTask = generateGetIPTask()
-    const getAlertsTask = generateGetAlertsTask()
-    const deleteArtifactTask = generateDeleteArtifactTask()
-    const enrichArtifactTask = generateEnrichArtifactTask()
-
-    const deleteArtifact = async () => {
-      const result = window.confirm(`Are you sure you want to delete ${props.artifact.data}?`)
-
-      if (result) {
-        await deleteArtifactTask.perform(props.artifact.id)
-        router.push("/")
-      }
-    }
-
-    const enrichArtifact = async () => {
-      await enrichArtifactTask.perform(props.artifact.id)
-      context.emit("refresh")
-    }
-
-    onMounted(async () => {
-      if (props.artifact.dataType === "ip") {
-        let gcs: GCS | undefined = undefined
-
-        if (props.artifact.geolocation === null) {
-          // Use IPInfo if an artifact does not have geolocation
-          const ipinfo = await getIPInfoTask.perform(props.artifact.data)
-          gcs = getGCSByIPInfo(ipinfo)
-          countryCode.value = ipinfo.countryCode
-        } else {
-          gcs = getGCSByCountryCode(props.artifact.geolocation.countryCode)
-        }
-
-        googleMapSrc.value = getGoogleMapSrc(gcs)
-      }
-    })
-
-    const flipShowMetadata = () => {
-      showMetadata.value = !showMetadata.value
-    }
-
-    return {
-      countryCode,
-      enrichArtifactTask,
-      getAlertsTask,
-      googleMapSrc,
-      showMetadata,
-      urlscanLiveshotSrc,
-      deleteArtifact,
-      enrichArtifact,
-      flipShowMetadata
-    }
-  }
-})
-</script>
-
-<style scoped>
-img.liveshot {
-  border: 1px solid #aaa;
-  border-radius: 5px;
-  width: 100%;
-  max-height: 250px;
-  object-fit: cover;
-  object-position: top;
-  display: block;
-  overflow: hidden;
-  transition:
-    max-height 1s,
-    height 1s;
-}
-
-img.liveshot:hover {
-  max-height: none;
-}
-
-.modal-card {
-  width: 960px;
-}
-</style>

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

@@ -1,64 +0,0 @@
-<template>
-  <div class="control" v-if="!isDeleted">
-    <div
-      class="tags has-addons are-medium"
-      v-on:mouseover="showDeleteButton"
-      v-on:mouseleave="hideDeleteButton"
-    >
-      <router-link
-        class="tag is-link is-light"
-        :to="{ name: 'Artifact', params: { id: artifact.id } }"
-        >{{ artifact.data }}</router-link
-      >
-      <span class="tag is-delete" v-if="isDeleteButtonEnabled" @click="deleteArtifact"></span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType, ref } from "vue"
-
-import { generateDeleteArtifactTask } from "@/api-helper"
-import type { Artifact } from "@/types"
-
-export default defineComponent({
-  name: "ArtifactTag",
-  props: {
-    artifact: {
-      type: Object as PropType<Artifact>,
-      required: true
-    }
-  },
-  setup(props) {
-    const isDeleted = ref(false)
-    const isDeleteButtonEnabled = ref(false)
-
-    const deleteArtifactTask = generateDeleteArtifactTask()
-
-    const deleteArtifact = async () => {
-      const result = window.confirm(`Are you sure you want to delete ${props.artifact.data}?`)
-
-      if (result) {
-        await deleteArtifactTask.perform(props.artifact.id)
-        isDeleted.value = true
-      }
-    }
-
-    const showDeleteButton = () => {
-      isDeleteButtonEnabled.value = true
-    }
-
-    const hideDeleteButton = () => {
-      isDeleteButtonEnabled.value = false
-    }
-
-    return {
-      isDeleted,
-      deleteArtifact,
-      showDeleteButton,
-      hideDeleteButton,
-      isDeleteButtonEnabled
-    }
-  }
-})
-</script>

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

@@ -1,29 +0,0 @@
-<template>
-  <div class="field is-grouped is-grouped-multiline">
-    <ArtifactComponent
-      v-for="artifact in artifacts"
-      :key="artifact.id"
-      :artifact="artifact"
-    ></ArtifactComponent>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import ArtifactComponent from "@/components/artifact/ArtifactTag.vue"
-import type { Artifact } from "@/types"
-
-export default defineComponent({
-  name: "ArtifactTags",
-  components: {
-    ArtifactComponent
-  },
-  props: {
-    artifacts: {
-      type: Array as PropType<Artifact[]>,
-      required: true
-    }
-  }
-})
-</script>

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

@@ -1,57 +0,0 @@
-<template>
-  <Loading v-if="getArtifactTask.isRunning"></Loading>
-  <ErrorMessage v-if="getArtifactTask.isError" :error="getArtifactTask.last?.error"></ErrorMessage>
-  <ArtifactComponent
-    :artifact="getArtifactTask.last.value"
-    @refresh="refresh"
-    v-if="getArtifactTask.last?.value"
-  ></ArtifactComponent>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, watch } from "vue"
-
-import { generateGetArtifactTask } from "@/api-helper"
-import ArtifactComponent from "@/components/artifact/Artifact.vue"
-import ErrorMessage from "@/components/ErrorMessage.vue"
-import Loading from "@/components/Loading.vue"
-
-export default defineComponent({
-  name: "ArtifactWrapper",
-  components: {
-    ArtifactComponent,
-    Loading,
-    ErrorMessage
-  },
-  props: {
-    id: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const getArtifactTask = generateGetArtifactTask()
-
-    const getArtifact = async () => {
-      await getArtifactTask.perform(props.id)
-    }
-
-    const refresh = async () => {
-      await getArtifact()
-    }
-
-    onMounted(async () => {
-      await getArtifact()
-    })
-
-    watch(props, async () => {
-      await getArtifact()
-    })
-
-    return {
-      getArtifactTask,
-      refresh
-    }
-  }
-})
-</script>

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

@@ -1,23 +0,0 @@
-<template>
-  <div class="tags are-medium">
-    <span class="tag" v-for="cpe in cpes" :key="cpe.cpe">
-      {{ cpe.cpe }}
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import type { CPE } from "@/types"
-
-export default defineComponent({
-  name: "CPEsItem",
-  props: {
-    cpes: {
-      type: Array as PropType<CPE[]>,
-      required: true
-    }
-  }
-})
-</script>

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

@@ -1,38 +0,0 @@
-<template>
-  <div class="field is-grouped is-grouped-multiline">
-    <div class="control" v-for="(dnsRecord, index) in dnsRecords" :key="index">
-      <div class="tags has-addons are-medium">
-        <span class="tag is-dark"> {{ dnsRecord.resource }}</span>
-        <router-link
-          class="tag"
-          :to="{
-            name: 'Alerts',
-            query: { dnsRecord: dnsRecord.value }
-          }"
-        >
-          {{ truncate(dnsRecord.value, 50) }}
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import truncate from "truncate"
-import { defineComponent, type PropType } from "vue"
-
-import type { DnsRecord } from "@/types"
-
-export default defineComponent({
-  name: "DnsRecords",
-  props: {
-    dnsRecords: {
-      type: Array as PropType<DnsRecord[]>,
-      required: true
-    }
-  },
-  setup() {
-    return { truncate }
-  }
-})
-</script>

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

@@ -1,23 +0,0 @@
-<template>
-  <div class="tags are-medium">
-    <span class="tag" v-for="port in ports" :key="port.port">
-      {{ port.port }}
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import type { Port } from "@/types"
-
-export default defineComponent({
-  name: "PortsItem",
-  props: {
-    ports: {
-      type: Array as PropType<Port[]>,
-      required: true
-    }
-  }
-})
-</script>

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

@@ -1,31 +0,0 @@
-<template>
-  <div class="tags are-medium">
-    <router-link
-      class="tag"
-      v-for="reverseDnsName in reverseDnsNames"
-      :key="reverseDnsName.name"
-      :to="{
-        name: 'Alerts',
-        query: { reverseDnsName: reverseDnsName.name }
-      }"
-    >
-      {{ reverseDnsName.name }}
-    </router-link>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import type { ReverseDnsName } from "@/types"
-
-export default defineComponent({
-  name: "ReverseDnsNames",
-  props: {
-    reverseDnsNames: {
-      type: Array as PropType<ReverseDnsName[]>,
-      required: true
-    }
-  }
-})
-</script>

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

@@ -1,29 +0,0 @@
-<template>
-  <div class="tags are-medium">
-    <router-link
-      class="tag is-info is-light"
-      v-for="tag in tags"
-      :key="tag"
-      :to="{
-        name: 'Alerts',
-        query: { tag: tag }
-      }"
-    >
-      {{ tag }}
-    </router-link>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-export default defineComponent({
-  name: "TagsItem",
-  props: {
-    tags: {
-      type: Array as PropType<string[]>,
-      required: true
-    }
-  }
-})
-</script>

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

@@ -1,44 +0,0 @@
-<template>
-  <div class="field is-grouped is-grouped-multiline">
-    <div class="control">
-      <div class="tags has-addons are-medium">
-        <span class="tag is-dark">Registrar</span>
-        <span class="tag is-light">{{ whoisRecord.registrar?.name || "N/A" }}</span>
-      </div>
-    </div>
-    <div class="control">
-      <div class="tags has-addons are-medium">
-        <span class="tag is-dark">Created on</span>
-        <span class="tag is-light">{{ whoisRecord.createdOn || "N/A" }}</span>
-      </div>
-    </div>
-    <div class="control">
-      <div class="tags has-addons are-medium">
-        <span class="tag is-dark">Updated on</span>
-        <span class="tag is-light">{{ whoisRecord.updatedOn || "N/A" }}</span>
-      </div>
-    </div>
-    <div class="control">
-      <div class="tags has-addons are-medium">
-        <span class="tag is-dark">Exipres on</span>
-        <span class="tag is-light">{{ whoisRecord.expiresOn || "N/A" }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType } from "vue"
-
-import type { WhoisRecord } from "@/types"
-
-export default defineComponent({
-  name: "WhoisRecord",
-  props: {
-    whoisRecord: {
-      type: Object as PropType<WhoisRecord>,
-      required: true
-    }
-  }
-})
-</script>