gitea-mirror/capa
1
0
Fork 0
mirror of https://github.com/mandiant/capa.git synced 2026-02-04 11:07:53 -08:00
Code Issues Packages Projects Releases Wiki Activity

web: edit explorer README

Browse Source
This commit is contained in:
Soufiane Fariss
2024-08-21 18:33:58 +02:00
parent c3f24c2f48
commit 9959eb6bae
5 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/explorer/DEVELOPMENT.md
View File

@@ -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
@@ -31,7 +31,7 @@ Before you begin, ensure you have the following installed:
npm run dev
```
This will start the Vite development server. The application should now be running at `http://localhost:<port>`
This will start the Vite development server. The application should now be running at `http://localhost:<port>`.
## Project Structure
@@ -80,7 +80,7 @@ Or, you can build a standalone bundle application that can be used offline:
npm run build:bundle
```
This will generate an offline HTML bundle file in the `dist/` directory.
This will generate an offline HTML bundle file in the `capa-explorer-web/` directory.
## Testing
@@ -98,12 +98,13 @@ We use ESLint for linting and Prettier for code formatting. Run the linter with:
```
npm run lint
npm run format:check
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

26
web/explorer/README.md
View File

@@ -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,31 +11,33 @@ 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/) or running it locally by dowloading the offline release in the [releases](https://github.com/mandiant/capa/releases) section and loading it in your 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**:
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).
- Or, paste a URL to a capa JSON file and click the arrow button to load it.
- You can also load capa results using the `rdoc` query parameter to the URL. For example: `?rdoc=https://example.com/capa-results.json` (loading JSON and gzipped JSON (.gz) files are both supported).
- Alternatively, use the "Preview Static" or "Preview Dynamic" for sample data.
3. **Explore the Results**:
3. **Explore the results**:
- Use the tree view to navigate through the identified capabilities.
- Toggle between different views using the checkboxes in the settings panel:
- "Show capabilities by function/process" for grouped analysis.
- "Show library rule matches" to include or exclude library rules.
- "Show distinct library rule matches" to include or exclude library rules.
- "Show columns filters" to show per-column search filters.
4. **Interact with the Data**:
- Expand/collapse nodes in the table to see more details.
4. **Interact with the results**:
- Expand/collapse nodes in the table to see more details by clicking rows or clicking arrow icons.
- Use the search and filter options to find specific features, functions or capabilities (rules).
- Right click on rule names to view their source code or additional information.
- Right click on rule names (and `match` nodes) to view their source code or additional information.
## Feedback and Contributions
We welcome your feedback and contributions to improve the web-based Capa Explorer. Please report any issues or suggest enhancements through the `capa` GitHub repository.
We welcome your feedback and contributions to improve the web-based capa explorer. Please report any issues or suggest enhancements through the `capa` GitHub repository.
---
For developers interested in building or contributing to Capa Explorer WebUI, 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).

2
web/explorer/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Capa Explorer</title>
<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>

24
web/explorer/src/components/DescriptionPanel.vue
View File

@@ -1,15 +1,29 @@
<template>
<div class="flex flex-column align-items-center">
<div class="flex flex-column align-items-center mb-6">
<div class="text-center">
<h1>
<img src="@/assets/images/logo-full.png" alt="Capa: identify program capabilities" />
<h6 class="font-medium" style="color: rgb(176, 26, 26)">capa: identify program capabilities</h6>
<h3 class="font-medium" style="color: rgb(176, 26, 26)">capa: identify program capabilities</h3>
</h1>
</div>
<div>
<p class="text-xl max-w-75rem" style="max-width: 75ch">
Capa-WebUI 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.
<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.
</p>
</div>
<div class="bg-blue-50 border-round p-3 text-center max-w-75rem">
<p class="text-900 text-sm m-0">
New to capa? Explore the
<a
href="https://github.com/mandiant/capa"
target="_blank"
rel="noopener noreferrer"
class="text-blue-600 hover:text-blue-400"
>
capa GitHub repository
</a>
to learn how to generate analysis results.
</p>
</div>
</div>

6
web/explorer/src/components/NavBar.vue
View File

@@ -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'"
href="./capa-explorer-web.zip"
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>