✨ Adds widget for monitoring CVE vulnerabilities

docs/widgets.md

@@ -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/)

src/components/Widgets/CveVulnerabilities.vue

@@ -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>

src/components/Widgets/WidgetBase.vue

@@ -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'),

src/styles/color-palette.scss

@@ -10,6 +10,7 @@
   --info: #04e4f4;
   --success: #20e253;
   --warning: #f6f000;
+  --error: #fca016;
   --danger: #f80363;
   --neutral: #272f4d;
   --white: #fff;

src/utils/MiscHelpers.js

@@ -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;
+};

src/utils/defaults.js

@@ -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/',