diff options
-rw-r--r-- | example_data_1.json | 34 | ||||
-rw-r--r-- | example_data_2.json | 32 | ||||
-rw-r--r-- | src/components/ListItem.js | 12 | ||||
-rw-r--r-- | src/components/ListView.js | 8 | ||||
-rw-r--r-- | src/components/ScanDetail.js | 46 | ||||
-rw-r--r-- | src/styles/main.css | 41 |
6 files changed, 121 insertions, 52 deletions
diff --git a/example_data_1.json b/example_data_1.json index 96aee14..98a5edf 100644 --- a/example_data_1.json +++ b/example_data_1.json @@ -10,28 +10,32 @@ "domain": "sunet.se", "timestamp_in_utc": "2021-06-21T14:06 UTC", "system_name": "Apache 2.1.3", - "result": [ - { - "cve": "CVE-2015-0049", - "vulnerable": false + "result": { + "cve_2015_0049": { + "display_name": "CVE-2015-0049", + "vulnerable": false, + "description": "Allows remote attackers to execute arbitrary code or cause a denial of service (memory corruption)." }, - { - "cve": "CVE-2015-0050", + "cve_2015_0050": { + "display_name": "CVE-2015-0050", "vulnerable": false }, - { - "cve": "CVE-2015-0060", - "vulnerable": true + "cve_2015_0060": { + "display_name": "CVE-2015-0060", + "vulnerable": true, + "reliability": 2 }, - { - "cve": "CVE-2015-0063", + "cve_2015_0063": { + "display_name": "CVE-2015-0063", "vulnerable": false }, - { - "cve": "CVE-2015-0064", - "vulnerable": true + "insecure_cryptography": { + "display_name": "Insecure cryptography", + "vulnerable": true, + "reliability": 5, + "description": "Uses RSA instead of elliptic curve." } - ], + }, "description": "The Apache HTTP Server is a free and open-source cross-platform web server software, released under the terms of Apache License 2.0.", "custom_data": { "subject_cn": { diff --git a/example_data_2.json b/example_data_2.json index cc930a0..f4083b1 100644 --- a/example_data_2.json +++ b/example_data_2.json @@ -10,28 +10,32 @@ "domain": "sunet.se", "timestamp_in_utc": "2021-06-30T10:00 UTC", "system_name": "VMware ESXi 6.7.0 build-17700523", - "result": [ - { + "result": { + "cve_2019_0001": { "cve": "CVE-2019-0001", "vulnerable": false }, - { - "cve": "CVE-2015-0002", - "vulnerable": false + "cve_2015_0002": { + "display_name": "CVE-2015-0002", + "vulnerable": false, + "description": "There is a use of insufficiently random values vulnerability. An unauthenticated, remote attacker can guess information by a large number of attempts. Successful exploitation may cause information leak." }, - { - "cve": "CVE-2015-0003", - "vulnerable": true + "cve_2015_0003": { + "display_name": "CVE-2015-0003", + "vulnerable": true, + "reliability": 2, + "description": "A carefully crafted request body can cause a read to a random memory area which could cause the process to crash." }, - { - "cve": "CVE-2015-0004", + "cve_2015_0004": { + "display_name": "CVE-2015-0004", "vulnerable": false }, - { - "cve": "CVE-2015-0005", - "vulnerable": true + "cve_2015_0005": { + "display_name": "CVE-2015-0005", + "vulnerable": true, + "reliability": 4 } - ], + }, "description": "VMware ESXi is an enterprise-class, type-1 hypervisor developed by VMware for deploying and serving virtual computers. As a type-1 hypervisor, ESXi is not a software application that is installed on an operating system; instead, it includes and integrates vital OS components, such as a kernel.", "custom_data": { "subject_cn": { diff --git a/src/components/ListItem.js b/src/components/ListItem.js index b289c2e..b85df4e 100644 --- a/src/components/ListItem.js +++ b/src/components/ListItem.js @@ -24,14 +24,20 @@ class ListItem extends React.Component { </td> <td>{this.props.domain}</td> <td>{this.props.system_name}</td> - <td> + <td style={{ paddingRight: 0 }}> <Card className={ - "cve" + (this.props.vulnerable ? " vulnerable" : "") + "result" + + (this.props.vulnerable ? " vulnerable" : "") } variant="outlined" > - {this.props.cve} + {this.props.display_name} + </Card> + </td> + <td style={{ paddingLeft: 0 }}> + <Card className="reliability" variant="outlined"> + {this.props.reliability} </Card> </td> <td> diff --git a/src/components/ListView.js b/src/components/ListView.js index 9eec7bf..2252f8c 100644 --- a/src/components/ListView.js +++ b/src/components/ListView.js @@ -135,14 +135,14 @@ class ListView extends React.Component { : -1 ) .map(scan => - scan.result - .filter(res => res.vulnerable) - .map(res => ( + Object.entries(scan.result) + .filter(([_, res]) => res.vulnerable) + .map(([id, res]) => ( <ListItem summary={true} {...scan} {...res} - key={scan._id + res.cve} + key={scan._id + id} /> )) ) diff --git a/src/components/ScanDetail.js b/src/components/ScanDetail.js index f818710..36c52c2 100644 --- a/src/components/ScanDetail.js +++ b/src/components/ScanDetail.js @@ -3,6 +3,9 @@ import React from "react"; import Alert from "@mui/material/Alert"; import Button from "@mui/material/Button"; import Card from "@mui/material/Card"; +import Tooltip from "@mui/material/Tooltip"; + +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; class ScanDetail extends React.Component { render() { @@ -67,11 +70,18 @@ class ScanDetail extends React.Component { </div> </h2> - <div id="cves"> - {this.props.result - .sort((a, b) => (a.vulnerable ? -1 : 1)) - .map(cve => ( - <CVE {...cve} /> + <div id="results"> + {Object.entries(this.props.result) + // Sort by vulnerable, reliability, name + .sort((a, b) => + a[1].display_name > b[1].display_name ? -1 : 1 + ) + .sort((a, b) => + a[1].reliability < b[1].reliability ? -1 : 1 + ) + .sort((a, b) => (a[1].vulnerable ? -1 : 1)) + .map(([id, res]) => ( + <Result key={id} {...res} /> ))} </div> </Card> @@ -108,14 +118,26 @@ function CustomElement(props) { ); } -function CVE(props) { +function Result(props) { return ( - <Card - className={"cve" + (props.vulnerable ? " vulnerable" : "")} - variant="outlined" - > - {props.cve} - </Card> + <div className="resultContainer"> + <Card + className={"result" + (props.vulnerable ? " vulnerable" : "")} + variant="outlined" + > + {props.display_name} + {props.description && ( + <Tooltip title={props.description}> + <InfoOutlinedIcon /> + </Tooltip> + )} + </Card> + {props.vulnerable && ( + <Card className="reliability" variant="outlined"> + {props.reliability} + </Card> + )} + </div> ); } diff --git a/src/styles/main.css b/src/styles/main.css index 0b01a70..6bb6d5f 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -74,19 +74,44 @@ a:visited { padding-right: 2em; } -.scan-detail .cve { +.scan-detail .resultContainer { + display: flex; +} + +.scan-detail .result { background-color: #c6ff85; border: 3px solid #62b800; padding: 0.5em; margin-top: 0.5em; text-align: center; + width: 100%; } -.scan-detail .cve.vulnerable { +.scan-detail .result.vulnerable { background-color: #ff8585; border: 3px solid #f74343; } +.scan-detail .result .MuiSvgIcon-root { + vertical-align: middle; + margin-left: 0.3em; + color: #62b800; +} + +.scan-detail .result.vulnerable .MuiSvgIcon-root { + color: #f74343; +} + +.scan-detail .reliability { + background-color: lightgrey; + border: 3px solid darkgrey; + padding: 0.5em; + margin-top: 0.5em; + text-align: center; + width: 4em; + margin-left: 0.5em; +} + /* ListView */ #list-container > #controls { @@ -120,7 +145,7 @@ a:visited { border-bottom: 1px solid grey; } -.list-item .cve { +.list-item .result { background-color: #c6ff85; border: 3px solid #62b800; padding: 0.5em; @@ -128,11 +153,19 @@ a:visited { text-align: center; } -.list-item .cve.vulnerable { +.list-item .result.vulnerable { background-color: #ff8585; border: 3px solid #f74343; } +.list-item .reliability { + background-color: lightgrey; + border: 3px solid darkgrey; + padding: 0.5em; + margin: 0.5em; + text-align: center; +} + /* Login */ #login-container { |