From f1561310d358dac5922bd4bd2692e906151564d9 Mon Sep 17 00:00:00 2001
From: Ian Bouchard <ian@atvh.dev>
Date: Wed, 8 Jan 2025 02:18:03 -0500
Subject: [PATCH] Ib cleanup types (#3)

* Add utils file

* Add back Response type

* Move App.vue logic to own file
---
 packages/frontend/src/data/response.ts        |  10 -
 .../src/services/InteractshService.ts         |  11 +-
 packages/frontend/src/types.ts                |  11 +
 packages/frontend/src/utils.ts                |  13 ++
 packages/frontend/src/views/App.vue           | 191 ++----------------
 packages/frontend/src/views/useLogic.ts       | 187 +++++++++++++++++
 6 files changed, 232 insertions(+), 191 deletions(-)
 delete mode 100644 packages/frontend/src/data/response.ts
 create mode 100644 packages/frontend/src/utils.ts
 create mode 100644 packages/frontend/src/views/useLogic.ts

diff --git a/packages/frontend/src/data/response.ts b/packages/frontend/src/data/response.ts
deleted file mode 100644
index 151c5d8..0000000
--- a/packages/frontend/src/data/response.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-interface Response {
-  protocol: string;
-  uniqueId: string; // Converted to camelCase for consistency
-  fullId: string; // Converted to camelCase for consistency
-  qType: string; // Query type
-  rawRequest: string;
-  rawResponse: string;
-  remoteAddress: string;
-  timestamp: string; // Use Date type for parsing if necessary
-}
diff --git a/packages/frontend/src/services/InteractshService.ts b/packages/frontend/src/services/InteractshService.ts
index b3d56c0..0e763bd 100644
--- a/packages/frontend/src/services/InteractshService.ts
+++ b/packages/frontend/src/services/InteractshService.ts
@@ -3,6 +3,7 @@ import { v4 as uuidv4 } from "uuid";
 import { type Ref, ref } from "vue";
 
 import { cryptoService } from "@/services/CryptoService";
+import { generateRandomID } from "@/utils";
 
 enum State {
   Idle = 0,
@@ -267,16 +268,6 @@ export const useClientService = () => {
     return JSON.stringify(session, null, 2); // Return JSON string for download or storage
   };
 
-  // Generate a random ID
-  const generateRandomID = (length: number): string => {
-    const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
-    let id = "";
-    for (let i = 0; i < length; i++) {
-      id += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-    return id;
-  };
-
   // Generate a new interaction URL
   const generateUrl = (): string => {
     if (
diff --git a/packages/frontend/src/types.ts b/packages/frontend/src/types.ts
index 2773e5b..5824b0e 100644
--- a/packages/frontend/src/types.ts
+++ b/packages/frontend/src/types.ts
@@ -2,3 +2,14 @@ import type { Caido } from "@caido/sdk-frontend";
 import type { API } from "backend";
 
 export type FrontendSDK = Caido<API, never>;
+
+export type Response = {
+  protocol: string;
+  uniqueId: string; // Converted to camelCase for consistency
+  fullId: string; // Converted to camelCase for consistency
+  qType: string; // Query type
+  rawRequest: string;
+  rawResponse: string;
+  remoteAddress: string;
+  timestamp: string; // Use Date type for parsing if necessary
+};
diff --git a/packages/frontend/src/utils.ts b/packages/frontend/src/utils.ts
new file mode 100644
index 0000000..c64076c
--- /dev/null
+++ b/packages/frontend/src/utils.ts
@@ -0,0 +1,13 @@
+/**
+ * Generate a random ID
+ * @param length - The length of the ID
+ * @returns The random ID
+ */
+export const generateRandomID = (length: number): string => {
+  const chars = "abcdefghijklmnopqrstuvwxyz0123456789";
+  let id = "";
+  for (let i = 0; i < length; i++) {
+    id += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return id;
+};
diff --git a/packages/frontend/src/views/App.vue b/packages/frontend/src/views/App.vue
index 60418f6..bdc689e 100644
--- a/packages/frontend/src/views/App.vue
+++ b/packages/frontend/src/views/App.vue
@@ -1,173 +1,26 @@
 <script setup lang="ts">
-import { useClipboard } from "@vueuse/core";
 import Button from "primevue/button";
 import Column from "primevue/column";
 import DataTable from "primevue/datatable";
-import { v4 as uuidv4 } from "uuid";
-import { computed, onMounted, ref } from "vue";
-
-import eventBus, { QuickSSRFBtn, QuickSSRFBtnCount } from "@/index";
-import { useSDK } from "@/plugins/sdk";
-import { useClientService } from "@/services/InteractshService";
-
-const sdk = useSDK();
-const responseEditorRef = ref();
-const requestEditorRef = ref();
-const request = ref();
-const response = ref();
-const clipboard = useClipboard();
-const cachedRow = ref<Response | undefined>(undefined);
-let clientService: ReturnType<typeof useClientService> | undefined = undefined;
-// Source de données réactive
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const sourceData = ref<any[]>([]); // Le tableau stockant les données
-
-const parseDnsResponse = (json: Record<string, unknown>) => {
-  return {
-    protocol: json.protocol,
-    uniqueId: json["unique-id"],
-    fullId: json["full-id"],
-    qType: json["q-type"],
-    rawRequest: json["raw-request"],
-    rawResponse: json["raw-response"],
-    remoteAddress: json["remote-address"],
-    timestamp: json.timestamp,
-  };
-};
-
-function waitForEditorRef() {
-  return new Promise<void>((resolve) => {
-    const interval = setInterval(() => {
-      if (requestEditorRef.value && responseEditorRef.value) {
-        clearInterval(interval); // Stop checking
-        resolve(); // Continue execution
-      }
-    }, 100); // Check every 100ms
-  });
-}
-
-function handleUpdateSelected() {
-  waitForEditorRef().then(() => {
-    if (cachedRow.value) {
-      onSelectedData(cachedRow.value); // Trigger with cached data
-    }
-  });
-}
-eventBus.addEventListener("updateSelected", handleUpdateSelected);
-
-// Ajouter les données de `parseDnsResponse` à la source
-const addToSourceData = (response: Record<string, unknown>) => {
-  QuickSSRFBtnCount.value += 1;
-  QuickSSRFBtn.setCount(QuickSSRFBtnCount.value);
-  sourceData.value.push(response);
-};
-
-// Mise à jour des données du tableau en temps réel
-const tableData = computed(() =>
-  sourceData.value.map((item, index) => ({
-    req: index + 1,
-    dateTime: new Date(item.timestamp).toISOString(),
-    type: item.protocol.toUpperCase(),
-    payload: item.fullId,
-    source: item.remoteAddress,
-  })),
-);
-
-// Gestion de la sélection de ligne
-const selectedRow = ref<Response | undefined>(undefined);
-
-const onRowClick = (event: { data: { req: number } }) => {
-  QuickSSRFBtnCount.value = 0;
-  QuickSSRFBtn.setCount(QuickSSRFBtnCount.value);
-  const selectedIndex = event.data.req - 1;
-  selectedRow.value = sourceData.value[selectedIndex];
-  cachedRow.value = selectedRow.value;
-  onSelectedData(selectedRow.value);
-};
-
-// Méthode appelée lors de la sélection d’une ligne
-const onSelectedData = (selectedData: Response | undefined) => {
-  responseEditorRef.value.getEditorView().dispatch({
-    changes: {
-      from: 0,
-      to: responseEditorRef.value.getEditorView().state.doc.length,
-      insert: selectedData?.rawResponse,
-    },
-  });
-
-  requestEditorRef.value.getEditorView().dispatch({
-    changes: {
-      from: 0,
-      to: requestEditorRef.value.getEditorView().state.doc.length,
-      insert: selectedData?.rawRequest,
-    },
-  });
-};
-
-// Lancer le service et écouter les interactions
-const onGenerateClick = async () => {
-  if (clientService === null) {
-    clientService = useClientService();
-
-    await clientService.start(
-      {
-        serverURL: "https://oast.site",
-        token: uuidv4(),
-        keepAliveInterval: 30000,
-      },
-      (interaction: Record<string, unknown>) => {
-        const resp = parseDnsResponse(interaction);
-        addToSourceData(resp); // Ajouter à la source de données
-      },
-    );
-  }
-  const url = clientService?.generateUrl();
-  if (url) {
-    await clipboard.copy(url);
-    sdk.window.showToast("Copy to clipboard.", { variant: "success" });
-  }
-};
-
-const onManualPooling = () => {
-  clientService?.poll();
-};
-const onClearData = () => {
-  sourceData.value = [];
-  cachedRow.value = undefined;
-  responseEditorRef.value.getEditorView().dispatch({
-    changes: {
-      from: 0,
-      to: responseEditorRef.value.getEditorView().state.doc.length,
-      insert: "",
-    },
-  });
-
-  requestEditorRef.value.getEditorView().dispatch({
-    changes: {
-      from: 0,
-      to: requestEditorRef.value.getEditorView().state.doc.length,
-      insert: "",
-    },
-  });
-  if (QuickSSRFBtnCount.value > 0) {
-    QuickSSRFBtnCount.value = 0;
-    QuickSSRFBtn.setCount(QuickSSRFBtnCount.value);
-  }
-};
-
-const onSupport = () => {
-  window.open("https://github.com/caido-community/quickssrf", "_blank");
-};
+import { onMounted } from "vue";
+
+import { useLogic } from "./useLogic";
+
+const {
+  requestEl,
+  responseEl,
+  onGenerateClick,
+  onManualPoll,
+  onClearData,
+  onSupport,
+  onRowClick,
+  tableData,
+  selectedRow,
+  initializeEditors,
+} = useLogic();
 
 onMounted(() => {
-  const responseEditor = sdk.ui.httpResponseEditor();
-  const requestEditor = sdk.ui.httpRequestEditor();
-
-  response.value.appendChild(responseEditor.getElement());
-  request.value.appendChild(requestEditor.getElement());
-
-  responseEditorRef.value = responseEditor;
-  requestEditorRef.value = requestEditor;
+  initializeEditors();
 });
 </script>
 
@@ -195,11 +48,7 @@ onMounted(() => {
                 style="width: 200px"
                 @click="onGenerateClick"
               />
-              <Button
-                label="Pooling"
-                style="width: 200px"
-                @click="onManualPooling"
-              />
+              <Button label="Poll" style="width: 200px" @click="onManualPoll" />
               <Button
                 label="Clear Data"
                 style="width: 200px"
@@ -243,9 +92,9 @@ onMounted(() => {
     <!-- Horizontal Split Below -->
     <div class="w-full flex flex-1 gap-4 overflow-hidden">
       <!-- Request Component -->
-      <div ref="request" class="h-full w-1/2"></div>
+      <div ref="requestEl" class="h-full w-1/2"></div>
       <!-- Response Component -->
-      <div ref="response" class="h-full w-1/2"></div>
+      <div ref="responseEl" class="h-full w-1/2"></div>
     </div>
   </div>
 </template>
diff --git a/packages/frontend/src/views/useLogic.ts b/packages/frontend/src/views/useLogic.ts
new file mode 100644
index 0000000..40f98d1
--- /dev/null
+++ b/packages/frontend/src/views/useLogic.ts
@@ -0,0 +1,187 @@
+import { useClipboard } from "@vueuse/core";
+import { v4 as uuidv4 } from "uuid";
+import { computed, ref } from "vue";
+
+import eventBus, { QuickSSRFBtn, QuickSSRFBtnCount } from "@/index";
+import { useSDK } from "@/plugins/sdk";
+import { useClientService } from "@/services/InteractshService";
+import { type Response } from "@/types";
+
+export const useLogic = () => {
+  const sdk = useSDK();
+  const responseEditorRef = ref();
+  const requestEditorRef = ref();
+
+  const cachedRow = ref<Response | undefined>(undefined);
+  let clientService: ReturnType<typeof useClientService> | undefined =
+    undefined;
+  // Source de données réactive
+  const sourceData = ref<Response[]>([]); // Le tableau stockant les données
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const parseDnsResponse = (json: any): Response => {
+    return {
+      protocol: json.protocol,
+      uniqueId: json["unique-id"],
+      fullId: json["full-id"],
+      qType: json["q-type"],
+      rawRequest: json["raw-request"],
+      rawResponse: json["raw-response"],
+      remoteAddress: json["remote-address"],
+      timestamp: json.timestamp,
+    };
+  };
+
+  function waitForEditorRef() {
+    return new Promise<void>((resolve) => {
+      const interval = setInterval(() => {
+        if (requestEditorRef.value && responseEditorRef.value) {
+          clearInterval(interval); // Stop checking
+          resolve(); // Continue execution
+        }
+      }, 100); // Check every 100ms
+    });
+  }
+
+  function handleUpdateSelected() {
+    waitForEditorRef().then(() => {
+      if (cachedRow.value) {
+        onSelectedData(cachedRow.value); // Trigger with cached data
+      }
+    });
+  }
+  eventBus.addEventListener("updateSelected", handleUpdateSelected);
+
+  // Ajouter les données de `parseDnsResponse` à la source
+  const addToSourceData = (response: Response) => {
+    QuickSSRFBtnCount.value += 1;
+    QuickSSRFBtn.setCount(QuickSSRFBtnCount.value);
+    sourceData.value.push(response);
+  };
+
+  // Mise à jour des données du tableau en temps réel
+  const tableData = computed(() =>
+    sourceData.value.map((item, index) => ({
+      req: index + 1,
+      dateTime: new Date(item.timestamp).toISOString(),
+      type: item.protocol.toUpperCase(),
+      payload: item.fullId,
+      source: item.remoteAddress,
+    })),
+  );
+
+  // Gestion de la sélection de ligne
+  const selectedRow = ref<Response | undefined>(undefined);
+
+  const onRowClick = (event: { data: { req: number } }) => {
+    QuickSSRFBtnCount.value = 0;
+    QuickSSRFBtn.setCount(QuickSSRFBtnCount.value);
+    const selectedIndex = event.data.req - 1;
+    selectedRow.value = sourceData.value[selectedIndex];
+    cachedRow.value = selectedRow.value;
+    onSelectedData(selectedRow.value);
+  };
+
+  // Méthode appelée lors de la sélection d’une ligne
+  const onSelectedData = (selectedData: Response | undefined) => {
+    responseEditorRef.value.getEditorView().dispatch({
+      changes: {
+        from: 0,
+        to: responseEditorRef.value.getEditorView().state.doc.length,
+        insert: selectedData?.rawResponse,
+      },
+    });
+
+    requestEditorRef.value.getEditorView().dispatch({
+      changes: {
+        from: 0,
+        to: requestEditorRef.value.getEditorView().state.doc.length,
+        insert: selectedData?.rawRequest,
+      },
+    });
+  };
+
+  // Lancer le service et écouter les interactions
+  const clipboard = useClipboard();
+  const onGenerateClick = async () => {
+    if (!clientService) {
+      clientService = useClientService();
+
+      await clientService.start(
+        {
+          serverURL: "https://oast.site",
+          token: uuidv4(),
+          keepAliveInterval: 30000,
+        },
+        (interaction: Record<string, unknown>) => {
+          const resp = parseDnsResponse(interaction);
+          addToSourceData(resp); // Ajouter à la source de données
+        },
+      );
+    }
+    const url = clientService?.generateUrl();
+    console.log(clientService);
+    if (url) {
+      await clipboard.copy(url);
+      sdk.window.showToast("Copy to clipboard.", { variant: "success" });
+    }
+  };
+
+  const onManualPoll = () => {
+    clientService?.poll();
+  };
+
+  const onClearData = () => {
+    sourceData.value = [];
+    cachedRow.value = undefined;
+    responseEditorRef.value.getEditorView().dispatch({
+      changes: {
+        from: 0,
+        to: responseEditorRef.value.getEditorView().state.doc.length,
+        insert: "",
+      },
+    });
+
+    requestEditorRef.value.getEditorView().dispatch({
+      changes: {
+        from: 0,
+        to: requestEditorRef.value.getEditorView().state.doc.length,
+        insert: "",
+      },
+    });
+    if (QuickSSRFBtnCount.value > 0) {
+      QuickSSRFBtnCount.value = 0;
+      QuickSSRFBtn.setCount(QuickSSRFBtnCount.value);
+    }
+  };
+
+  const onSupport = () => {
+    window.open("https://github.com/caido-community/quickssrf", "_blank");
+  };
+
+  const requestEl = ref<HTMLElement | undefined>(undefined);
+  const responseEl = ref<HTMLElement | undefined>(undefined);
+  const initializeEditors = () => {
+    const responseEditor = sdk.ui.httpResponseEditor();
+    const requestEditor = sdk.ui.httpRequestEditor();
+
+    responseEl.value?.appendChild(responseEditor.getElement());
+    requestEl.value?.appendChild(requestEditor.getElement());
+
+    responseEditorRef.value = responseEditor;
+    requestEditorRef.value = requestEditor;
+  };
+
+  return {
+    requestEl,
+    responseEl,
+    initializeEditors,
+    onGenerateClick,
+    onManualPoll,
+    onClearData,
+    onSupport,
+    onRowClick,
+    tableData,
+    selectedRow,
+  };
+};