Merge pull request #64 from peace-maker/cyberchef

Add "Open in CyberChef" button
spq · Jan 9, 2024 · 12884d8 · 12884d8
2 parents 81c5529 + e75ea17
commit 12884d8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/web/src/components/Results.vue b/web/src/components/Results.vue
@@ -259,7 +259,11 @@
                 {{ stream.Stream.FirstPacket | formatDate }}
               </td>
               <td style="width: 0" class="px-0">
-                <v-btn :href="`/api/download/${stream.Stream.ID}.pcap`" icon @click.native.stop>
+                <v-btn
+                  :href="`/api/download/${stream.Stream.ID}.pcap`"
+                  icon
+                  @click.native.stop
+                >
                   <v-icon>mdi-download</v-icon>
                 </v-btn>
               </td>

diff --git a/web/src/components/Stream.vue b/web/src/components/Stream.vue
@@ -45,6 +45,20 @@
         </template>
         <span>Search Selection</span>
       </v-tooltip>
+      <v-tooltip bottom>
+        <template #activator="{ on, attrs }">
+          <v-btn
+            link
+            exact
+            v-bind="attrs"
+            icon
+            @click="openInCyberChef()"
+            v-on="on"
+            ><v-icon>mdi-chef-hat</v-icon></v-btn
+          >
+        </template>
+        <span>Open in CyberChef</span>
+      </v-tooltip>
       <v-menu offset-y right bottom
         ><template #activator="{ on: onMenu, attrs }">
           <v-tooltip bottom>
@@ -315,6 +329,8 @@ import {
 import { mapActions, mapGetters, mapState } from "vuex";
 import ToolBar from "./ToolBar.vue";
 
+const CYBERCHEF_URL = "https://gchq.github.io/CyberChef/";
+
 export default {
   name: "Stream",
   components: { StreamData, ToolBar },
@@ -325,6 +341,7 @@ export default {
     }
     return {
       presentation: p,
+      selectionData: "",
       selectionQuery: "",
     };
   },
@@ -450,6 +467,16 @@ export default {
         document.getSelection().empty();
       }
     },
+    openInCyberChef() {
+      let data = this.selectionData;
+      if (data === "") {
+        for (const chunk of this.stream.stream.Data) {
+          data += atob(chunk.Content);
+        }
+      }
+      const encoded_data = btoa(data);
+      window.open(`${CYBERCHEF_URL}#input=${encodeURIComponent(encoded_data)}`);
+    },
     createMark() {
       EventBus.$emit("showCreateTagDialog", {
         tagType: "mark",

diff --git a/web/src/components/streamSelector.js b/web/src/components/streamSelector.js
@@ -48,20 +48,20 @@ function escape(text) {
     .join("");
 }
 
-function chunkToQueryPart(chunk, start, length = undefined) {
-  return `${"cs"[chunk.Direction]}data:"${escape(
-    atob(chunk.Content).substring(start, length)
-  )}"`;
+function chunkToQueryPart(chunk, data) {
+  return `${"cs"[chunk.Direction]}data:"${escape(data)}"`;
 }
 
 function onSelectionChange() {
   const selection = document.getSelection();
   if (selection.type !== "Range" || selection.isCollapsed) {
+    this.selectionData = "";
     this.selectionQuery = "";
     return;
   }
   const streamDataNode = this.$refs.streamData?.$el ?? this.$refs.streamData;
   if (selection.rangeCount !== 1 || streamDataNode == null) {
+    this.selectionData = "";
     this.selectionQuery = "";
     return;
   }
@@ -83,6 +83,7 @@ function onSelectionChange() {
     !streamDataNode.contains(startContainer) ||
     !streamDataNode.contains(endContainer)
   ) {
+    this.selectionData = "";
     this.selectionQuery = "";
     return;
   }
@@ -104,28 +105,32 @@ function onSelectionChange() {
       (i) => i === null
     )
   ) {
+    this.selectionData = "";
     this.selectionQuery = "";
     return;
   }
 
   if (startChunkIdx >= chunks.length) {
+    this.selectionData = "";
     this.selectionQuery = "";
     return;
   }
 
+  let queryData = "";
   let queryParts = [];
   for (
     let currentChunkIdx = startChunkIdx;
     currentChunkIdx <= endChunkIdx;
     currentChunkIdx++
   ) {
-    queryParts.push(
-      chunkToQueryPart(
-        chunks[currentChunkIdx],
-        currentChunkIdx === startChunkIdx ? startChunkOffset : 0,
-        currentChunkIdx === endChunkIdx ? endChunkOffset + 1 : undefined
-      )
-    );
+    const chunk = chunks[currentChunkIdx];
+    const start = currentChunkIdx === startChunkIdx ? startChunkOffset : 0;
+    const end =
+      currentChunkIdx === endChunkIdx ? endChunkOffset + 1 : undefined;
+    const data = atob(chunk.Content).substring(start, end);
+    queryData += data;
+    queryParts.push(chunkToQueryPart(chunk, data));
   }
+  this.selectionData = queryData;
   this.selectionQuery = queryParts.join(" then ");
 }