From 18287f888b0c3ae80422d4068c511614b55bfa6d Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Mon, 19 Oct 2020 12:40:53 +0200
Subject: Add resizable layout

---
 frontend/src/components/panels/StreamsPane.scss | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'frontend/src/components/panels')

diff --git a/frontend/src/components/panels/StreamsPane.scss b/frontend/src/components/panels/StreamsPane.scss
index 1f641f3..1d8a250 100644
--- a/frontend/src/components/panels/StreamsPane.scss
+++ b/frontend/src/components/panels/StreamsPane.scss
@@ -34,6 +34,9 @@
         font-size: 11px;
         margin-top: 6px;
         margin-left: -10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .connection-message-actions {
@@ -99,6 +102,9 @@
       font-size: 12px;
       padding-top: 7px;
       padding-left: 25px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .header-actions {
-- 
cgit v1.2.3-70-g09d2


From 6b30ace7f6919d5e5122959d0abf463906fa17d7 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Mon, 19 Oct 2020 16:20:53 +0200
Subject: Highlight rules in stream pane

---
 frontend/package.json                           |  1 +
 frontend/src/components/panels/StreamsPane.js   | 40 ++++++++++++++++++-----
 frontend/src/components/panels/StreamsPane.scss |  6 ++++
 frontend/src/model/rules.js                     | 43 +++++++++++++++++++++++++
 frontend/yarn.lock                              |  9 +++++-
 5 files changed, 90 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/model/rules.js

(limited to 'frontend/src/components/panels')

diff --git a/frontend/package.json b/frontend/package.json
index c91665f..b3a4494 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
+    "react-string-replace": "^0.4.4",
     "react-tag-autocomplete": "^6.0.0-beta.6",
     "react-timeseries-charts": "^0.16.1",
     "typed.js": "^2.0.11"
diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js
index 9470d7d..cc3d53a 100644
--- a/frontend/src/components/panels/StreamsPane.js
+++ b/frontend/src/components/panels/StreamsPane.js
@@ -21,12 +21,14 @@ import {Row} from "react-bootstrap";
 import ReactJson from "react-json-view";
 import backend from "../../backend";
 import log from "../../log";
+import rules from "../../model/rules";
 import {downloadBlob, getHeaderValue} from "../../utils";
 import ButtonField from "../fields/ButtonField";
 import ChoiceField from "../fields/ChoiceField";
 import MessageAction from "../objects/MessageAction";
 import "./StreamsPane.scss";
 
+const reactStringReplace = require('react-string-replace')
 const classNames = require("classnames");
 
 class StreamsPane extends Component {
@@ -77,11 +79,9 @@ class StreamsPane extends Component {
     };
 
     tryParseConnectionMessage = (connectionMessage) => {
+        const isClient = connectionMessage["from_client"];
         if (connectionMessage.metadata == null) {
-            return connectionMessage.content;
-        }
-        if (connectionMessage["is_metadata_continuation"]) {
-            return <span style={{"fontSize": "12px"}}>**already parsed in previous messages**</span>;
+            return this.highlightRules(connectionMessage.content, isClient);
         }
 
         let unrollMap = (obj) => obj == null ? null : Object.entries(obj).map(([key, value]) =>
@@ -96,7 +96,7 @@ class StreamsPane extends Component {
                 return <span className="type-http-request">
                     <p style={{"marginBottom": "7px"}}><strong>{m.method}</strong> {url} {m.protocol}</p>
                     {unrollMap(m.headers)}
-                    <div style={{"margin": "20px 0"}}>{m.body}</div>
+                    <div style={{"margin": "20px 0"}}>{this.highlightRules(m.body, isClient)}</div>
                     {unrollMap(m.trailers)}
                 </span>;
             case "http-response":
@@ -108,20 +108,44 @@ class StreamsPane extends Component {
                         body = <ReactJson src={json} theme="grayscale" collapsed={false} displayDataTypes={false}/>;
                     } catch (e) {
                         log.error(e);
+                        body = m.body;
                     }
                 }
 
                 return <span className="type-http-response">
                     <p style={{"marginBottom": "7px"}}>{m.protocol} <strong>{m.status}</strong></p>
                     {unrollMap(m.headers)}
-                    <div style={{"margin": "20px 0"}}>{body}</div>
+                    <div style={{"margin": "20px 0"}}>{this.highlightRules(body, isClient)}</div>
                     {unrollMap(m.trailers)}
                 </span>;
             default:
-                return connectionMessage.content;
+                return this.highlightRules(connectionMessage.content, isClient);
         }
     };
 
+    highlightRules = (content, isClient) => {
+        let streamContent = content;
+        this.props.connection["matched_rules"].forEach(ruleId => {
+            const rule = rules.ruleById(ruleId);
+            rule.patterns.forEach(pattern => {
+                if ((!isClient && pattern.direction === 1) || (isClient && pattern.direction === 2)) {
+                    return;
+                }
+                let flags = "";
+                pattern["caseless"] && (flags += "i");
+                pattern["dot_all"] && (flags += "s");
+                pattern["multi_line"] && (flags += "m");
+                pattern["unicode_property"] && (flags += "u");
+                const regex = new RegExp("(" + pattern.regex + ")", flags);
+                streamContent = reactStringReplace(streamContent, regex, (match, i) => (
+                    <span key={i} className="matched-occurrence" style={{"backgroundColor": rule.color}}>{match}</span>
+                ));
+            });
+        });
+
+        return streamContent;
+    };
+
     connectionsActions = (connectionMessage) => {
         if (!connectionMessage.metadata) {
             return null;
@@ -187,7 +211,7 @@ class StreamsPane extends Component {
         };
         const content = this.state.messages || [];
 
-        let payload = content.map((c, i) =>
+        let payload = content.filter((c) => !c["is_metadata_continuation"]).map((c, i) =>
             <div key={`content-${i}`}
                  className={classNames("connection-message", c["from_client"] ? "from-client" : "from-server")}>
                 <div className="connection-message-header container-fluid">
diff --git a/frontend/src/components/panels/StreamsPane.scss b/frontend/src/components/panels/StreamsPane.scss
index 1d8a250..c44c7eb 100644
--- a/frontend/src/components/panels/StreamsPane.scss
+++ b/frontend/src/components/panels/StreamsPane.scss
@@ -18,6 +18,12 @@
     &:hover::-webkit-scrollbar-thumb {
       background: $color-secondary-2;
     }
+
+    .matched-occurrence {
+      color: $color-primary-4;
+      font-weight: 500;
+      border-radius: 2px;
+    }
   }
 
   .connection-message {
diff --git a/frontend/src/model/rules.js b/frontend/src/model/rules.js
new file mode 100644
index 0000000..625d610
--- /dev/null
+++ b/frontend/src/model/rules.js
@@ -0,0 +1,43 @@
+/*
+ * This file is part of caronte (https://github.com/eciavatta/caronte).
+ * Copyright (c) 2020 Emiliano Ciavatta.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import backend from "../backend";
+import log from "../log";
+
+const _ = require("lodash");
+
+class Rules {
+
+    constructor() {
+        this.rules = [];
+        this.loadRules();
+    }
+
+    loadRules = () => {
+        backend.get("/api/rules").then((res) => this.rules = res.json)
+            .catch((err) => log.error("Failed to load rules", err));
+    };
+
+    allRules = () => _.clone(this.rules);
+
+    ruleById = (id) => _.clone(this.rules.find(r => r.id === id));
+
+}
+
+const rules = new Rules();
+
+export default rules;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index e9f01ac..54cc802 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -7248,7 +7248,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5, lodash@~4.17.10:
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@~4.17.10:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -9743,6 +9743,13 @@ react-scripts@3.4.1:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-string-replace@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/react-string-replace/-/react-string-replace-0.4.4.tgz#24006fbe0db573d5be583133df38b1a735cb4225"
+  integrity sha512-FAMkhxmDpCsGTwTZg7p/2v+/GTmxAp73so3fbSvlAcBBX36ujiGRNEaM/1u+jiYQrArhns+7eE92g2pi5E5FUA==
+  dependencies:
+    lodash "^4.17.4"
+
 react-tag-autocomplete@^6.0.0-beta.6:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-tag-autocomplete/-/react-tag-autocomplete-6.1.0.tgz#9fb70149a69b33379013e5255bcd7ad97d8ec06b"
-- 
cgit v1.2.3-70-g09d2


From 3920162abdcaad570b364f76efa8257fa87319c0 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Tue, 20 Oct 2020 17:33:49 +0200
Subject: Update readme

---
 README.md                                       |  40 ++++++++++++++----------
 frontend/screenshots/connection_content.png     | Bin 314372 -> 0 bytes
 frontend/screenshots/main.png                   | Bin 0 -> 402371 bytes
 frontend/screenshots/main2.png                  | Bin 0 -> 438349 bytes
 frontend/screenshots/pcaps.png                  | Bin 368643 -> 0 bytes
 frontend/screenshots/rules.png                  | Bin 253325 -> 0 bytes
 frontend/screenshots/rules_services.png         | Bin 0 -> 240349 bytes
 frontend/screenshots/searches_pcaps.png         | Bin 0 -> 345152 bytes
 frontend/screenshots/services.png               | Bin 245420 -> 0 bytes
 frontend/src/components/panels/StreamsPane.js   |   2 +-
 frontend/src/components/panels/StreamsPane.scss |   6 ++--
 11 files changed, 28 insertions(+), 20 deletions(-)
 delete mode 100644 frontend/screenshots/connection_content.png
 create mode 100644 frontend/screenshots/main.png
 create mode 100644 frontend/screenshots/main2.png
 delete mode 100644 frontend/screenshots/pcaps.png
 delete mode 100644 frontend/screenshots/rules.png
 create mode 100644 frontend/screenshots/rules_services.png
 create mode 100644 frontend/screenshots/searches_pcaps.png
 delete mode 100644 frontend/screenshots/services.png

(limited to 'frontend/src/components/panels')

diff --git a/README.md b/README.md
index 75158e2..980fd98 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 # `caronte$`
 
 [![Build Status](https://travis-ci.com/eciavatta/caronte.svg?branch=develop)](https://travis-ci.com/eciavatta/caronte)
+[![Docker Status](https://img.shields.io/docker/cloud/build/eciavatta/caronte)](https://hub.docker.com/r/eciavatta/caronte)
 [![codecov](https://codecov.io/gh/eciavatta/caronte/branch/develop/graph/badge.svg)](https://codecov.io/gh/eciavatta/caronte)
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/009dca44f4da4118a20aed2b9b7610c0)](https://www.codacy.com/manual/eciavatta/caronte?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=eciavatta/caronte&amp;utm_campaign=Badge_Grade)
 ![GitHub release (latest by date)](https://img.shields.io/github/v/tag/eciavatta/caronte)
@@ -15,21 +16,28 @@ The connection flows are saved into a database and can be visualized with the we
 ## 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
+-   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
+-   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
+-   ability to filter connections by addresses, ports, dimensions, time, duration, matched rules
+-   a timeline shows statistics with different metrics sampled per minute
+    -   some of these metrics are *connections_per_service*, *client_bytes_per_service*, *server_bytes_per_service*, *duration_per service*, *matched_rules*
+        -   with *matched_rules* metric it can be possible to see the relationship between *flag_in* and *flag_out*
+    -   the timeline contains a sliding window which can be used to search for connections in a certain time interval
+-   advanced search by term, negated term, exact phrase, regex, negated regex
+    -   the performed searches are saved to be instantly repeated the following times
 -   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
+    -   compressed HTTP responses (gzip/deflate) are automatically decompressed    
+-   ability to export and view the content of connections in various formats, including hex and base64
+-   JSON content is displayed in a JSON tree viewer, HTML code can be rendered in a separate window
+-   occurrences of matched rules are highlighted in the connection content view
+-   supports both IPv4 and IPv6 addresses
+    -   if more addresses are assigned to the vulnerable machine to be defended, a CIDR address can be used
 
 ## Installation
 There are two ways to install Caronte:
@@ -77,17 +85,17 @@ 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
-![Connection Content](frontend/screenshots/connection_content.png)
+### Main window, with connections list and stream content
+![Connection Content](https://raw.githubusercontent.com/eciavatta/caronte/main/frontend/screenshots/main.png)
 
-### Loading pcaps and analysis details
-![Connection Content](frontend/screenshots/pcaps.png)
+### Main window, with the timeline expanded
+![Connection Content](https://raw.githubusercontent.com/eciavatta/caronte/main/frontend/screenshots/main2.png)
 
-### Creating new pattern matching rules
-![Connection Content](frontend/screenshots/rules.png)
+### Rules and services view
+![Connection Content](https://raw.githubusercontent.com/eciavatta/caronte/main/frontend/screenshots/rules_services.png)
 
-### Creating or editing services
-![Connection Content](frontend/screenshots/services.png)
+### Searches and pcaps view
+![Connection Content](https://raw.githubusercontent.com/eciavatta/caronte/main/frontend/screenshots/searches_pcaps.png)
 
 ## License
 caronte was created by [Emiliano Ciavatta](https://eciavatta.it) and is licensed under the [GPL-3.0 license](LICENSE).
diff --git a/frontend/screenshots/connection_content.png b/frontend/screenshots/connection_content.png
deleted file mode 100644
index 3a999bf..0000000
Binary files a/frontend/screenshots/connection_content.png and /dev/null differ
diff --git a/frontend/screenshots/main.png b/frontend/screenshots/main.png
new file mode 100644
index 0000000..2640afe
Binary files /dev/null and b/frontend/screenshots/main.png differ
diff --git a/frontend/screenshots/main2.png b/frontend/screenshots/main2.png
new file mode 100644
index 0000000..5e24d52
Binary files /dev/null and b/frontend/screenshots/main2.png differ
diff --git a/frontend/screenshots/pcaps.png b/frontend/screenshots/pcaps.png
deleted file mode 100644
index 2b315e9..0000000
Binary files a/frontend/screenshots/pcaps.png and /dev/null differ
diff --git a/frontend/screenshots/rules.png b/frontend/screenshots/rules.png
deleted file mode 100644
index 1870080..0000000
Binary files a/frontend/screenshots/rules.png and /dev/null differ
diff --git a/frontend/screenshots/rules_services.png b/frontend/screenshots/rules_services.png
new file mode 100644
index 0000000..babf76d
Binary files /dev/null and b/frontend/screenshots/rules_services.png differ
diff --git a/frontend/screenshots/searches_pcaps.png b/frontend/screenshots/searches_pcaps.png
new file mode 100644
index 0000000..77e927d
Binary files /dev/null and b/frontend/screenshots/searches_pcaps.png differ
diff --git a/frontend/screenshots/services.png b/frontend/screenshots/services.png
deleted file mode 100644
index b605cc1..0000000
Binary files a/frontend/screenshots/services.png and /dev/null differ
diff --git a/frontend/src/components/panels/StreamsPane.js b/frontend/src/components/panels/StreamsPane.js
index cc3d53a..4c16cf1 100644
--- a/frontend/src/components/panels/StreamsPane.js
+++ b/frontend/src/components/panels/StreamsPane.js
@@ -28,7 +28,7 @@ import ChoiceField from "../fields/ChoiceField";
 import MessageAction from "../objects/MessageAction";
 import "./StreamsPane.scss";
 
-const reactStringReplace = require('react-string-replace')
+const reactStringReplace = require("react-string-replace");
 const classNames = require("classnames");
 
 class StreamsPane extends Component {
diff --git a/frontend/src/components/panels/StreamsPane.scss b/frontend/src/components/panels/StreamsPane.scss
index c44c7eb..3857068 100644
--- a/frontend/src/components/panels/StreamsPane.scss
+++ b/frontend/src/components/panels/StreamsPane.scss
@@ -20,8 +20,8 @@
     }
 
     .matched-occurrence {
-      color: $color-primary-4;
       font-weight: 500;
+      color: $color-primary-4;
       border-radius: 2px;
     }
   }
@@ -38,10 +38,10 @@
 
       .connection-message-info {
         font-size: 11px;
+        overflow: hidden;
         margin-top: 6px;
         margin-left: -10px;
         white-space: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
       }
 
@@ -106,10 +106,10 @@
 
     .header-info {
       font-size: 12px;
+      overflow: hidden;
       padding-top: 7px;
       padding-left: 25px;
       white-space: nowrap;
-      overflow: hidden;
       text-overflow: ellipsis;
     }
 
-- 
cgit v1.2.3-70-g09d2