Update web pages (#2354)

* extend descriptions and improve styling * s/capa explorer web/capa Explorer Web * set htmlWhitespaceSensitivity to ignore and reformat
2025-12-05 20:40:05 -08:00 · 2024-09-11 20:28:04 +02:00
parent f236afe2a6
commit e07ff1c76c
16 changed files with 86 additions and 52 deletions
--- a/.github/workflows/web-deploy.yml
+++ b/.github/workflows/web-deploy.yml
@@ -33,7 +33,7 @@ jobs:
          path: './web/public'

  build-explorer:
-    name: Build capa explorer web
+    name: Build capa Explorer Web
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ capa detects capabilities in executable files.
 You run it against a PE, ELF, .NET module, shellcode file, or a sandbox report and it tells you what it thinks the program can do.
 For example, it might suggest that the file is a backdoor, is capable of installing services, or relies on HTTP to communicate.

-To interactively inspect capa results in your browser use the [capa explorer web](https://mandiant.github.io/capa/explorer/).
+To interactively inspect capa results in your browser use the [capa Explorer Web](https://mandiant.github.io/capa/explorer/).

 If you want to inspect or write capa rules, head on over to the [capa-rules repository](https://github.com/mandiant/capa-rules). Otherwise, keep reading.

@@ -89,12 +89,12 @@ Download stable releases of the standalone capa binaries [here](https://github.c

 To use capa as a library or integrate with another tool, see [doc/installation.md](https://github.com/mandiant/capa/blob/master/doc/installation.md) for further setup instructions.

-# capa explorer web
-The [capa explorer web](https://mandiant.github.io/capa/explorer/) enables you to interactively explore capa results in your web browser. Besides the online version you can download a standalone HTML file for local offline usage.
+# capa Explorer Web
+The [capa Explorer Web](https://mandiant.github.io/capa/explorer/) enables you to interactively explore capa results in your web browser. Besides the online version you can download a standalone HTML file for local offline usage.

-![capa explorer web screenshot](https://github.com/mandiant/capa/blob/master/doc/img/capa_web_explorer.png)
+![capa Explorer Web screenshot](https://github.com/mandiant/capa/blob/master/doc/img/capa_web_explorer.png)

-More details on the web UI is available in the [capa explorer web README](https://github.com/mandiant/capa/blob/master/web/explorer/README.md).
+More details on the web UI is available in the [capa Explorer Web README](https://github.com/mandiant/capa/blob/master/web/explorer/README.md).

 # example

--- a/capa/main.py
+++ b/capa/main.py
@@ -881,7 +881,7 @@ def main(argv: Optional[List[str]] = None):
        You can see the rule set here:
          https://github.com/mandiant/capa-rules

-        You can load capa JSON output to capa explorer web:
+        You can load capa JSON output to capa Explorer Web:
          https://github.com/mandiant/capa/explorer

        To provide your own rule set, use the `-r` flag:
--- a/web/explorer/.prettierrc.json
+++ b/web/explorer/.prettierrc.json
@@ -4,5 +4,6 @@
    "tabWidth": 4,
    "singleQuote": false,
    "printWidth": 120,
-    "trailingComma": "none"
+    "trailingComma": "none",
+    "htmlWhitespaceSensitivity": "ignore"
 }
--- a/web/explorer/DEVELOPMENT.md
+++ b/web/explorer/DEVELOPMENT.md
@@ -1,6 +1,6 @@
-# Development Guide for capa explorer web
+# Development Guide for capa Explorer Web

-This guide will help you set up the capa explorer web project for local development.
+This guide will help you set up the capa Explorer Web project for local development.

 ## Prerequisites

@@ -104,7 +104,7 @@ npm run format

 ## Working with PrimeVue Components

-capa explorer web uses the PrimeVue UI component library. When adding new features or modifying existing ones, refer to the [PrimeVue documentation](https://primevue.org/vite) for available components and their usage.
+capa Explorer Web uses the PrimeVue UI component library. When adding new features or modifying existing ones, refer to the [PrimeVue documentation](https://primevue.org/vite) for available components and their usage.

 ## Best Practices

--- a/web/explorer/README.md
+++ b/web/explorer/README.md
@@ -1,6 +1,6 @@
-# capa explorer web
+# capa Explorer Web

-capa explorer web is a browser-based user interface for exploring program capabilities identified by capa. It provides an intuitive and interactive way to analyze and visualize the results of capa analysis.
+capa Explorer Web is a browser-based user interface for exploring program capabilities identified by capa. It provides an intuitive and interactive way to analyze and visualize the results of capa analysis.

 ## Features

@@ -11,13 +11,13 @@ capa explorer web is a browser-based user interface for exploring program capabi

 ## Getting Started

-1. **Access the application**: Open capa explorer web in your web browser.
-   You can start using capa explorer web by accessing [https://mandiant.github.io/capa](https://mandiant.github.io/capa/explorer) or running it locally by downloading the offline release from the top right-hand corner and opening it in your web browser.
+1. **Access the application**: Open capa Explorer Web in your web browser.
+   You can start using capa Explorer Web by accessing [https://mandiant.github.io/capa](https://mandiant.github.io/capa/explorer) or running it locally by downloading the offline release from the top right-hand corner and opening it in your web browser.

 2. **Import capa results**:

    - Click on "Upload from local" to select a capa analysis document file from your computer (with a version higher than 7.0.0).
-      - You can generate the analysis document by running `capa.exe -j results.json sample.exe_`
+        - You can generate the analysis document by running `capa.exe -j results.json sample.exe_`
    - Or, paste a URL to a capa JSON file and click the arrow button to load it.
        - Like for the other import mechanisms, loading of both plain (`.json`) and GZIP compressed JSON (`.json.gz`) files is supported).
    - Alternatively, use the "Preview Static" or "Preview Dynamic" for sample data.
@@ -41,4 +41,4 @@ We welcome your feedback and contributions to improve the web-based capa explore

 ---

-For developers interested in building or contributing to capa explorer web, please refer to our [Development Guide](DEVELOPMENT.md).
+For developers interested in building or contributing to capa Explorer Web, please refer to our [Development Guide](DEVELOPMENT.md).
--- a/web/explorer/index.html
+++ b/web/explorer/index.html
@@ -4,8 +4,12 @@
        <meta charset="UTF-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>capa explorer web</title>
-        <script defer src="https://cloud.umami.is/script.js" data-website-id="0bb8ff9e-fbcc-4ee2-9f9f-b337a2e8cc7f"></script>
+        <title>capa Explorer Web</title>
+        <script
+            defer
+            src="https://cloud.umami.is/script.js"
+            data-website-id="0bb8ff9e-fbcc-4ee2-9f9f-b337a2e8cc7f"
+        ></script>
    </head>
    <body>
        <div id="app"></div>
--- a/web/explorer/src/components/BannerHeader.vue
+++ b/web/explorer/src/components/BannerHeader.vue
@@ -5,7 +5,7 @@
    >
        <div class="font-bold mr-8">This is an early release</div>
        <div class="align-items-center hidden lg:flex">
-            <span class="line-height-3">Please report any bugs, enhancements or features in the </span>
+            <span class="line-height-3">Please report any bugs, enhancements or features in the</span>
            <a
                v-ripple
                href="https://github.com/mandiant/capa/issues"
--- a/web/explorer/src/components/DescriptionPanel.vue
+++ b/web/explorer/src/components/DescriptionPanel.vue
@@ -3,33 +3,62 @@
        <div class="text-center">
            <h1>
                <img src="@/assets/images/logo-full.png" alt="Capa: identify program capabilities" />
-                <h3 class="font-medium" style="color: rgb(176, 26, 26)">capa: identify program capabilities</h3>
+                <h3 class="font-medium" style="color: rgb(37, 147, 215)">capa: identify program capabilities</h3>
            </h1>
        </div>
        <div>
            <p class="text-xl p-3 max-w-75rem" style="max-width: 75ch">
-                capa explorer web is a web-based tool for exploring the capabilities identified in a program. It can be
-                used to search and display the rule matches in different viewing modes.
+                capa Explorer Web is a web-based tool to explore the capabilities identified by capa. This tool allows
+                you to interactively browse and display capa results in multiple viewing modes.
            </p>
        </div>
        <div class="bg-blue-50 border-round p-3 pb-4 text-center max-w-75rem mt-4">
            <p class="text-700 text-sm m-0">New to capa? Follow these quick steps to get started:</p>
            <p class="text-700 text-sm mb-3"></p>
            <ol class="text-left text-sm pl-4 mb-3">
-                <li class="mb-2">Install capa: <code>pip install flare-capa</code></li>
-                <li class="mb-2">Generate JSON output: <code>capa -j /path/to/file > result.json</code></li>
-                <li>Upload the JSON file here to explore the results</li>
+                <li class="mb-2">
+                    <a href="https://github.com/mandiant/capa/blob/master/doc/installation.md" class="underline">
+                        Install capa
+                    </a>
+                    , e.g.
+                    <ul>
+                        <li>
+                            download the latest
+                            <a href="https://github.com/mandiant/capa/releases" class="underline">
+                                standalone executable release
+                            </a>
+                        </li>
+                        <li>
+                            or run
+                            <code>$ pip install flare-capa</code>
+                        </li>
+                    </ul>
+                </li>
+                <li class="mb-2">
+                    Analyze a sample and save the JSON results:
+                    <ul>
+                        <li><code>$ capa -j /path/to/file > result.json</code></li>
+                    </ul>
+                </li>
+                <li>Load the JSON results file into capa Explorer Web</li>
            </ol>
            <p class="text-700 text-sm m-0">
                For more detailed information, explore the
                <a
-                    href="https://github.com/mandiant/capa"
+                    href="https://github.com/mandiant/capa/tree/master/web/explorer"
                    target="_blank"
                    rel="noopener noreferrer"
-                    class="text-blue-600 hover:text-blue-800 transition-colors duration-200"
+                    class="underline"
                >
-                    capa GitHub repository</a
-                >.
+                    capa GitHub repository
+                </a>
+                .
+            </p>
+        </div>
+        <div>
+            <p class="text-base p-3 max-w-75rem">
+                You can download capa Explorer Web for offline usage via the download button in the top-right corner of
+                this page.
            </p>
        </div>
    </div>
@@ -39,7 +68,6 @@
 /* highlight inline code */
 code {
    background-color: #e2e8f0;
-    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
 }
--- a/web/explorer/src/components/MetadataPanel.vue
+++ b/web/explorer/src/components/MetadataPanel.vue
@@ -11,7 +11,7 @@
            </h1>
            <p class="text-xs mt-1 mb-0 text-white-alpha-70">
                SHA256:
-                <a :href="`https://www.virustotal.com/gui/file/${sha256}`" target="_blank">{{ sha256 }} </a>
+                <a :href="`https://www.virustotal.com/gui/file/${sha256}`" target="_blank">{{ sha256 }}</a>
            </p>
        </div>

@@ -23,20 +23,20 @@
            <!-- OS • Program Format • Arch -->
            <div class="flex align-items-center text-sm m-0 line-height-3 text-white">
                <span class="capitalize">{{ data.meta.analysis.os }}</span>
-                <span class="ml-2 mr-2 text-white-alpha-30"> • </span>
+                <span class="ml-2 mr-2 text-white-alpha-30">•</span>
                <span class="uppercase">{{ data.meta.analysis.format }}</span>
-                <span class="ml-2 mr-2 text-white-alpha-30"> • </span>
+                <span class="ml-2 mr-2 text-white-alpha-30">•</span>
                <span>{{ data.meta.analysis.arch === "i386" ? "i386" : data.meta.analysis.arch.toUpperCase() }}</span>
            </div>
            <!-- Flavor • Extractor • capa Version • Timestamp -->
            <div class="flex-wrap align-items-center text-sm m-0 line-height-3 text-white">
                <span class="capitalize">
-                    {{ flavor }} analysis with {{ data.meta.analysis.extractor.split(/(Feature)?Extractor/)[0] }}</span
-                >
+                    {{ flavor }} analysis with {{ data.meta.analysis.extractor.split(/(Feature)?Extractor/)[0] }}
+                </span>
                <!--- Extractor (e.g., CapeExtractor -> Cape, GhidraFeatureExtractor -> Ghidra, ... etc) -->
-                <span class="mx-2 text-white-alpha-30"> • </span>
+                <span class="mx-2 text-white-alpha-30">•</span>
                <span>capa v{{ data.meta.version }}</span>
-                <span class="mx-2 text-white-alpha-30"> • </span>
+                <span class="mx-2 text-white-alpha-30">•</span>
                <span>{{ new Date(data.meta.timestamp).toLocaleString() }}</span>
            </div>
        </div>
--- a/web/explorer/src/components/NavBar.vue
+++ b/web/explorer/src/components/NavBar.vue
@@ -17,10 +17,10 @@ const isBundle = import.meta.env.MODE === "bundle";
                <a
                    v-if="!isBundle"
                    v-ripple
-                    v-tooltip.bottom="'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"
+                    aria-label="Download capa Explorer Web release"
                >
                    <i class="pi pi-download text-xl"></i>
                </a>
--- a/web/explorer/src/components/ProcessCapabilities.vue
+++ b/web/explorer/src/components/ProcessCapabilities.vue
@@ -22,7 +22,7 @@
                        >
                            {{ slotProps.node.data.processname }}
                        </span>
-                        <span class="ml-2"> - PID: {{ slotProps.node.data.pid }} </span>
+                        <span class="ml-2">- PID: {{ slotProps.node.data.pid }}</span>
                        <span v-if="slotProps.node.data.uniqueMatchCount > 0" class="font-italic ml-2 match-count">
                            ({{ slotProps.node.data.uniqueMatchCount }} unique
                            {{ slotProps.node.data.uniqueMatchCount > 1 ? "matches" : "match" }})
@@ -53,9 +53,9 @@
        >
            <div v-for="rule in currentNode.data.uniqueRules" :key="rule.name">
                • {{ rule.name }}
-                <span class="font-italic match-count"
-                    >({{ rule.matchCount }} {{ rule.scope }} {{ rule.matchCount > 1 ? "matches" : "match" }})</span
-                >
+                <span class="font-italic match-count">
+                    ({{ rule.matchCount }} {{ rule.scope }} {{ rule.matchCount > 1 ? "matches" : "match" }})
+                </span>
                <LibraryTag v-if="rule.lib" />
            </div>
        </div>
--- a/web/explorer/src/components/RuleMatchesTable.vue
+++ b/web/explorer/src/components/RuleMatchesTable.vue
@@ -67,7 +67,7 @@
                />
            </template>
            <template #body="{ node }">
-                <span class="font-monospace text-sm"> {{ node.data.address }} </span>
+                <span class="font-monospace text-sm">{{ node.data.address }}</span>
            </template>
        </Column>

--- a/web/explorer/src/components/SettingsPanel.vue
+++ b/web/explorer/src/components/SettingsPanel.vue
@@ -28,7 +28,7 @@
                </div>
                <div class="flex flex-row align-items-center gap-2">
                    <Checkbox v-model="showNamespaceChart" inputId="showNamespaceChart" :binary="true" />
-                    <label for="showNamespaceChart"> Show namespace chart </label>
+                    <label for="showNamespaceChart">Show namespace chart</label>
                </div>
                <div class="flex flex-row align-items-center gap-2">
                    <Checkbox
@@ -37,7 +37,7 @@
                        :binary="true"
                        :disabled="showNamespaceChart"
                    />
-                    <label for="showColumnFilters"> Show column filters </label>
+                    <label for="showColumnFilters">Show column filters</label>
                </div>
            </div>
        </template>
--- a/web/explorer/src/components/columns/RuleColumn.vue
+++ b/web/explorer/src/components/columns/RuleColumn.vue
@@ -17,8 +17,8 @@
        </template>

        <!-- example node: "- or", "- and" -->
-        <template v-else-if="node.data.type === 'statement'"
-            >-
+        <template v-else-if="node.data.type === 'statement'">
+            -
            <span
                :class="{
                    'text-green-700': node.data.typeValue === 'range',
@@ -49,7 +49,8 @@

        <!-- example node: "- malware.exe" (these are the captures (i.e. children nodes) of regex nodes) -->
        <template v-else-if="node.data.type === 'regex-capture'">
-            - <span class="text-green-700 font-monospace">{{ node.data.name }}</span>
+            -
+            <span class="text-green-700 font-monospace">{{ node.data.name }}</span>
        </template>

        <!-- example node: "exit(0) -> 0" (if the node type is call-info, we highlight node.data.name.callInfo) -->
--- a/web/public/index.html
+++ b/web/public/index.html
@@ -219,8 +219,8 @@
      <!-- TODO(williballenthin): add date -->
      <p class="mt-0">
        <a href="https://github.com/mandiant/capa/releases/tag/v7.2.0">capa v7.2.0</a>
-        introduces a first version of capa explorer web: a web-based user interface to inspect capa results using your browser.
-        capa explorer web was worked on by @s-ff as part of a GSoC project, and it is available at https://mandiant.github.io/capa/explorer/.
+        introduces a first version of capa Explorer Web: a web-based user interface to inspect capa results using your browser.
+        capa Explorer Web was worked on by @s-ff as part of a GSoC project, and it is available at <a href="https://mandiant.github.io/capa/explorer/">https://mandiant.github.io/capa/explorer/</a>.
        This release also adds a feature extractor for output from the DRAKVUF sandbox. Now, analysts can pass the resulting drakmon.log file to capa and extract capabilities from the artifacts captured by the sandbox. 
      </p>