✨ Adds widget for monitoring CVE vulnerabilities
This commit is contained in:
Alicie
Alicia Sykes
236
src/components/Widgets/CveVulnerabilities.vue
Normal file
236
src/components/Widgets/CveVulnerabilities.vue
Normal 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>
|
||||
@@ -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'),
|
||||
|
||||
Reference in New Issue
Block a user