From 1296ca0bda0d3d2965e0e56496bb8f48f88a31cc Mon Sep 17 00:00:00 2001
From: Alicie <gh@d0h.co>
Date: Sun, 26 Dec 2021 22:56:11 +0000
Subject: [PATCH] :sparkles: Adds widget for monitoring CVE vulnerabilities

---
 docs/widgets.md                               |  39 +++
 src/components/Widgets/CveVulnerabilities.vue | 236 ++++++++++++++++
 src/components/Widgets/WidgetBase.vue         |   8 +
 src/styles/color-palette.scss                 | 255 +++++++++---------
 src/utils/MiscHelpers.js                      |   5 +
 src/utils/defaults.js                         |   1 +
 6 files changed, 417 insertions(+), 127 deletions(-)
 create mode 100644 src/components/Widgets/CveVulnerabilities.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index 4dc3ccef..14d0db67 100644
--- a/docs/widgets.md
+++ b/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/)
diff --git a/src/components/Widgets/CveVulnerabilities.vue b/src/components/Widgets/CveVulnerabilities.vue
new file mode 100644
index 00000000..80f48dd8
--- /dev/null
+++ b/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>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index f36c72de..ffc4b065 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/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'),
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 8a38381a..4398cbf3 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -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);
+}
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index 9d604cde..ad68301a 100644
--- a/src/utils/MiscHelpers.js
+++ b/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;
+};
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 829c147f..cd33c85c 100644
--- a/src/utils/defaults.js
+++ b/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/',