Ib cleanup types (#3)

* Add utils file * Add back Response type * Move App.vue logic to own file
caido-community · Jan 8, 2025 · f156131 · f156131
1 parent e3358ac
commit f156131
Show file tree

Hide file tree

Showing 6 changed files with 232 additions and 191 deletions.
diff --git a/packages/frontend/src/data/response.ts b/packages/frontend/src/data/response.ts
diff --git 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
@@ -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
@@ -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
@@ -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>