mihari 5.2.3 → 5.2.4

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

@@ -0,0 +1,321 @@
+<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">
+                      <i class="fas fa-lightbulb"></i>
+                    </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">
+                      <i class="fas fa-info-circle"></i>
+                    </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>
+                    </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"></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, 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 { 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

@@ -0,0 +1,70 @@
+<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, PropType, ref } from "vue";
+
+import { generateDeleteArtifactTask } from "@/api-helper";
+import { 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

@@ -0,0 +1,29 @@
+<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, PropType } from "vue";
+
+import ArtifactComponent from "@/components/artifact/ArtifactTag.vue";
+import { 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

@@ -0,0 +1,62 @@
+<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

@@ -0,0 +1,23 @@
+<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, PropType } from "vue";
+
+import { 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

@@ -0,0 +1,38 @@
+<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, PropType } from "vue";
+
+import { 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

@@ -0,0 +1,23 @@
+<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, PropType } from "vue";
+
+import { 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

@@ -0,0 +1,31 @@
+<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, PropType } from "vue";
+
+import { 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

@@ -0,0 +1,29 @@
+<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, 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

@@ -0,0 +1,49 @@
+<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, PropType } from "vue";
+
+import { WhoisRecord } from "@/types";
+
+export default defineComponent({
+  name: "WhoisRecord",
+  props: {
+    whoisRecord: {
+      type: Object as PropType<WhoisRecord>,
+      required: true,
+    },
+  },
+});
+</script>