;
+ this.queryStringRedirect = false;
+ }
+
+ let loading = null;
+ if (this.state.loading) {
+ loading =
+ | Loading... |
+
;
+ }
+
+ return (
+
+ {this.state.showMoreRecentButton &&
+ {
+ this.disableScrollHandler = true;
+ this.connectionsListRef.current.scrollTop = 0;
+ this.loadConnections({limit: this.queryLimit})
+ .then(() => {
+ this.disableScrollHandler = false;
+ log.info("Most recent connections loaded");
+ });
+ }}/>
+
}
+
+
+
+
+
+ | service |
+ srcip |
+ srcport |
+ dstip |
+ dstport |
+ started_at |
+ duration |
+ up |
+ down |
+ actions |
+
+
+
+ {
+ this.state.connections.flatMap((c) => {
+ return [ this.connectionSelected(c)}
+ selected={this.state.selected === c.id}
+ onMarked={(marked) => c.marked = marked}
+ onCommented={(comment) => c.comment = comment}
+ services={this.state.services}/>,
+ c.matched_rules.length > 0 &&
+
+ ];
+ })
+ }
+ {loading}
+
+
+
+ {redirect}
+
+
+
+
+
+ {
+ this.el = el;
+ }}/>
+
+
+
+
+ {this.state.backgroundPane}
+
+
+ Started at {startedAt.toLocaleDateString() + " " + startedAt.toLocaleTimeString()}
+ Completed at {completedAt.toLocaleDateString() + " " + completedAt.toLocaleTimeString()}
+
;
+
+ return
+ |
+
+
+ |
+ {durationBetween(s["started_at"], s["completed_at"])} |
+ {formatSize(s["size"])} |
+ {s["processed_packets"]} |
+ {s["invalid_packets"]} |
+ |
+ download
+ |
+
;
+ });
+
+ const handleUploadFileChange = (file) => {
+ this.setState({
+ isUploadFileValid: file == null || (file.type.endsWith("pcap") || file.type.endsWith("pcapng")),
+ isUploadFileFocused: false,
+ uploadSelectedFile: file,
+ uploadStatusCode: null,
+ uploadResponse: null
+ });
+ };
+
+ const handleFileChange = (file) => {
+ this.setState({
+ isFileValid: (file.endsWith("pcap") || file.endsWith("pcapng")),
+ isFileFocused: false,
+ fileValue: file,
+ processStatusCode: null,
+ processResponse: null
+ });
+ };
+
+ const uploadCurlCommand = createCurlCommand("/pcap/upload", "POST", null, {
+ "file": "@" + ((this.state.uploadSelectedFile != null && this.state.isUploadFileValid) ?
+ this.state.uploadSelectedFile.name : "invalid.pcap"),
+ "flush_all": this.state.uploadFlushAll
+ });
+
+ const fileCurlCommand = createCurlCommand("/pcap/file", "POST", {
+ "file": this.state.fileValue,
+ "flush_all": this.state.processFlushAll,
+ "delete_original_file": this.state.deleteOriginalFile
+ });
+
+ return (
+
+
+
+ GET /api/pcap/sessions
+
+
+
+
+
+
+
+
+ | id |
+ started_at |
+ duration |
+ size |
+ processed_packets |
+ invalid_packets |
+ packets_per_service |
+ actions |
+
+
+
+ {sessions}
+
+
+
+
+
+
+
+
+
+ POST /api/pcap/upload
+
+
+
+
+
+
+
+ options:
+ this.setState({uploadFlushAll: v})}/>
+
+
+
+
+
+
+
+
+
+
+ POST /api/pcap/file
+
+
+
+
+
+
+
+
+ this.setState({processFlushAll: v})}/>
+ this.setState({deleteOriginalFile: v})}/>
+
+
+
+
+
+
+
+
+
{
+ this.reset();
+ this.setState({ selectedRule: _.cloneDeep(r) });
+ }} className={classNames("row-small", "row-clickable", { "row-selected": rule.id === r.id })}>
+ |
+ {r["name"]} |
+ |
+ {r["notes"]} |
+
+ );
+
+ let patterns = (this.state.selectedPattern == null && !isUpdate ?
+ rule.patterns.concat(this.state.newPattern) :
+ rule.patterns
+ ).map((p) => p === pattern ?
+
+ |
+ {
+ this.updateParam(() => pattern.regex = v);
+ this.setState({ patternRegexFocused: pattern.regex === "" });
+ }} />
+ |
+ this.updateParam(() => pattern.flags["caseless"] = v)} /> |
+ this.updateParam(() => pattern.flags["dot_all"] = v)} /> |
+ this.updateParam(() => pattern.flags["multi_line"] = v)} /> |
+ this.updateParam(() => pattern.flags["utf_8_mode"] = v)} /> |
+ this.updateParam(() => pattern.flags["unicode_property"] = v)} /> |
+
+ this.updateParam(() => pattern["min_occurrences"] = v)} />
+ |
+
+ this.updateParam(() => pattern["max_occurrences"] = v)} />
+ |
+ s", "s->c"]}
+ value={this.directions[pattern.direction]}
+ onChange={(v) => this.updateParam(() => pattern.direction = v)} /> |
+ {this.state.selectedPattern == null ?
+ this.addPattern(p)} /> :
+ this.updatePattern(p)} />}
+ |
+
+ :
+
+ | {p.regex} |
+ {p.flags["caseless"] ? "yes" : "no"} |
+ {p.flags["dot_all"] ? "yes" : "no"} |
+ {p.flags["multi_line"] ? "yes" : "no"} |
+ {p.flags["utf_8_mode"] ? "yes" : "no"} |
+ {p.flags["unicode_property"] ? "yes" : "no"} |
+ {p["min_occurrences"]} |
+ {p["max_occurrences"]} |
+ {this.directions[p.direction]} |
+
+ this.editPattern(p)}
+ />
+ |
+
+ );
+
+ return (
+
+
+
+ GET /api/rules
+ {this.state.rulesStatusCode &&
+ }
+
+
+
+
+
+
+
+ | id |
+ name |
+ color |
+ notes |
+
+
+
+ {rules}
+
+
+
+
+
+
+
+
+
+ {isUpdate ? `PUT /api/rules/${this.state.selectedRule.id}` : "POST /api/rules"}
+
+
+
+
+
+
+
+
+ this.updateParam((r) => r.name = v)}
+ error={this.state.ruleNameError} />
+ this.updateParam((r) => r.color = v)} />
+ this.updateParam((r) => r.notes = v)} />
+
+
+
+ filters:
+ this.updateParam((r) => r.filter["service_port"] = v)}
+ min={0}
+ max={65565}
+ error={this.state.ruleServicePortError}
+ />
+ this.updateParam((r) => r.filter["client_port"] = v)}
+ min={0}
+ max={65565}
+ error={this.state.ruleClientPortError}
+ />
+ this.updateParam((r) => r.filter["client_address"] = v)} />
+
+
+
+ this.updateParam((r) => r.filter["min_duration"] = v)} />
+ this.updateParam((r) => r.filter["max_duration"] = v)} />
+ this.updateParam((r) => r.filter["min_bytes"] = v)} />
+ this.updateParam((r) => r.filter["max_bytes"] = v)} />
+
+
+
+
+
+
+
+
+ | regex |
+ !Aa |
+ .* |
+ \n+ |
+ UTF8 |
+ Uni_ |
+ min |
+ max |
+ direction |
+ {!isUpdate && actions | }
+
+
+
+ {patterns}
+
+
+ {this.state.rulePatternsError != null &&
+
error: {this.state.rulePatternsError}}
+
+
+
+
+ {}
+
+
+
+
+
+ | {s.id.substring(0, 8)} |
+ {this.extractPattern(s["search_options"])} |
+ {s["affected_connections_count"]} |
+ {dateTimeToTime(s["started_at"])} |
+ {durationBetween(s["started_at"], s["finished_at"])} |
+ this.viewSearch(s.id)}/> |
+
+ );
+
+ const textOptionsModified = !_.isEqual(this.searchOptions.text_search, options.text_search);
+ const regexOptionsModified = !_.isEqual(this.searchOptions.regex_search, options.regex_search);
+
+ const curlCommand = createCurlCommand("/searches/perform", "POST", options);
+
+ return (
+
+
+
+ GET /api/searches
+ {this.state.searchesStatusCode &&
+ }
+
+
+
+
+
+
+
+ | id |
+ pattern |
+ occurrences |
+ started_at |
+ duration |
+ actions |
+
+
+
+ {searches}
+
+
+
+
+
+
+
+
+ POST /api/searches/perform
+
+
+
+
+
+ NOTE: it is recommended to use the rules for recurring themes. Give preference to textual search over that with regex.
+
+
+
+
+ {
+ return {name: t};
+ })}
+ name="terms" min={3} inline allowNew={true}
+ readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
+ onChange={(tags) => this.updateParam((s) => s["text_search"].terms = tags.map((t) => t.name))}/>
+ {
+ return {name: t};
+ })}
+ name="excluded_terms" min={3} inline allowNew={true}
+ readonly={regexOptionsModified || options["text_search"]["exact_phrase"]}
+ onChange={(tags) => this.updateParam((s) => s["text_search"]["excluded_terms"] = tags.map((t) => t.name))}/>
+
+ or
+
+ this.updateParam((s) => s["text_search"]["exact_phrase"] = v)}
+ readonly={regexOptionsModified || (Array.isArray(options["text_search"].terms) && options["text_search"].terms.length > 0)}/>
+
+ this.updateParam((s) => s["text_search"]["case_sensitive"] = v)}/>
+
+
+
+ or
+
+
+
+
this.updateParam((s) => s["regex_search"].pattern = v)}/>
+ or
+ this.updateParam((s) => s["regex_search"]["not_pattern"] = v)}/>
+
+
+ this.updateParam((s) => s["regex_search"]["case_insensitive"] = v)}/>
+ this.updateParam((s) => s["regex_search"]["multi_line"] = v)}/>
+ this.updateParam((s) => s["regex_search"]["ignore_whitespaces"] = v)}/>
+ this.updateParam((s) => s["regex_search"]["dot_character"] = v)}/>
+
+
+
+
+
+
+
+
+
+
+
+
+
{
+ this.reset();
+ this.setState({isUpdate: true, currentService: _.cloneDeep(s)});
+ }} className={classNames("row-small", "row-clickable", {"row-selected": service.port === s.port})}>
+ | {s["port"]} |
+ {s["name"]} |
+ |
+ {s["notes"]} |
+
+ );
+
+ const curlCommand = createCurlCommand("/services", "PUT", service);
+
+ return (
+
+
+
+ GET /api/services
+ {this.state.servicesStatusCode &&
+ }
+
+
+
+
+
+
+
+ | port |
+ name |
+ color |
+ notes |
+
+
+
+ {services}
+
+
+
+
+
+
+
+
+ PUT /api/services
+
+
+
+
+
+
+
+ this.updateParam((s) => s.port = v)}
+ min={0} max={65565} error={this.state.servicePortError}/>
+ this.updateParam((s) => s.name = v)}
+ error={this.state.serviceNameError}/>
+ this.updateParam((s) => s.color = v)}/>
+
+
+
+ this.updateParam((s) => s.notes = v)}/>
+
+
+
+
+
+
+
+
+ {}
+ {isUpdate && }
+
+
+
+
+ | {port} |
+ {formatSize(s["connections_per_service"][port])} |
+ {formatSize(s["client_bytes_per_service"][port])}B |
+ {formatSize(s["server_bytes_per_service"][port])}B |
+ {formatSize(s["total_bytes_per_service"][port])}B |
+ {formatSize(s["duration_per_service"][port] / 1000)}s |
+
;
+ });
+ servicesStats.push(
+ | totals |
+ {formatSize(connections)} |
+ {formatSize(clientBytes)}B |
+ {formatSize(serverBytes)}B |
+ {formatSize(totalBytes)}B |
+ {formatSize(duration / 1000)}s |
+
);
+
+ const rulesStats = this.state.rules.map((r) =>
+
+ |
+ {r["name"]} |
+ |
+ {formatSize(s && s["matched_rules"] && s["matched_rules"][r.id] ? s["matched_rules"][r.id] : 0)} |
+
+ );
+
+ const cpuStats = (rs ? rs["cpu_times"] : []).map((cpu, index) =>
+
+ | {cpu["cpu"]} |
+ {cpu["user"]} |
+ {cpu["system"]} |
+ {cpu["idle"]} |
+ {cpu["nice"]} |
+ {cpu["iowait"]} |
+ {rs["cpu_percents"][index].toFixed(2)} % |
+
+ );
+
+ return (
+
+
+
+ GET /api/statistics/totals
+
+
+
+
+
+
+
+
+ | service |
+ connections |
+ client_bytes |
+ server_bytes |
+ total_bytes |
+ duration |
+
+
+
+ {servicesStats}
+
+
+
+
+
+
+
+
+ | rule_id |
+ rule_name |
+ rule_color |
+ occurrences |
+
+
+
+ {rulesStats}
+
+
+
+
+
+
+
+
+ GET /api/resources/system
+
+
+
+
+
+
+
+
+ | type |
+ total |
+ used |
+ free |
+ shared |
+ buff/cache |
+ available |
+
+
+
+
+ | mem |
+ {rs && formatSize(rs["virtual_memory"]["total"])} |
+ {rs && formatSize(rs["virtual_memory"]["used"])} |
+ {rs && formatSize(rs["virtual_memory"]["free"])} |
+ {rs && formatSize(rs["virtual_memory"]["shared"])} |
+ {rs && formatSize(rs["virtual_memory"]["cached"])} |
+ {rs && formatSize(rs["virtual_memory"]["available"])} |
+
+
+ | swap |
+ {rs && formatSize(rs["virtual_memory"]["swaptotal"])} |
+ {rs && formatSize(rs["virtual_memory"]["swaptotal"])} |
+ {rs && formatSize(rs["virtual_memory"]["swapfree"])} |
+ - |
+ - |
+ - |
+
+
+
+
+
+
+
+
+
+ | cpu |
+ user |
+ system |
+ idle |
+ nice |
+ iowait |
+ used_percent |
+
+
+
+ {cpuStats}
+
+
+
+
+
+
+
+
+ | disk_path |
+ fs_type |
+ total |
+ free |
+ used |
+ used_percent |
+
+
+
+
+ | {rs && rs["disk_usage"]["path"]} |
+ {rs && rs["disk_usage"]["fstype"]} |
+ {rs && formatSize(rs["disk_usage"]["total"])} |
+ {rs && formatSize(rs["disk_usage"]["free"])} |
+ {rs && formatSize(rs["disk_usage"]["used"])} |
+ {rs && rs["disk_usage"]["usedPercent"].toFixed(2)} % |
+
+
+
+
+
+
+
+ {key}: {value}
+
+ ));
+
+ let m = connectionMessage.metadata;
+ switch (m.type) {
+ case "http-request":
+ let url = (
+
+
+
+ {m.host}
+ {m.url}
+
+
+
+ );
+ return (
+
+
+ {m.method} {url} {m.protocol}
+
+ {unrollMap(m.headers)}
+
+ {this.highlightRules(m.body, isClient)}
+
+ {unrollMap(m.trailers)}
+
+ );
+ case "http-response":
+ const contentType = getHeaderValue(m, "Content-Type");
+ let body = m.body;
+ if (contentType && contentType.includes("application/json")) {
+ try {
+ const json = JSON.parse(m.body);
+ if (typeof json === "object") {
+ body = (
+
+ );
+ }
+ } catch (e) {
+ log.error(e);
+ }
+ }
+
+ return (
+
+
+ {m.protocol} {m.status}
+
+ {unrollMap(m.headers)}
+
+ {this.highlightRules(body, isClient)}
+
+ {unrollMap(m.trailers)}
+
+ );
+ default:
+ 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.replace(/^\//, "(").replace(/\/$/, ")"),
+ flags
+ );
+ streamContent = reactStringReplace(streamContent, regex, (match, i) => (
+
+ {match}
+
+ ));
+ });
+ });
+
+ return streamContent;
+ };
+
+ connectionsActions = (connectionMessage) => {
+ if (!connectionMessage.metadata) {
+ return null;
+ }
+
+ const m = connectionMessage.metadata;
+ switch (m.type) {
+ case "http-request":
+ if (!connectionMessage.metadata["reproducers"]) {
+ return;
+ }
+ return Object.entries(connectionMessage.metadata["reproducers"]).map(
+ ([name, value]) => (
+ {
+ this.setState({
+ messageActionDialog: (
+
+ this.setState({ messageActionDialog: null })
+ }
+ />
+ ),
+ });
+ }}
+ />
+ )
+ );
+ case "http-response":
+ const contentType = getHeaderValue(m, "Content-Type");
+
+ if (contentType && contentType.includes("text/html")) {
+ return (
+ {
+ let w;
+ if (
+ this.state.renderWindow &&
+ !this.state.renderWindow.closed
+ ) {
+ w = this.state.renderWindow;
+ } else {
+ w = window.open(
+ "",
+ "",
+ "width=900, height=600, scrollbars=yes"
+ );
+ this.setState({ renderWindow: w });
+ }
+ w.document.body.innerHTML = DOMPurify.sanitize(m.body);
+ w.focus();
+ }}
+ />
+ );
+ }
+ break;
+ default:
+ return null;
+ }
+ };
+
+ downloadStreamRaw = (value) => {
+ if (this.state.currentId) {
+ backend
+ .download(
+ `/api/streams/${this.props.connection.id}/download?format=${this.state.format}&type=${value}`
+ )
+ .then((res) =>
+ downloadBlob(
+ res.blob,
+ `${this.state.currentId}-${value}-${this.state.format}.txt`
+ )
+ )
+ .catch((_) => log.error("Failed to download stream messages"));
+ }
+ };
+
+ closeRenderWindow = () => {
+ if (this.state.renderWindow) {
+ this.state.renderWindow.close();
+ }
+ };
+
+ render() {
+ const conn = this.props.connection || {
+ ip_src: "0.0.0.0",
+ ip_dst: "0.0.0.0",
+ port_src: "0",
+ port_dst: "0",
+ started_at: new Date().toISOString(),
+ };
+ const content = this.state.messages || [];
+
+ let payload = content
+ .filter(
+ (c) =>
+ !this.state.tryParse ||
+ (this.state.tryParse && !c["is_metadata_continuation"])
+ )
+ .map((c, i) => (
+
+
+
+
+
+ offset: {c.index}
+ {" "}
+ |{" "}
+
+ timestamp: {c.timestamp}
+ {" "}
+ |{" "}
+
+ retransmitted:{" "}
+ {c["is_retransmitted"] ? "yes" : "no"}
+
+
+
+ {this.connectionsActions(c)}
+
+
+
+
+ {c["from_client"] ? "client" : "server"}
+
+
+ {this.state.tryParse && this.state.format === "default"
+ ? this.tryParseConnectionMessage(c)
+ : c.content}
+
+
+
+
+
+
+ flow: {conn["ip_src"]}:{conn["port_src"]} ->{" "}
+ {conn["ip_dst"]}:{conn["port_dst"]}
+
+
+ {" "}
+ | timestamp: {conn["started_at"]}
+
+
+
+
+
+
+
+
+
+
+
+
+
{payload}
+ {this.state.messageActionDialog}
+