feat: Outlook MSG Parser

components.d.ts

@@ -141,10 +141,14 @@ declare module '@vue/runtime-core' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSpace: typeof import('naive-ui')['NSpace']
     NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
+    OutlookParser: typeof import('./src/tools/outlook-parser/outlook-parser.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
     PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']
     PdfSignatureDetails: typeof import('./src/tools/pdf-signature-checker/components/pdf-signature-details.vue')['default']

package.json

@@ -37,6 +37,8 @@
   "dependencies": {
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
+    "@kenjiuno/decompressrtf": "^0.1.4",
+    "@kenjiuno/msgreader": "^1.22.0",
     "@sindresorhus/slugify": "^2.2.1",
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
@@ -65,6 +67,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "iconv-lite": "^0.6.3",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
@@ -83,6 +86,7 @@
     "plausible-tracker": "^0.3.8",
     "postal-mime": "^2.2.7",
     "qrcode": "^1.5.1",
+    "rtf-stream-parser": "^3.8.0",
     "sql-formatter": "^13.0.0",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",
@@ -135,6 +139,7 @@
     "unplugin-icons": "^0.17.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.4.9",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-pwa": "^0.16.0",
     "vite-plugin-vue-markdown": "^0.23.5",
     "vite-svg-loader": "^4.0.0",

src/composable/downloadBase64.ts

@@ -1,6 +1,7 @@
 import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
-import type { Ref } from 'vue';
+import type { MaybeRef, Ref } from 'vue';
 import _ from 'lodash';
+import { get } from '@vueuse/core';
 
 export {
   getMimeTypeFromBase64,
@@ -75,21 +76,11 @@ function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
 }
 
 function useDownloadFileFromBase64(
-  { source, filename, extension, fileMimeType }:
-  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
-  return {
-    download() {
-      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
-    },
-  };
-}
-
-function useDownloadFileFromBase64Refs(
   { source, filename, extension }:
-  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  { source: MaybeRef<string>; filename?: MaybeRef<string>; extension?: MaybeRef<string> }) {
   return {
     download() {
-      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+      downloadFromBase64({ sourceValue: get(source), filename: get(filename), extension: get(extension) });
     },
   };
 }
@@ -116,3 +107,13 @@ function previewImageFromBase64(base64String: string): HTMLImageElement {
 
   return img;
 }
+
+function useDownloadFileFromBase64Refs(
+  { source, filename, extension }:
+  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  return {
+    download() {
+      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+    },
+  };
+}

src/tools/email-parser/email-parser.vue

@@ -13,9 +13,11 @@ const parsedEmail = computedAsync(async () => {
   try {
     if (inputType.value === 'file' && file) {
       return await PostalMime.parse(await file.arrayBuffer());
-    } else if (inputType.value === 'content' && emailContentValue) {
+    }
+    else if (inputType.value === 'content' && emailContentValue) {
       return await PostalMime.parse(emailContentValue);
-    } else {
+    }
+    else {
       return null;
     }
   }

src/tools/index.ts

@@ -3,6 +3,7 @@ import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
 import { tool as emailParser } from './email-parser';
+import { tool as outlookParser } from './outlook-parser';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -167,6 +168,7 @@ export const toolsByCategory: ToolCategory[] = [
       macAddressGenerator,
       ipv6UlaGenerator,
       emailParser,
+      outlookParser,
     ],
   },
   {

src/tools/outlook-parser/index.ts

@@ -0,0 +1,12 @@
+import { Mail } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Outlook MSG Parser',
+  path: '/outlook-parser',
+  description: 'Parse Outlook MSG Files',
+  keywords: ['outlook', 'email', 'msg', 'parser'],
+  component: () => import('./outlook-parser.vue'),
+  icon: Mail,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/outlook-parser/outlook-parser.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { Buffer } from 'node:buffer';
+import MsgReader, { type FieldsData } from '@kenjiuno/msgreader';
+import { getProps } from '@kenjiuno/msgreader/lib/Defs.js';
+import { deEncapsulateSync } from 'rtf-stream-parser';
+import { decompressRTF } from '@kenjiuno/decompressrtf';
+import iconv from 'iconv-lite';
+
+const fileInput = ref() as Ref<File | null>;
+const error = ref('');
+
+function getPropertyName(tag: string | undefined) {
+  if (!tag) {
+    return '';
+  }
+  const tagLower = tag.toLocaleLowerCase();
+  const prop = getProps().find(p => p.key?.toLocaleLowerCase() === tagLower);
+  if (!prop) {
+    return tag;
+  }
+  return `${prop.name} (${prop.area})`;
+}
+
+const parsedEmailRaw = computedAsync(async () => {
+  const file = fileInput.value;
+  error.value = '';
+  if (file == null) {
+    return null;
+  }
+  try {
+    const msg = new MsgReader(await file.arrayBuffer());
+    msg.parserConfig = {
+      includeRawProps: true,
+    };
+    return msg;
+  }
+  catch (e: any) {
+    error.value = e.toString();
+    return null;
+  }
+});
+const parsedEmail = computed(() => parsedEmailRaw.value?.getFileData());
+const parsedRtf = computed(() => {
+  if (!parsedEmail.value?.compressedRtf) {
+    return { rtf: '', html: '' };
+  }
+  try {
+    const rtfBlob = decompressRTF(Array.from(parsedEmail.value?.compressedRtf));
+    const rtfText = iconv.decode(
+      Buffer.from(rtfBlob),
+      'latin1',
+    );
+    try {
+      return { rtf: rtfText, html: deEncapsulateSync(rtfText, { decode: iconv.decode })?.text };
+    }
+    catch (dex: any) {
+      return { rtf: rtfText, html: dex.toString() };
+    }
+  }
+  catch (ex: any) {
+    return { rtf: ex.toString(), html: '' };
+  }
+});
+
+function downloadFile(attachment: FieldsData) {
+  const attachmentData = parsedEmailRaw.value?.getAttachment(attachment);
+  if (!attachmentData) {
+    return;
+  }
+  const blob = new Blob([attachmentData.content], { type: 'application/octet-stream' });
+  const downloadUrl = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = downloadUrl;
+  a.download = attachmentData.fileName;
+  document.body.appendChild(a);
+  a.click();
+  URL.revokeObjectURL(downloadUrl);
+}
+
+function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Input" mb-2>
+      <c-file-upload
+        title="Drag and drop MSG file here, or click to select a file"
+        @file-upload="onUpload"
+      />
+    </c-card>
+
+    <c-alert v-if="error">
+      {{ error }}
+    </c-alert>
+
+    <c-card v-if="!error && parsedEmail" title="Output">
+      <input-copyable v-if="fileInput?.name" label="File Name" :value="fileInput?.name" />
+      <input-copyable v-if="parsedEmail.creationTime" label="Creation Date" :value="parsedEmail.creationTime" />
+      <input-copyable v-if="parsedEmail.clientSubmitTime" label="Submit Date" :value="parsedEmail.clientSubmitTime" />
+      <input-copyable v-if="parsedEmail.messageDeliveryTime" label="Delivery Date" :value="parsedEmail.messageDeliveryTime" />
+      <input-copyable v-if="parsedEmail.lastModificationTime" label="Last Mod. Date" :value="parsedEmail.lastModificationTime" />
+      <c-card title="Recipients" mt-2>
+        <input-copyable
+          v-for="(h, index) in parsedEmail.recipients || []"
+          :key="index"
+          :label="h.recipType || 'unk'"
+          :value="`${h.name}/${h.email}`"
+        />
+      </c-card>
+      <input-copyable v-if="parsedEmail.subject" label="Subject" :value="parsedEmail.subject" />
+      <c-card v-if="parsedEmail.body" title="Plain Content" mb-2>
+        <details>
+          <summary>See content</summary>
+          <textarea-copyable :value="parsedEmail.body" />
+        </details>
+      </c-card>
+      <c-card v-if="parsedEmail.bodyHtml" title="Html Content" mb-2>
+        <details>
+          <summary>See content</summary>
+          <textarea-copyable :value="parsedEmail.bodyHtml" word-wrap />
+        </details>
+      </c-card>
+      <c-card v-if="parsedRtf.rtf || parsedRtf.html" title="RTF Content" mb-2>
+        <details>
+          <summary>See Raw RTF</summary>
+          <textarea-copyable :value="parsedRtf.rtf" word-wrap />
+        </details>
+        <details>
+          <summary>See RTF converted HTML</summary>
+          <textarea-copyable :value="parsedRtf.html" word-wrap />
+        </details>
+      </c-card>
+      <c-card v-if="parsedEmail?.attachments?.length" title="Attachments" mb-2>
+        <n-table>
+          <thead>
+            <tr>
+              <th scope="col">
+                Attachment
+              </th><th scope="col" />
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(h, index) in parsedEmail.attachments || []"
+              :key="index"
+            >
+              <td>
+                {{ `${h.fileName || h.fileNameShort || 'noname'}` }}
+              </td>
+              <td>
+                <c-button @click="downloadFile(h)">
+                  Download
+                </c-button>
+              </td>
+            </tr>
+          </tbody>
+        </n-table>
+      </c-card>
+
+      <input-copyable v-if="parsedEmail.messageId" label="Message Id" :value="parsedEmail.messageId" />
+      <input-copyable v-if="parsedEmail.senderName" label="Sender (name)" :value="parsedEmail.senderName" />
+      <input-copyable v-if="parsedEmail.senderEmail" label="Sender (email)" :value="parsedEmail.senderEmail" />
+
+      <c-card v-if="parsedEmail.headers" title="All Headers" mt-2>
+        <textarea-copyable :value="parsedEmail.headers" />
+      </c-card>
+
+      <c-card title="All RawProps" mt-2>
+        <input-copyable
+          v-for="(h, index) in parsedEmail.rawProps || []"
+          :key="index"
+          :label="h.propertyName || getPropertyName(h.propertyTag)"
+          :value="h.value"
+        />
+      </c-card>
+    </c-card>
+  </div>
+</template>

vite.config.ts

@@ -15,6 +15,7 @@ import { VitePWA } from 'vite-plugin-pwa';
 import markdown from 'vite-plugin-vue-markdown';
 import svgLoader from 'vite-svg-loader';
 import { configDefaults } from 'vitest/config';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 const baseUrl = process.env.BASE_URL ?? '/';
 
@@ -97,6 +98,7 @@ export default defineConfig({
       resolvers: [NaiveUiResolver(), IconsResolver({ prefix: 'icon' })],
     }),
     Unocss(),
+    nodePolyfills(),
   ],
   base: baseUrl,
   resolve: {