Merge pull request #2301 from s-ff/use-gzipped-preview

web: don't bundle preview data in build and release
mandiant · Aug 21, 2024 · c3f24c2 · c3f24c2
2 parents 22d20ed + 2c41d3c
commit c3f24c2
Show file tree

Hide file tree

Showing 8 changed files with 310 additions and 376 deletions.
diff --git a/web/explorer/src/components/NavBar.vue b/web/explorer/src/components/NavBar.vue
@@ -1,6 +1,8 @@
 <script setup>
 import Menubar from "primevue/menubar";
 import { RouterLink } from "vue-router";
+
+const isBundle = import.meta.env.MODE === "bundle";
 </script>
 
 <template>
@@ -13,8 +15,9 @@ import { RouterLink } from "vue-router";
         <template #end>
             <div class="flex align-items-center gap-3">
                 <a
+                    v-if="!isBundle"
                     v-ripple
-                    v-tooltip.right="'Download capa Explorer Web for offline usage'"
+                    v-tooltip.bottom="'Download capa Explorer Web for offline usage'"
                     href="./capa-explorer-web.zip"
                     download="capa-explorer-web.zip"
                     aria-label="Download capa Explorer Web release"

diff --git a/web/explorer/src/components/RuleMatchesTable.vue b/web/explorer/src/components/RuleMatchesTable.vue
@@ -3,7 +3,7 @@
         :value="filteredTreeData"
         v-model:expandedKeys="expandedKeys"
         size="small"
-        scrollable
+        :scrollable="true"
         :filters="filters"
         :filterMode="filterMode"
         sortField="namespace"
@@ -49,10 +49,11 @@
             </template>
         </Column>
 
-        <!-- Address/Process column  -->
+        <!-- Address column (only shown for static flavor)  -->
         <Column
+            v-if="props.data.meta.flavor === 'static'"
             field="address"
-            :header="props.data.meta.flavor === 'dynamic' ? 'Process' : 'Address'"
+            header="Address"
             filterMatchMode="contains"
             style="width: 8.5%"
             class="cursor-default"
@@ -252,7 +253,6 @@ const onRightClick = (event, instance) => {
         selectedNode.value = instance.node;
 
         // show the context menu
-        console.log(menu);
         menu.value.show(event);
     }
 };

diff --git a/web/explorer/src/components/UploadOptions.vue b/web/explorer/src/components/UploadOptions.vue
@@ -29,28 +29,34 @@
                     </FloatLabel>
                     <Button icon="pi pi-arrow-right" @click="$emit('load-from-url', loadURL)" :disabled="!loadURL" />
                 </div>
+                <template v-if="!isBundle">
+                    <Divider layout="vertical" class="hidden-mobile">
+                        <b>OR</b>
+                    </Divider>
+                    <Divider layout="horizontal" class="visible-mobile" align="center">
+                        <b>OR</b>
+                    </Divider>
 
-                <Divider layout="vertical" class="hidden-mobile">
-                    <b>OR</b>
-                </Divider>
-                <Divider layout="horizontal" class="visible-mobile" align="center">
-                    <b>OR</b>
-                </Divider>
-
-                <div class="flex-grow-1 flex align-items-center justify-content-center">
-                    <Button label="Preview Static" @click="$emit('load-demo-static')" class="p-button" />
-                </div>
-
-                <Divider layout="vertical" class="hidden-mobile">
-                    <b>OR</b>
-                </Divider>
-                <Divider layout="horizontal" class="visible-mobile" align="center">
-                    <b>OR</b>
-                </Divider>
+                    <div class="flex-grow-1 flex align-items-center justify-content-center">
+                        <Button
+                            label="Preview Static"
+                            @click="router.push({ path: '/', query: { rdoc: staticURL } })"
+                        />
+                    </div>
 
-                <div class="flex-grow-1 flex align-items-center justify-content-center">
-                    <Button label="Preview Dynamic" @click="$emit('load-demo-dynamic')" class="p-button" />
-                </div>
+                    <Divider layout="vertical" class="hidden-mobile">
+                        <b>OR</b>
+                    </Divider>
+                    <Divider layout="horizontal" class="visible-mobile" align="center">
+                        <b>OR</b>
+                    </Divider>
+                    <div class="flex-grow-1 flex align-items-center justify-content-center">
+                        <Button
+                            label="Preview Dynamic"
+                            @click="router.push({ path: '/', query: { rdoc: dynamicURL } })"
+                        />
+                    </div>
+                </template>
             </div>
         </template>
     </Card>
@@ -65,9 +71,17 @@ import FloatLabel from "primevue/floatlabel";
 import InputText from "primevue/inputtext";
 import Button from "primevue/button";
 
+import { useRouter } from "vue-router";
+const router = useRouter();
+
 const loadURL = ref("");
+const isBundle = import.meta.env.MODE === "bundle";
+
+defineEmits(["load-from-local", "load-from-url"]);
 
-defineEmits(["load-from-local", "load-from-url", "load-demo-static", "load-demo-dynamic"]);
+const dynamicURL =
+    "https://raw.githubusercontent.com/mandiant/capa-testfiles/master/rd/0000a65749f5902c4d82ffa701198038f0b4870b00a27cfca109f8f933476d82.json.gz";
+const staticURL = "https://raw.githubusercontent.com/mandiant/capa-testfiles/master/rd/al-khaser_x64.exe_.json";
 </script>
 
 <style scoped>

