dradis-calculator_cvss 5.1.0 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6a1a2072b667c860a4b3fd935ab8fb241f6c36a0650572ded51717a2787942c7
-  data.tar.gz: f39277db07d072d179b1951c97d32ffc2c8f2e4ddf527156213ace741ee20fc8
+  metadata.gz: 6ddfa19b5e944d64fd26441b4c5cab892c1ab699fce18d15deca214716317642
+  data.tar.gz: 8ba4fd687f8b337aea206a224c8123376801c4d9c111566da43a7a86152531b7
 SHA512:
-  metadata.gz: 95956efbf3a2a1fe8552c7695641700ce136d9b16acbc911f8f515ca1d5b6d8b3141ca9527255c602da85027efdce716a9ad97b6c4dc46e392378de3aa3ccb9a
-  data.tar.gz: 89c187a8dc111632c4458d362f7c9e3e975fe2d782f00410530bfbca6c96935a79a221a2775ab28d127aab67b282f1d054715fc2eee86808e02f92249f6ceb9f
+  metadata.gz: 013340f2cd3d244c113bf08e34d2f2c59fbdfaa185f59822d7f5377f1cdc9a8900ff4bbfe0ed0acabc83c8c33c9c3601d475d397ef7683e18cc19316a93c4fb4
+  data.tar.gz: ed38184af176f4ddff322fae7378110009098ba0a045021a59b7710fbfd78ea9ac4822d2f0db9c793cc6753a59bd65eeb0a029f4e67b2421ff7aee56a6e25d53

data/CHANGELOG.md

@@ -1,3 +1,6 @@
+v5.2.0 (July 2026)
+  - Standalone calculator: redesign with two-column layout, sticky results panel, severity badges, and vector string copy
+
 v5.1.0 (May 2026)
   - No changes
 

data/README.md

@@ -1,10 +1,12 @@
 # CVSS score calculator for Dradis
 
