chore: adding vanilla js example

good-tools · Aug 26, 2024 · 23129fe · TsMask · Aug 27, 2024 · dehydr8
1 parent 9bf0184
commit 23129fe
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 0 deletions.
diff --git a/examples/vanilla/README.md b/examples/vanilla/README.md
@@ -0,0 +1,10 @@
+# VanillaJS Example
+
+## Run
+Serve the html files using any webserver, opening the HTML file directly causes content security errors in browsers when trying to load workers.
+
+```bash
+python3 -m http.server
+```
+
+Navigate to http://localhost:8000
diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wiregasm (Vanilla JS)</title>
+  </head>
+  <body>
+    <h1>Wiregasm (Vanilla JS)</h1>
+    <p id="output">Loading...</p>
+    <div id="fileSelector">
+      <input type="file" id="fileInput" />
+    </div>
+    <div id="captureDetails" style="margin-top: 10px; border: 1px solid" hidden>
+      <p>File: <span id="fileName"></span></p>
+      <p>Size: <span id="fileSize"></span> bytes</p>
+      <p>Encap Type: <span id="fileEncapType"></span></p>
+      <p>Type: <span id="fileType"></span></p>
+      <p>Packets: <span id="filePackets"></span></p>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/examples/vanilla/main.js b/examples/vanilla/main.js
@@ -0,0 +1,53 @@
+// Check if the browser supports Web Workers
+if (window.Worker) {
+  const worker = new Worker("worker.js");
+
+  // Event listener for file input change
+  document
+    .getElementById("fileInput")
+    .addEventListener("change", function (event) {
+      const file = event.target.files[0];
+      if (file) {
+        worker.postMessage({ type: "process", file: file });
+      }
+    });
+
+  // Event listener to receive messages from the worker
+  worker.onmessage = function (event) {
+    // document.getElementById("output").innerText = event.data;
+    const data = event.data;
+
+    if (data.type === "init") {
+      document.getElementById("output").innerText = "Wiregasm initialized.";
+    } else if (data.type === "error") {
+      document.getElementById("output").innerText = data.error;
+    } else if (data.type === "status") {
+      document.getElementById("output").innerText = data.status;
+    } else if (data.type === "processed" && data.data.code === 0) {
+      document.getElementById("fileName").innerText = data.name;
+      document.getElementById("fileSize").innerText =
+        data.data.summary.file_length;
+      document.getElementById("fileType").innerText =
+        data.data.summary.file_type;
+      // fileEncapType
+      document.getElementById("fileEncapType").innerText =
+        data.data.summary.file_encap_type;
+      document.getElementById("filePackets").innerText =
+        data.data.summary.packet_count;
+
+      document.getElementById("captureDetails").hidden = false;
+    } else {
+      console.log(data);
+    }
+  };
+
+  // Error handling
+  worker.onerror = function (error) {
+    console.error("Worker error:", error);
+    document.getElementById("output").innerText =
+      "Error occurred in the worker.";
+  };
+} else {
+  document.getElementById("output").innerText =
+    "Your browser does not support Web Workers.";
+}
diff --git a/examples/vanilla/worker.js b/examples/vanilla/worker.js
@@ -0,0 +1,100 @@
+// load the Wiregasm library and pako
+//
+// pako is only used to inflate the compressed wasm and data files
+// if you are not compressing the wasm and data files, you do not need to include pako
+//
+importScripts(
+  "https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.js",
+  "https://cdn.jsdelivr.net/npm/pako/dist/pako.js"
+);
+
+let lib = null;
+let uploadDir = null;
+let currentSession = null;
+
+const inflateRemoteBuffer = async (url) => {
+  const res = await fetch(url);
+  const buf = await res.arrayBuffer();
+  return pako.inflate(buf);
+};
+
+const fetchPackages = async () => {
+  console.log("Fetching packages");
+  let [wasm, data] = await Promise.all([
+    await inflateRemoteBuffer(
+      "https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.wasm.gz"
+    ),
+    await inflateRemoteBuffer(
+      "https://cdn.jsdelivr.net/npm/@goodtools/wiregasm/dist/wiregasm.data.gz"
+    ),
+  ]);
+
+  return { wasm, data };
+};
+
+fetchPackages()
+  .then(({ wasm, data }) => {
+    loadWiregasm({
+      wasmBinary: wasm.buffer,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      getPreloadedPackage(name, size) {
+        return data.buffer;
+      },
+      handleStatus: (type, status) =>
+        postMessage({ type: "status", code: type, status: status }),
+      handleError: (error) => postMessage({ type: "error", error: error }),
+    })
+      .then((l) => {
+        lib = l;
+
+        if (!lib.init()) {
+          throw new Error("Failed to initialize Wiregasm");
+        }
+
+        uploadDir = lib.getUploadDirectory();
+
+        postMessage({ type: "init" });
+      })
+      .catch((e) => {
+        postMessage({ type: "error", error: e });
+      });
+  })
+  .catch((e) => {
+    postMessage({ type: "error", error: e });
+  });
+
+// Event listener to receive messages from the main script
+onmessage = function (event) {
+  if (!lib) {
+    return;
+  }
+
+  const data = event.data;
+
+  if (data.type === "process") {
+    const f = data.file;
+    const reader = new FileReader();
+    reader.addEventListener("load", (event) => {
+      console.log("Processing", f.name);
+
+      // write the file to the emscripten filesystem
+      const buffer = new Uint8Array(event.target.result);
+      const path = `${uploadDir}/${f.name}`;
+      lib.FS.writeFile(path, buffer);
+
+      // delete the current session if it exists
+      if (currentSession !== null) {
+        currentSession.delete();
+        currentSession = null;
+      }
+
+      // create a new session
+      currentSession = new lib.DissectSession(path);
+
+      const res = currentSession.load();
+
+      postMessage({ type: "processed", name: f.name, data: res });
+    });
+    reader.readAsArrayBuffer(f);
+  }
+};