Adds widget for monitoring CVE vulnerabilities

This commit is contained in:
Alicia Sykes 2021-12-26 22:56:11 +00:00
parent 6c0fb6fd41
commit 802fb625d7
6 changed files with 417 additions and 127 deletions

View File

@ -12,6 +12,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
- [RSS Feed](#rss-feed)
- [XKCD Comics](#xkcd-comics)
- [Code Stats](#code-stats)
- [Vulnerability Feed](#vulnerability-feed)
- [Public Holidays](#public-holidays)
- [TFL Status](#tfl-status)
- [Exchange Rates](#exchange-rates)
@ -277,6 +278,44 @@ Display your coding summary. [Code::Stats](https://codestats.net/) is a free and
---
### Vulnerability Feed
Display a feed of recent vulnerabilities, with optional filtering by score, exploits, vendor and product. All fields are optional.
<p align="center"><img width="400" src="https://i.ibb.co/DYJMpjp/vulnerability-feed.png" /></p>
##### Options
**Field** | **Type** | **Required** | **Description**
--- | --- | --- | ---
**`sortBy`** | `string` | _Optional_ | The sorting method. Can be either `publish-date`, `last-update` or `cve-code`. Defaults to `publish-date`
**`limit`** | `number` | _Optional_ | The number of results to fetch. Can be between `5` and `30`, defaults to `10`
**`minScore`** | `number` | _Optional_ | If set, will only display results with a CVE score higher than the number specified. Can be a number between `0` and `9.9`. By default, vulnerabilities of all CVE scores are shown
**`hasExploit`** | `boolean` | _Optional_ | If set to `true`, will only show results with active exploits. Defaults to `false`
**`vendorId`** | `number` | _Optional_ | Only show results from a specific vendor, specified by ID. See [Vendor Search](https://www.cvedetails.com/vendor-search.php) for list of vendors. E.g. `23` (Debian), `26` (Microsoft), `23682` (CloudFlare)
**`productId`** | `number` | _Optional_ | Only show results from a specific app or product, specified by ID. See [Product Search](https://www.cvedetails.com/product-search.php) for list of products. E.g. `13534` (Docker), `15913` (NextCloud), `19294` (Portainer), `17908` (ProtonMail)
##### Example
```yaml
- type: cve-vulnerabilities
```
or
```yaml
- type: cve-vulnerabilities
options:
sortBy: publish-date
productId: 28125
hasExploit: true
minScore: 5
limit: 30
```
---
### Public Holidays
Counting down to the next day off work? This widget displays upcoming public holidays for your country. Data is fetched from [Enrico](http://kayaposoft.com/enrico/)

View File

@ -0,0 +1,236 @@
<template>
<div class="cve-wrapper" v-if="cveList">
<div v-for="cve in cveList" :key="cve.id" class="cve-row">
<a class="upper" :href="cve.url" target="_blank">
<p :class="`score ${makeScoreColor(cve.score)}`">{{ cve.score }}</p>
<div class="title-wrap">
<p class="title">{{ cve.id }}</p>
<span class="date">{{ cve.publishDate | formatDate }}</span>
<span class="last-updated">Last Updated: {{ cve.updateDate | formatDate }}</span>
<span :class="`exploit-count ${makeExploitColor(cve.numExploits)}`">
{{ cve.numExploits | formatExploitCount }}
</span>
</div>
</a>
<p class="description">
{{ cve.description | formatDescription }}
<a v-if="cve.description.length > 350" class="read-more" :href="cve.url" target="_blank">
Keep Reading
</a>
</p>
</div>
</div>
</template>
<script>
import axios from 'axios';
import WidgetMixin from '@/mixins/WidgetMixin';
import { timestampToDate, truncateStr } from '@/utils/MiscHelpers';
import { widgetApiEndpoints, serviceEndpoints } from '@/utils/defaults';
export default {
mixins: [WidgetMixin],
components: {},
data() {
return {
cveList: null,
};
},
filters: {
formatDate(date) {
return timestampToDate(date);
},
formatDescription(description) {
return truncateStr(description, 350);
},
formatExploitCount(numExploits) {
if (!numExploits) return 'Number of exploits not known';
if (numExploits === '0') return 'No published exploits';
return `${numExploits} known exploit${numExploits !== '1' ? 's' : ''}`;
},
},
computed: {
/* Get sort order, defaults to publish date */
sortBy() {
const usersChoice = this.options.sortBy;
let sortCode;
switch (usersChoice) {
case ('publish-date'): sortCode = 1; break;
case ('last-update'): sortCode = 2; break;
case ('cve-code'): sortCode = 3; break;
default: sortCode = 1;
}
return `&orderby=${sortCode}`;
},
/* The minimum CVE score to fetch/ show, defaults to 4 */
minScore() {
const usersChoice = this.options.minScore;
let minScoreVal = 4;
if (usersChoice && (usersChoice >= 0 || usersChoice <= 10)) {
minScoreVal = usersChoice;
}
return `&cvssscoremin=${minScoreVal}`;
},
vendorId() {
return (this.options.vendorId) ? `&vendor_id=${this.options.vendorId}` : '';
},
productId() {
return (this.options.productId) ? `&product_id=${this.options.productId}` : '';
},
/* Should only show results with exploits, defaults to false */
hasExploit() {
const shouldShow = this.options.hasExploit ? 1 : 0;
return `&hasexp=${shouldShow}`;
},
/* The number of results to fetch/ show, defaults to 10 */
limit() {
const usersChoice = this.options.limit;
let numResults = 10;
if (usersChoice && (usersChoice >= 5 || usersChoice <= 30)) {
numResults = usersChoice;
}
return `&numrows=${numResults}`;
},
endpoint() {
return `${widgetApiEndpoints.cveVulnerabilities}?${this.sortBy}${this.limit}`
+ `${this.minScore}${this.vendorId}${this.hasExploit}`;
},
proxyReqEndpoint() {
const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
return `${baseUrl}${serviceEndpoints.corsProxy}`;
},
},
methods: {
/* Make GET request to CoinGecko API endpoint */
fetchData() {
axios.request({
method: 'GET',
url: this.proxyReqEndpoint,
headers: { 'Target-URL': this.endpoint },
})
.then((response) => {
this.processData(response.data);
}).catch((error) => {
this.error('Unable to fetch CVE data', error);
}).finally(() => {
this.finishLoading();
});
},
/* Assign data variables to the returned data */
processData(data) {
const cveList = [];
data.forEach((cve) => {
cveList.push({
id: cve.cve_id,
score: cve.cvss_score,
url: cve.url,
description: cve.summary,
numExploits: cve.exploit_count,
publishDate: cve.publish_date,
updateDate: cve.update_date,
});
});
this.cveList = cveList;
},
makeExploitColor(numExploits) {
if (!numExploits || Number.isNaN(parseInt(numExploits, 10))) return 'fg-grey';
const count = parseInt(numExploits, 10);
if (count === 0) return 'fg-green';
if (count === 1) return 'fg-orange';
if (count > 1) return 'fg-red';
return 'fg-grey';
},
makeScoreColor(inputScore) {
if (!inputScore || Number.isNaN(parseFloat(inputScore, 10))) return 'bg-grey';
const score = parseFloat(inputScore, 10);
if (score >= 9) return 'bg-red';
if (score >= 7) return 'bg-orange';
if (score >= 4) return 'bg-yellow';
if (score >= 0.1) return 'bg-green';
return 'bg-blue';
},
},
};
</script>
<style scoped lang="scss">
.cve-wrapper {
.cve-row {
p, span, a {
font-size: 1rem;
margin: 0.5rem 0;
color: var(--widget-text-color);
&.bg-green { background: var(--success); }
&.bg-yellow { background: var(--warning); }
&.bg-orange { background: var(--error); }
&.bg-red { background: var(--danger); }
&.bg-blue { background: var(--info); }
&.bg-grey { background: var(--neutral); }
&.fg-green { color: var(--success); }
&.fg-yellow { color: var(--warning); }
&.fg-orange { color: var(--error); }
&.fg-red { color: var(--danger); }
&.fg-blue { color: var(--info); }
&.fg-grey { color: var(--neutral); }
}
a.upper {
display: flex;
margin: 0.25rem 0 0 0;
align-items: center;
text-decoration: none;
}
.score {
font-size: 1.1rem;
font-weight: bold;
padding: 0.45rem 0.25rem 0.25rem 0.25rem;
margin-right: 0.5rem;
border-radius: 30px;
font-family: var(--font-monospace);
background: var(--widget-text-color);
color: var(--widget-background-color);
}
.title {
font-family: var(--font-monospace);
font-size: 1.2rem;
font-weight: bold;
margin: 0;
}
.date, .last-updated {
font-size: 0.8rem;
margin: 0;
opacity: var(--dimming-factor);
padding-right: 0.5rem;
}
.exploit-count {
display: none;
font-size: 0.8rem;
margin: 0;
padding-left: 0.5rem;
opacity: var(--dimming-factor);
border-left: 1px solid var(--widget-text-color);
}
.seperator {
font-size: 0.8rem;
margin: 0;
opacity: var(--dimming-factor);
}
.description {
margin: 0 0.25rem 0.5rem 0.25rem;
}
a.read-more {
opacity: var(--dimming-factor);
}
&:not(:last-child) {
border-bottom: 1px dashed var(--widget-text-color);
}
.last-updated {
display: none;
}
&:hover {
.date { display: none; }
.exploit-count, .last-updated { display: inline; }
}
}
}
</style>

View File

@ -46,6 +46,13 @@
@error="handleError"
:ref="widgetRef"
/>
<CveVulnerabilities
v-else-if="widgetType === 'cve-vulnerabilities'"
:options="widgetOptions"
@loading="setLoaderState"
@error="handleError"
:ref="widgetRef"
/>
<CodeStats
v-else-if="widgetType === 'code-stats'"
:options="widgetOptions"
@ -256,6 +263,7 @@ export default {
CodeStats: () => import('@/components/Widgets/CodeStats.vue'),
CryptoPriceChart: () => import('@/components/Widgets/CryptoPriceChart.vue'),
CryptoWatchList: () => import('@/components/Widgets/CryptoWatchList.vue'),
CveVulnerabilities: () => import('@/components/Widgets/CveVulnerabilities.vue'),
EmbedWidget: () => import('@/components/Widgets/EmbedWidget.vue'),
ExchangeRates: () => import('@/components/Widgets/ExchangeRates.vue'),
Flights: () => import('@/components/Widgets/Flights.vue'),

View File

@ -1,127 +1,128 @@
@import '@/styles/media-queries.scss';
:root {
/* Basic*/
--primary: #5cabca; // Main accent color
--background: #0b1021; // Page background
--background-darker: #05070e; // Used for navigation bar, footer and fills
/* Action Colors */
--info: #04e4f4;
--success: #20e253;
--warning: #f6f000;
--danger: #f80363;
--neutral: #272f4d;
--white: #fff;
--black: #000;
/* Modified Colors */
--item-group-background: #0b1021cc;
--medium-grey: #5e6474;
--item-background: #607d8b33;
--item-background-hover: #607d8b4d;
/* Semi-Transparent Black*/
--transparent-70: #000000b3;
--transparent-50: #00000080;
--transparent-30: #0000004d;
/* Semi-Transparent White*/
--transparent-white-70: #ffffffb3;
--transparent-white-50: #ffffff80;
--transparent-white-30: #ffffff4d;
/* Color variables for specific components
* all variables are optional, since they inherit initial values from above*
* Using specific variables makes overriding for custom themes really easy */
--heading-text-color: var(--primary);
// Nav-bar links
--nav-link-text-color: var(--primary);
--nav-link-background-color: #607d8b33;
--nav-link-text-color-hover: var(--primary);
--nav-link-background-color-hover: #607d8b33;
--nav-link-border-color: transparent;
--nav-link-border-color-hover: var(--primary);
--nav-link-shadow: 1px 1px 2px #232323;
--nav-link-shadow-hover: 1px 1px 2px #232323;
// Link items and sections
--item-text-color: var(--primary);
--item-text-color-hover: var(--item-text-color);
--item-group-outer-background: var(--primary);
--item-group-heading-text-color: var(--item-group-background);
--item-group-heading-text-color-hover: var(--background);
// Homepage settings
--settings-text-color: var(--primary);
--settings-background: var(--background);
// Config menu
--config-settings-color: var(--primary);
--config-settings-background: var(--background-darker);
--config-code-color: var(--background);
--config-code-background: var(--white);
--code-editor-color: var(--black);
--code-editor-background: var(--white);
// Widgets
--widget-text-color: var(--primary);
--widget-background-color: var(--background-darker);
--widget-accent-color: var(--background);
// Interactive editor
--interactive-editor-color: var(--primary);
--interactive-editor-background: var(--background);
--interactive-editor-background-darker: var(--background-darker);
// Cloud backup/ restore menu
--cloud-backup-color: var(--config-settings-color);
--cloud-backup-background: var(--config-settings-background);
// Search bar (on homepage)
--search-container-background: var(--background-darker);
--search-field-background: var(--background);
--search-label-color: var(--settings-text-color);
// Page footer
--footer-text-color: var(--medium-grey);
--footer-text-color-link: var(--primary);
--footer-background: var(--background-darker);
// Right-click context menu
--context-menu-background: var(--background);
--context-menu-color: var(--primary);
--context-menu-secondary-color: var(--background-darker);
// Workspace view
--side-bar-background: var(--background-darker);
--side-bar-background-lighter: var(--background);
--side-bar-color: var(--primary);
--side-bar-item-background: var(--side-bar-background);
--side-bar-item-color: var(--side-bar-color);
// Minimal view
--minimal-view-background-color: var(--background);
--minimal-view-title-color: var(--primary);
--minimal-view-settings-color: var(--primary);
--minimal-view-section-heading-color: var(--primary);
--minimal-view-section-heading-background: var(--background-darker);
--minimal-view-search-background: var(--background-darker);
--minimal-view-search-color: var(--primary);
--minimal-view-group-color: var(--primary);
--minimal-view-group-background: var(--background-darker);
// Login page
--login-form-color: var(--primary);
--login-form-background: var(--background);
--login-form-background-secondary: var(--background-darker);
// About page
--about-page-color: var(--white);
--about-page-background: var(--background);
--about-page-accent: var(--primary);
// Webpage colors, highlight, scrollbar
--scroll-bar-color: var(--primary);
--scroll-bar-background: var(--background-darker);
--highlight-color: var(--background);
--highlight-background: var(--primary);
--progress-bar: var(--primary);
// Misc components
--loading-screen-color: var(--primary);
--loading-screen-background: var(--background);
--status-check-tooltip-background: var(--background-darker);
--status-check-tooltip-color: var(--primary);
--welcome-popup-background: var(--background-darker);
--welcome-popup-text-color: var(--primary);
--toast-background: var(--primary);
--toast-color: var(--background);
--description-tooltip-background: var(--background-darker);
--description-tooltip-color: var(--primary);
}
@import '@/styles/media-queries.scss';
:root {
/* Basic*/
--primary: #5cabca; // Main accent color
--background: #0b1021; // Page background
--background-darker: #05070e; // Used for navigation bar, footer and fills
/* Action Colors */
--info: #04e4f4;
--success: #20e253;
--warning: #f6f000;
--error: #fca016;
--danger: #f80363;
--neutral: #272f4d;
--white: #fff;
--black: #000;
/* Modified Colors */
--item-group-background: #0b1021cc;
--medium-grey: #5e6474;
--item-background: #607d8b33;
--item-background-hover: #607d8b4d;
/* Semi-Transparent Black*/
--transparent-70: #000000b3;
--transparent-50: #00000080;
--transparent-30: #0000004d;
/* Semi-Transparent White*/
--transparent-white-70: #ffffffb3;
--transparent-white-50: #ffffff80;
--transparent-white-30: #ffffff4d;
/* Color variables for specific components
* all variables are optional, since they inherit initial values from above*
* Using specific variables makes overriding for custom themes really easy */
--heading-text-color: var(--primary);
// Nav-bar links
--nav-link-text-color: var(--primary);
--nav-link-background-color: #607d8b33;
--nav-link-text-color-hover: var(--primary);
--nav-link-background-color-hover: #607d8b33;
--nav-link-border-color: transparent;
--nav-link-border-color-hover: var(--primary);
--nav-link-shadow: 1px 1px 2px #232323;
--nav-link-shadow-hover: 1px 1px 2px #232323;
// Link items and sections
--item-text-color: var(--primary);
--item-text-color-hover: var(--item-text-color);
--item-group-outer-background: var(--primary);
--item-group-heading-text-color: var(--item-group-background);
--item-group-heading-text-color-hover: var(--background);
// Homepage settings
--settings-text-color: var(--primary);
--settings-background: var(--background);
// Config menu
--config-settings-color: var(--primary);
--config-settings-background: var(--background-darker);
--config-code-color: var(--background);
--config-code-background: var(--white);
--code-editor-color: var(--black);
--code-editor-background: var(--white);
// Widgets
--widget-text-color: var(--primary);
--widget-background-color: var(--background-darker);
--widget-accent-color: var(--background);
// Interactive editor
--interactive-editor-color: var(--primary);
--interactive-editor-background: var(--background);
--interactive-editor-background-darker: var(--background-darker);
// Cloud backup/ restore menu
--cloud-backup-color: var(--config-settings-color);
--cloud-backup-background: var(--config-settings-background);
// Search bar (on homepage)
--search-container-background: var(--background-darker);
--search-field-background: var(--background);
--search-label-color: var(--settings-text-color);
// Page footer
--footer-text-color: var(--medium-grey);
--footer-text-color-link: var(--primary);
--footer-background: var(--background-darker);
// Right-click context menu
--context-menu-background: var(--background);
--context-menu-color: var(--primary);
--context-menu-secondary-color: var(--background-darker);
// Workspace view
--side-bar-background: var(--background-darker);
--side-bar-background-lighter: var(--background);
--side-bar-color: var(--primary);
--side-bar-item-background: var(--side-bar-background);
--side-bar-item-color: var(--side-bar-color);
// Minimal view
--minimal-view-background-color: var(--background);
--minimal-view-title-color: var(--primary);
--minimal-view-settings-color: var(--primary);
--minimal-view-section-heading-color: var(--primary);
--minimal-view-section-heading-background: var(--background-darker);
--minimal-view-search-background: var(--background-darker);
--minimal-view-search-color: var(--primary);
--minimal-view-group-color: var(--primary);
--minimal-view-group-background: var(--background-darker);
// Login page
--login-form-color: var(--primary);
--login-form-background: var(--background);
--login-form-background-secondary: var(--background-darker);
// About page
--about-page-color: var(--white);
--about-page-background: var(--background);
--about-page-accent: var(--primary);
// Webpage colors, highlight, scrollbar
--scroll-bar-color: var(--primary);
--scroll-bar-background: var(--background-darker);
--highlight-color: var(--background);
--highlight-background: var(--primary);
--progress-bar: var(--primary);
// Misc components
--loading-screen-color: var(--primary);
--loading-screen-background: var(--background);
--status-check-tooltip-background: var(--background-darker);
--status-check-tooltip-color: var(--primary);
--welcome-popup-background: var(--background-darker);
--welcome-popup-text-color: var(--primary);
--toast-background: var(--primary);
--toast-color: var(--background);
--description-tooltip-background: var(--background-darker);
--description-tooltip-color: var(--primary);
}

View File

@ -142,3 +142,8 @@ export const roundPrice = (price) => {
else if (price <= 0.01) decimals = 5;
return price.toFixed(decimals);
};
/* Cuts string off at given length, and adds an ellipse */
export const truncateStr = (str, len = 60, ellipse = '...') => {
return str.length > len + ellipse.length ? `${str.slice(0, len)}${ellipse}` : str;
};

View File

@ -211,6 +211,7 @@ module.exports = {
codeStats: 'https://codestats.net/',
cryptoPrices: 'https://api.coingecko.com/api/v3/coins/',
cryptoWatchList: 'https://api.coingecko.com/api/v3/coins/markets/',
cveVulnerabilities: 'http://www.cvedetails.com/json-feed.php',
exchangeRates: 'https://v6.exchangerate-api.com/v6/',
flights: 'https://aerodatabox.p.rapidapi.com/flights/airports/icao/',
githubTrending: 'https://gh-trending-repos.herokuapp.com/',