feat(new tool): HAR file sanitizer

Fix #811

Author: sharevb

src/tools/har-sanitizer/har-sanitizer.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { downloadFile } from './lib/downloadFile';
+import { defaultScrubItems, getHarInfo, sanitize } from './lib/har_sanitize';
+
+// interface ScrubItems {
+//   words: Set<string>
+//   mimeTypes: Set<string>
+// }
+
+type ScrubState = Record<ScrubType, Record<string, boolean>>;
+type ScrubType =
+ | 'cookies'
+ | 'headers'
+ | 'queryArgs'
+ | 'postParams'
+ | 'mimeTypes';
+
+const typeMap: Record<ScrubType, string> = {
+  cookies: 'Cookies',
+  mimeTypes: 'Mime Types',
+  headers: 'Headers',
+  postParams: 'Post Body Params',
+  queryArgs: 'Query String Parameters',
+};
+
+const defaulScrubState: ScrubState = {
+  cookies: {},
+  headers: {},
+  queryArgs: {},
+  postParams: {},
+  mimeTypes: {},
+};
+const scrubItemsToClean = ref<ScrubState>(defaulScrubState);
+
+function getScrubableItems(input: string): ScrubState {
+  const rawItems = getHarInfo(input);
+  const output = { ...defaulScrubState };
+  Object.entries(rawItems).forEach(([key, items]: [string, string[]]) => {
+    output[key as ScrubType] = items.reduce(
+      (acc, curr) => {
+        if (!curr) {
+          return acc;
+        }
+        acc[curr] = defaultScrubItems.includes(curr);
+        return acc;
+      },
+      {} as Record<string, boolean>,
+    );
+    return null;
+  });
+  return output;
+}
+
+function sanitizeHar(input: string, scrubItems: ScrubState) {
+  const words = new Set<string>();
+  Object.entries(scrubItems.cookies).forEach(([key, val]) => {
+    if (val) {
+      words.add(key);
+    }
+  });
+  Object.entries(scrubItems.headers).forEach(([key, val]) => {
+    if (val) {
+      words.add(key);
+    }
+  });
+  Object.entries(scrubItems.queryArgs).forEach(([key, val]) => {
+    if (val) {
+      words.add(key);
+    }
+  });
+  Object.entries(scrubItems.postParams).forEach(([key, val]) => {
+    if (val) {
+      words.add(key);
+    }
+  });
+
+  const mimeTypes = new Set<string>();
+  Object.entries(scrubItems.mimeTypes).forEach(([key, val]) => {
+    if (val) {
+      mimeTypes.add(key);
+    }
+  });
+  return sanitize(input, {
+    scrubWords: [...words],
+    scrubMimetypes: [...mimeTypes],
+  });
+}
+
+const file = ref<File | null>(null);
+
+const error = ref('');
+
+// const base64OutputImage = ref('');
+// const fileName = ref('');
+// const format = ref('jpg');
+// const formats = [
+//   { value: 'jpg', label: 'JPEG' },
+//   { value: 'png', label: 'PNG' },
+// ];
+// const { download } = useDownloadFileFromBase64(
+//   {
+//     source: base64OutputImage,
+//     filename: fileName,
+//   });
+
+function readAsTextAsync(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsText(file);
+    reader.onload = () => resolve(reader.result?.toString() ?? '');
+    reader.onerror = error => reject(error);
+  });
+}
+
+const harContent = ref('');
+async function onFileUploaded(uploadedFile: File) {
+  file.value = uploadedFile;
+  harContent.value = await readAsTextAsync(uploadedFile);
+
+  error.value = '';
+  try {
+    scrubItemsToClean.value = getScrubableItems(harContent.value);
+  }
+  catch (e: any) {
+    error.value = e.toString();
+  }
+}
+
+function processHar() {
+  downloadFile(sanitizeHar(harContent.value, scrubItemsToClean.value), `sanitized-${file.value?.name}`);
+}
+</script>
+
+<template>
+  <div>
+    <div style="flex: 0 0 100%" mb-3>
+      <div mx-auto max-w-600px>
+        <c-file-upload
+          title="Drag and drop a HAR file here, or click to select a file"
+          accept=".har" @file-upload="onFileUploaded"
+        />
+      </div>
+    </div>
+
+    <c-alert v-if="error" title="Error">
+      {{ error }}
+    </c-alert>
+
+    <c-card v-for="(title, key) in typeMap" :key="key" :title="title">
+      <n-checkbox @update:checked="(allChecked: boolean) => Object.keys(scrubItemsToClean[key]).forEach((name) => scrubItemsToClean[key][name] = allChecked)">
+        All {{ title }}
+      </n-checkbox>
+      <n-checkbox v-for="(checked, name) in scrubItemsToClean[key]" :key="name" v-model:checked="scrubItemsToClean[key][name]">
+        {{ name }}
+      </n-checkbox>
+    </c-card>
+
+    <div v-if="!error" mt-3 flex justify-center>
+      <c-button @click="processHar()">
+        Sanitize and download
+      </c-button>
+    </div>
+  </div>
+</template>

src/tools/har-sanitizer/index.ts

@@ -0,0 +1,12 @@
+import { ClearFormatting } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'HAR Sanitizer',
+  path: '/har-sanitizer',
+  description: 'HAR Files Sanitizer',
+  keywords: ['har', 'sanitizer'],
+  component: () => import('./har-sanitizer.vue'),
+  icon: ClearFormatting,
+  createdAt: new Date('2024-06-17'),
+});

src/tools/har-sanitizer/lib/downloadFile.ts

@@ -0,0 +1,19 @@
+export function downloadFile(harOutput: string, name: string) {
+  const blob = new Blob([harOutput], { type: 'application/json' });
+
+  // Create a URL for the Blob
+  const url = URL.createObjectURL(blob);
+
+  // Create an anchor element to trigger the download
+  const a = document.createElement('a');
+  a.href = url;
+  // Set file name
+  a.download = name;
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  a.click();
+
+  // Clean up by removing the anchor and revoking the URL
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}