-This simple add-on adds a new page under `/calculators/cvss` for you to perform CVSS score calculations:
+This add-on adds the Common Vulnerability Scoring System (CVSS) risk calculator to [Dradis Framework](https://dradis.com/):
 
 ![cvss4_calculator](https://github.com/dradis/dradis-calculator_cvss/assets/111541062/fd957a70-c068-4453-908e-be50beff9325)
 
-The Common Vulnerability Scoring System (CVSS) Version 4.0, 3.1, 3.0 Calculator is heavily inspired in the one provided by [FIRST](https://www.first.org/cvss/calculator/3.0).
+Versions 4.0, 3.1, 3.0 of CVSS are supported in the calculator, which is heavily inspired in the one provided by [FIRST](https://www.first.org/cvss/calculator/3.0).
+
+You can try the [CVSS calculator online](https://dradis.com/tools/calculators/cvss.html) and outside of Dradis.
 
 
 ## Install

data/app/assets/javascripts/dradis/plugins/calculators/cvss/cvss.js

@@ -1,32 +1,57 @@
-$(document).on('turbo:load', function () {
-  if ($('[data-behavior~=cvss-version]').length) {
-    function handleVersionSelection() {
-      var selectedValue = $('[data-behavior~=cvss-version]').val();
-      $('[data-cvss-version]').addClass('d-none');
-      switch (selectedValue) {
-        case '40':
-          $('[data-cvss-version=4]').removeClass('d-none');
-          window.calculator = new CVSS40Calculator();
-          break;
-        case '31':
-          $('[data-cvss-version=3]').removeClass('d-none');
-          window.calculator = new CVSS31Calculator();
-          break;
-        case '30':
-          $('[data-cvss-version=3]').removeClass('d-none');
-          window.calculator = new CVSS30Calculator();
-          break;
-      }
+$(document).on('turbo:load', () => {
+  if (!$('[data-behavior~=cvss-version]').length) return;
+
+  const isStandalone = $('[data-behavior~=cvss-calculator]').length > 0;
+
+  const handleVersionSelection = () => {
+    const selectedValue = $('[data-behavior~=cvss-version]').val();
+    $('[data-cvss-version]').addClass('d-none');
+
+    switch (selectedValue) {
+      case '40':
+        $('[data-cvss-version=4]').removeClass('d-none');
+        window.calculator = new CVSS40Calculator();
+        break;
+      case '31':
+        $('[data-cvss-version=3]').removeClass('d-none');
+        window.calculator = new CVSS31Calculator();
+        break;
+      case '30':
+        $('[data-cvss-version=3]').removeClass('d-none');
+        window.calculator = new CVSS30Calculator();
+        break;
     }
-    handleVersionSelection();
-    $('[data-behavior~=cvss-error]').addClass('d-none');
-    $('[data-behavior~=cvss-buttons] button').on('click', function () {
-      var $this = $(this);
-      $this.parent().find('button').removeClass('active btn-primary');
-      $this.addClass('active btn-primary');
-      $(`input[name="${$this.attr('name')}"]`).val($this.val());
-      window.calculator.calculate();
-    });
-    $('[data-behavior~=cvss-version]').on('change', handleVersionSelection);
-  }
+  };
+
+  handleVersionSelection();
+  $('[data-behavior~=cvss-error]').addClass('d-none');
+
+  $('[data-behavior~=cvss-buttons] button').on('click', function () {
+    const $btn = $(this);
+    const $siblings = $btn.parent().find('button');
+
+    $siblings.removeClass('active btn-primary');
+
+    if (isStandalone) {
+      $siblings.addClass('btn-outline-primary');
+      $btn.removeClass('btn-outline-primary');
+    }
+
+    $btn.addClass('active btn-primary');
+    $(`input[name="${$btn.attr('name')}"]`).val($btn.val());
+    window.calculator.calculate();
+  });
+
+  $('[data-behavior~=cvss-version]').on('change', handleVersionSelection);
+
+  $('[data-behavior~=cvss-copy-vector]').on('click', function () {
+    const vectorText = $('[data-behavior~=cvss4-vector]').text();
+    navigator.clipboard.writeText(vectorText);
+
+    const $btn = $(this);
+    $btn.find('i').removeClass('fa-regular fa-copy').addClass('fa-solid fa-check');
+    setTimeout(() => {
+      $btn.find('i').removeClass('fa-solid fa-check').addClass('fa-regular fa-copy');
+    }, 2000);
+  });
 });

data/app/assets/javascripts/dradis/plugins/calculators/cvss/v4/calculator.js

@@ -209,8 +209,19 @@ class CVSS40Calculator extends CVSS4Calculator {
     }
 
     $('[data-behavior=cvss4-result-text] textarea').val(issue_cvss);
-    $('[data-behavior=cvss4-result]').html(
-      this.app.score() + ' (' + this.app.qualScore() + ')',
-    );
+
+    const score = this.app.score();
+    const severity = this.app.qualScore();
+
+    if ($('[data-behavior=cvss4-severity]').length) {
+      $('[data-behavior=cvss4-result]').text(score);
+      $('[data-behavior=cvss4-severity]')
+        .text(severity)
+        .removeClass('cvss-severity-none cvss-severity-low cvss-severity-medium cvss-severity-high cvss-severity-critical')
+        .addClass(`cvss-severity-${severity.toLowerCase()}`);
+      $('[data-behavior=cvss4-vector]').text(this.baseVector());
+    } else {
+      $('[data-behavior=cvss4-result]').html(`${score} (${severity})`);
+    }
   }
 }

data/app/assets/stylesheets/dradis/plugins/calculators/cvss/_metric_labels.scss

@@ -0,0 +1,28 @@
+.cvss-metric-label {
+  display: block;
+  margin-bottom: 0.375rem;
+
+  strong {
+    font-weight: 700;
+    margin-right: 0.25rem;
+  }
+
+  span {
+    color: var(--text-muted);
+  }
+
+  i {
+    color: var(--text-muted);
+    cursor: help;
+    margin-left: 0.25rem;
+  }
+}
+
+.cvss-btn-group {
+  margin-bottom: 1.5rem;
+}
+
+.cvss-group-title {
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}

data/app/assets/stylesheets/dradis/plugins/calculators/cvss/base.css.scss

@@ -1,5 +1,223 @@
-@import '_bootstrap';
-@import 'font-awesome';
-
 @import 'hera/variables';
-@import 'hera/modules/buttons';
+@import 'dradis/plugins/calculators/cvss/metric_labels';
+
+.cvss-calculator {
+  padding-bottom: 2rem;
+
+  .cvss-metric-group {
+    border: 1px solid var(--border-color);
+    border-radius: 0.5rem;
+    margin-bottom: 1.25rem;
+    padding: 1.5rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .cvss-group-title {
+    border-bottom: 1px solid var(--border-color);
+    font-size: 0.875em;
+    letter-spacing: 0.04em;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    text-transform: uppercase;
+  }
+
+  .cvss-metric-subgroup {
+    margin-top: 2rem;
+    width: 100%;
+
+    &:first-child {
+      margin-top: 1rem;
+    }
+  }
+
+  .cvss-btn-group.btn-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    margin-bottom: 1rem;
+
+    > .btn {
+      border-radius: 2rem !important;
+      flex: none;
+      font-size: 0.8rem;
+      font-weight: 400;
+      margin-left: 0;
+      padding: 0.3rem 0.75rem;
+      white-space: nowrap;
+
+      &:not(.active) {
+        background: var(--secondary-bg);
+        color: var(--text-muted);
+
+        &:hover {
+          background: $brand-100;
+          color: $primary;
+        }
+      }
+
+      &.active {
+        background: $primary;
+        border: 1px solid $primary;
+        box-shadow: 0.125rem 0.125rem 0.5rem 0 rgba($shadow-color-dark, 0.1);
+        color: $white;
+      }
+    }
+  }
+}
+
+.cvss-results-panel {
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  box-shadow: 0.125rem 0.125rem 0.5rem 0 rgba($shadow-color-dark, 0.1);
+  padding: 1.5rem;
+  position: sticky;
+  top: 1.5rem;
+}
+
+.cvss-score-display {
+  align-items: center;
+  display: flex;
+  margin-bottom: 1.5rem;
+}
+
+.cvss-score {
+  font-size: 3rem;
+  font-weight: 700;
+  line-height: 1;
+  margin-right: 0.75rem;
+}
+
+.cvss-severity-badge {
+  border: 1px solid transparent;
+  border-radius: 2rem;
+  display: inline-block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: 0.25rem 0.875rem;
+}
+
+.cvss-severity-none {
+  background: $grey-100;
+  border-color: $grey-800;
+  color: $grey-800;
+}
+
+.cvss-severity-low {
+  background: $blue-100;
+  border-color: $blue-700;
+  color: $blue-700;
+}
+
+.cvss-severity-medium {
+  background: $orange-100;
+  border-color: $orange-700;
+  color: $orange-700;
+}
+
+.cvss-severity-high {
+  background: $red-100;
+  border-color: $red-600;
+  color: $red-600;
+}
+
+.cvss-severity-critical {
+  background: mix($white, $lavender-dark, 85%);
+  border-color: darken($lavender-dark, 20%);
+  color: darken($lavender-dark, 20%);
+}
+
+.cvss-vector-display {
+  margin-bottom: 1.25rem;
+}
+
+.cvss-vector-label,
+.cvss-output-label {
+  letter-spacing: 0.04em;
+  margin-bottom: 0.375rem;
+  text-transform: uppercase;
+}
+
+.cvss-output-label span {
+  letter-spacing: 0;
+  margin-top: 0.125rem;
+  text-transform: none;
+}
+
+.cvss-vector-copyable {
+  align-items: center;
+  background: var(--secondary-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 0.375rem;
+  display: flex;
+  padding: 0.5rem 0.75rem;
+}
+
+.cvss-vector-string {
+  background-color: transparent;
+  color: var(--text-muted);
+  flex: 1;
+  font-size: 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cvss-copy-btn {
+  background: none;
+  border: none;
+  flex-shrink: 0;
+  margin-left: 0.5rem;
+  padding: 0.125rem 0.375rem;
+
+  &:hover {
+    color: $primary;
+  }
+}
+
+.cvss-dradis-output {
+  margin-bottom: 0.5rem;
+}
+
+.cvss-output-textarea {
+  background: var(--secondary-bg) !important;
+  border: 1px solid var(--border-color);
+  border-radius: 0.375rem;
+  color: var(--text-muted);
+  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo',
+    monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  resize: vertical;
+
+  &:focus {
+    border-color: $primary;
+    box-shadow: 0 0 0 0.2rem rgba($primary, 0.15);
+  }
+}
+
+.navbar-brand {
+  color: var(--text-default);
+
+  &:hover {
+    color: var(--text-default);
+  }
+}
+
+@media (max-width: 991px) {
+  .cvss-results-panel {
+    box-shadow: none;
+    position: static;
+  }
+
+  .cvss-score {
+    font-size: 2.25rem;
+  }
+
+  .cvss-calculator .cvss-btn-group .btn {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.625rem;
+  }
+}

data/app/assets/stylesheets/dradis/plugins/calculators/cvss/manifests/hera.scss

@@ -1 +1,2 @@
 @import 'hera/variables';
+@import 'dradis/plugins/calculators/cvss/metric_labels';

data/app/views/dradis/plugins/calculators/cvss/base/index.html.erb

@@ -1,17 +1,17 @@
-<%= content_tag :div, class: 'page-header' do %>
-  <h1 class="d-flex align-items-center justify-content-between">
-    CVSS score calculator
-    <div class="fs-3"><%= render 'dradis/plugins/calculators/cvss/version_menu' %></div>
-  </h1>
-<% end %>
+<div class="cvss-calculator" data-behavior="cvss-calculator">
+  <div class="page-header d-flex align-items-center justify-content-between mb-4">
+    <h1 class="m-0">CVSS v4.0 Calculator</h1>
+    <div class="fs-6"><%= render 'dradis/plugins/calculators/cvss/version_menu' %></div>
+  </div>
 
-<p class="lead">Use this page to calculate the <abbr title="Common Vulnerability Scoring System">CVSS</abbr> score of a given finding.</p>
+  <p class="lead">Calculate <abbr title="Common Vulnerability Scoring System">CVSS</abbr> scores for your findings.</p>
 
-<p class="alert alert-danger d-none" data-behavior="cvss-error"></p>
+  <p class="alert alert-danger d-none" data-behavior="cvss-error"></p>
 
-<div id="v3-index d-none" data-cvss-version="3">
-  <%= render 'dradis/plugins/calculators/cvss/base/v3/index' %>
-</div>
-<div id="v4-index d-none" data-cvss-version="4">
-  <%= render 'dradis/plugins/calculators/cvss/base/v4/index' %>
+  <div id="v3-index" class="d-none" data-cvss-version="3">
+    <%= render 'dradis/plugins/calculators/cvss/base/v3/index' %>
+  </div>
+  <div id="v4-index" data-cvss-version="4">
+    <%= render 'dradis/plugins/calculators/cvss/base/v4/index' %>
+  </div>
 </div>