diff options
| -rw-r--r-- | README.md | 42 | ||||
| -rw-r--r-- | frontend/src/components/Notifications.scss | 28 | ||||
| -rw-r--r-- | frontend/src/components/fields/ChoiceField.scss | 4 | ||||
| -rw-r--r-- | frontend/src/components/fields/InputField.scss | 15 | ||||
| -rw-r--r-- | frontend/src/components/fields/common.scss | 3 | ||||
| -rw-r--r-- | frontend/src/index.scss | 2 | ||||
| -rw-r--r-- | frontend/src/views/App.scss | 3 |
7 files changed, 48 insertions, 49 deletions
@@ -13,23 +13,23 @@ The patterns can be defined as regex or using protocol specific rules. The connection flows are saved into a database and can be visualized with the web application. REST API are also provided. ## Features -- immediate installation with docker-compose -- no configuration file, settings can be changed via GUI or API -- the pcaps to be analyzed can be loaded via `curl`, either locally or remotely, or via the GUI - - it is also possible to download the pcaps from the GUI and see all the analysis statistics for each pcap -- rules can be created to identify connections that contain certain strings - - pattern matching is done through regular expressions (regex) - - regex in UTF-8 and Unicode format are also supported - - it is possible to add an additional filter to the connections identified through pattern matching by type of connection -- the connections can be labeled by type of service, identified by the port number - - each service can be assigned a different color -- it is possible to filter connections by addresses, ports, dimensions, time, duration, matched rules -- supports both IPv4 and IPv6 addresses - - if more addresses are assigned to the vulnerable machine to be defended, a CIDR address can be used -- the detected HTTP connections are automatically reconstructed - - HTTP requests can be replicated through `curl`, `fetch` and `python requests` - - compressed HTTP responses (gzip/deflate) are automatically decompressed -- it is possible to export and view the content of connections in various formats, including hex and base64 +- immediate installation with docker-compose +- no configuration file, settings can be changed via GUI or API +- the pcaps to be analyzed can be loaded via `curl`, either locally or remotely, or via the GUI + - it is also possible to download the pcaps from the GUI and see all the analysis statistics for each pcap +- rules can be created to identify connections that contain certain strings + - pattern matching is done through regular expressions (regex) + - regex in UTF-8 and Unicode format are also supported + - it is possible to add an additional filter to the connections identified through pattern matching by type of connection +- the connections can be labeled by type of service, identified by the port number + - each service can be assigned a different color +- it is possible to filter connections by addresses, ports, dimensions, time, duration, matched rules +- supports both IPv4 and IPv6 addresses + - if more addresses are assigned to the vulnerable machine to be defended, a CIDR address can be used +- the detected HTTP connections are automatically reconstructed + - HTTP requests can be replicated through `curl`, `fetch` and `python requests` + - compressed HTTP responses (gzip/deflate) are automatically decompressed +- it is possible to export and view the content of connections in various formats, including hex and base64 ## Installation There are two ways to install Caronte: @@ -77,16 +77,16 @@ The backend, written in Go language, it is designed as a service. It exposes RES ## Screenshots Below there are some screenshots showing the main features of the tool. -#### Viewing the contents of a connection +### Viewing the contents of a connection  -#### Loading pcaps and analysis details +### Loading pcaps and analysis details  -#### Creating new pattern matching rules +### Creating new pattern matching rules  -#### Creating or editing services +### Creating or editing services  ## License diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss index b0c334b..bec7734 100644 --- a/frontend/src/components/Notifications.scss +++ b/frontend/src/components/Notifications.scss @@ -2,27 +2,22 @@ .notifications { position: absolute; - - left: 30px; - bottom: 50px; z-index: 50; - - .notifications-list { - - } + bottom: 50px; + left: 30px; .notification { - background-color: $color-green; - border-left: 5px solid $color-green-dark; - padding: 10px; - margin: 10px 0; + overflow: hidden; width: 250px; - color: $color-green-light; - transform: translateX(-300px); + margin: 10px 0; + padding: 10px; transition: all 1s ease; + transform: translateX(-300px); white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; + color: $color-green-light; + border-left: 5px solid $color-green-dark; + background-color: $color-green; .notification-title { font-size: 0.9em; @@ -41,8 +36,5 @@ transform: translateY(-50px); opacity: 0; } - } - - -}
\ No newline at end of file +} diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss index 0b5e510..c8c7ff1 100644 --- a/frontend/src/components/fields/ChoiceField.scss +++ b/frontend/src/components/fields/ChoiceField.scss @@ -19,7 +19,7 @@ border-radius: 5px; background-color: $color-primary-2; - &:after { + &::after { position: absolute; right: 10px; content: "⋎"; @@ -58,7 +58,7 @@ display: block; } - .field-value:after { + .field-value::after { content: "⋏"; } } diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss index 7cc34d9..e8ef46a 100644 --- a/frontend/src/components/fields/InputField.scss +++ b/frontend/src/components/fields/InputField.scss @@ -28,7 +28,7 @@ display: none; } - .file-label:after { + .file-label::after { position: absolute; top: 0; right: 0; @@ -47,12 +47,13 @@ background-color: $color-primary-4 !important; } - .field-value input, .field-value .file-label { + .field-value input, + .field-value .file-label { color: $color-primary-3 !important; background-color: $color-primary-4 !important; } - .file-label:after { + .file-label::after { background-color: $color-secondary-4 !important; } } @@ -63,12 +64,13 @@ background-color: $color-secondary-2 !important; } - .field-value input, .field-value .file-label { + .field-value input, + .field-value .file-label { color: $color-primary-4 !important; background-color: $color-secondary-2 !important; } - .file-label:after { + .file-label::after { background-color: $color-secondary-1 !important; } } @@ -90,7 +92,8 @@ .field-input { width: 100%; - input, .file-label { + input, + .file-label { padding-left: 3px; border-top-left-radius: 0; border-bottom-left-radius: 0; diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss index f37369e..8fbef0d 100644 --- a/frontend/src/components/fields/common.scss +++ b/frontend/src/components/fields/common.scss @@ -1,7 +1,8 @@ @import "../../colors.scss"; .field { - input, textarea { + input, + textarea { width: 100%; padding: 7px 10px; color: $color-primary-4; diff --git a/frontend/src/index.scss b/frontend/src/index.scss index 2e5b6b9..9d6afc4 100644 --- a/frontend/src/index.scss +++ b/frontend/src/index.scss @@ -1,7 +1,9 @@ @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap"); @import-normalize ; + @import "colors.scss"; + body { font-family: "Fira Code", monospace; font-size: 100%; diff --git a/frontend/src/views/App.scss b/frontend/src/views/App.scss index 5c5bd99..87661c3 100644 --- a/frontend/src/views/App.scss +++ b/frontend/src/views/App.scss @@ -9,7 +9,8 @@ flex: 1 1; } - .main-header, .main-footer { + .main-header, + .main-footer { flex: 0 0; } } |