diff --git a/web/explorer/src/components/columns/RuleColumn.vue b/web/explorer/src/components/columns/RuleColumn.vue
@@ -11,7 +11,7 @@
 
         <!-- example node: "basic block @ 0x401000" or "explorer.exe" -->
         <template v-else-if="node.data.type === 'match location'">
-            <span class="text-sm font-italic">{{ node.data.name }}</span>
+            <span class="text-sm font-monospace text-xs">{{ node.data.name }}</span>
         </template>
 
         <!-- example node: "- or", "- and" -->
@@ -52,7 +52,7 @@
 
         <!-- example node: "exit(0) -> 0" (if the node type is call-info, we highlight node.data.name.callInfo) -->
         <template v-else-if="node.data.type === 'call-info'">
-            <highlightjs lang="c" :code="node.data.name.callInfo" />
+            <highlightjs lang="c" :code="node.data.name.callInfo" class="text-xs" />
         </template>
 
         <!-- example node: " = IMAGE_NT_SIGNATURE (PE)" -->

diff --git a/web/explorer/src/composables/useRdocLoader.js b/web/explorer/src/composables/useRdocLoader.js
@@ -6,83 +6,89 @@ export function useRdocLoader() {
     const MIN_SUPPORTED_VERSION = "7.0.0";
 
     /**
-     * Checks if the loaded rdoc version is supported
-     * @param {Object} rdoc - The loaded JSON rdoc data
-     * @returns {boolean} - True if version is supported, false otherwise
+     * Displays a toast notification.
+     * @param {string} severity - The severity level of the notification
+     * @param {string} summary - The title of the notification.
+     * @param {string} detail - The detailed message of the notification.
+     * @returns {void}
+     */
+    const showToast = (severity, summary, detail) => {
+        toast.add({ severity, summary, detail, life: 3000, group: "bc" }); // bc: bottom-center
+    };
+
+    /**
+     * Checks if the version of the loaded data is supported.
+     * @param {Object} rdoc - The loaded JSON data containing version information.
+     * @returns {boolean} True if the version is supported, false otherwise.
      */
     const checkVersion = (rdoc) => {
         const version = rdoc.meta.version;
         if (version < MIN_SUPPORTED_VERSION) {
-            console.error(
+            showToast(
+                "error",
+                "Unsupported Version",
                 `Version ${version} is not supported. Please use version ${MIN_SUPPORTED_VERSION} or higher.`
             );
-            toast.add({
-                severity: "error",
-                summary: "Unsupported Version",
-                detail: `Version ${version} is not supported. Please use version ${MIN_SUPPORTED_VERSION} or higher.`,
-                life: 5000,
-                group: "bc" // bottom-center
-            });
             return false;
         }
         return true;
     };
 
     /**
-     * Loads JSON rdoc data from various sources
-     * @param {File|string|Object} source - File object, URL string, or JSON object
-     * @returns {Promise<void>}
+     * Processes the content of a file or blob.
+     * @param {File|Blob} blob - The file or blob to process.
+     * @returns {Promise<Object>} A promise that resolves to the parsed JSON data.
+     * @throws {Error} If the content cannot be parsed as JSON.
+     */
+    const processBlob = async (blob) => {
+        const content = (await isGzipped(blob)) ? await decompressGzip(blob) : await readFileAsText(blob);
+        return JSON.parse(content);
+    };
+
+    /**
+     * Fetches data from a URL.
+     * @param {string} url - The URL to fetch data from.
+     * @returns {Promise<Blob>} A promise that resolves to the fetched data as a Blob.
+     * @throws {Error} If the fetch request fails.
+     */
+    const fetchFromUrl = async (url) => {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.blob();
+    };
+
+    /**
+     * Loads and processes RDOC data from various sources.
+     * @param {string|File|Object} source - The source of the RDOC data. Can be a URL string, a File object, or a JSON object.
+     * @returns {Promise<Object|null>} A promise that resolves to the processed RDOC data, or null if processing fails.
      */
     const loadRdoc = async (source) => {
         try {
             let data;
 
             if (typeof source === "string") {
                 // Load from URL
-                const response = await fetch(source);
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                data = await response.json();
+                const blob = await fetchFromUrl(source);
+                data = await processBlob(blob);
             } else if (source instanceof File) {
-                let fileContent;
-                if (await isGzipped(source)) {
-                    fileContent = await decompressGzip(source);
-                } else {
-                    fileContent = await readFileAsText(source);
-                }
-                data = JSON.parse(fileContent);
-            } else if (typeof source === "object") {
-                // Direct JSON object (Preview options)
-                data = source;
+                // Load from local
+                data = await processBlob(source);
             } else {
                 throw new Error("Invalid source type");
             }
 
             if (checkVersion(data)) {
-                toast.add({
-                    severity: "success",
-                    summary: "Success",
-                    detail: "JSON data loaded successfully",
-                    life: 3000,
-                    group: "bc" // bottom-center
-                });
+                showToast("success", "Success", "JSON data loaded successfully");
                 return data;
             }
         } catch (error) {
             console.error("Error loading JSON:", error);
-            toast.add({
-                severity: "error",
-                summary: "Error",
-                detail: "Failed to process the file. Please ensure it's a valid JSON or gzipped JSON file.",
-                life: 3000,
-                group: "bc" // bottom-center
-            });
+            showToast("error", "Failed to process the file", error.message);
         }
         return null;
     };
 
-    return {
-        loadRdoc
-    };
+    return { loadRdoc };
 }