Exporting and Sharing Scores
Relevant source files
The following files were used as context for generating this wiki page:
The Quant application provides a robust set of features for exporting, sharing, and managing CVSS scores. These capabilities are designed to streamline vulnerability assessment workflows by allowing users to easily document, collaborate on, and integrate their findings into other systems. All sharing and exporting functionalities are performed entirely on the client-side, ensuring user data remains private.
The primary sharing options include copying the CVSS vector string, generating a shareable link that pre-configures the calculator, creating embeddable HTML widgets for websites, and saving scores to a local Score Manager for bulk operations like JSON export/import.
Sources: README.md:61-66, src/components/FAQAccordion.tsx:123-143, src/components/CVSSGenericCalculator.tsx
Sharing a Single Assessment
From the main calculator interface, users have several "one-click" options to share their current assessment. These are handled by the CVSSGenericCalculator component, which orchestrates the generation of different shareable artifacts.
Sources: src/components/CVSSGenericCalculator.tsx:209-238, src/components/cvss-calculator/ExportMenu.tsx
The following diagram illustrates the user flow for sharing a single score.
Copy Vector
This is the most direct way to share an assessment. It copies the generated CVSS vector string to the user's clipboard. This string can be used for documentation, tracking in ticketing systems, or pasting into other CVSS tools. The action is triggered by the copyVector function, which uses the browser's navigator.clipboard.writeText API and displays a confirmation toast.
Sources: src/components/CVSSGenericCalculator.tsx:210-213, src/lib/constants.ts:133, src/components/FAQAccordion.tsx:128-130
Share Link
This option generates a unique URL that, when opened, pre-populates the Quant calculator with the exact metrics from the shared assessment. The shareScore function constructs a URL by appending the URL-encoded vector string as a query parameter (?vector=...). This allows for easy collaboration and verification of scores.
Sources: src/components/CVSSGenericCalculator.tsx:215-219, src/lib/constants.ts:134, 142
The sequence diagram below shows the process of generating and using a shareable link.
Save to Score Manager
Users can save an assessment to the "Score Manager" by providing a name. This action, handled by handleSaveToHistory, persists the score entry (including version, score, severity, vector, and name) into the browser's localStorage. This allows for later comparison, analysis, and bulk exporting.
Sources: src/components/CVSSGenericCalculator.tsx:240-255, src/components/ScoreHistory.tsx:49-51, src/components/FAQAccordion.tsx:138-140
Embeddable Widget Generation
Quant can generate a self-contained HTML snippet for embedding a CVSS score card directly into a website or blog post. This functionality is powered by the generateEmbeddableCode function in lib/embed.ts.
Sources: src/lib/embed.ts, src/components/CVSSGenericCalculator.tsx:227-238
The process involves creating an HTML string with inline CSS and JavaScript, ensuring it renders correctly without conflicting with the host page's styles or scripts. A unique, timestamp-based class name (cvss-widget-container-167...) is used to scope all CSS rules.
The following diagram shows the widget generation flow.
Sources: src/lib/embed.ts:74-348
The generateEmbeddableCode function accepts the following parameters to build the widget:
| Parameter | Type | Description |
|---|---|---|
version | string | The CVSS version (e.g., "4.0"). |
score | number | The calculated numeric score. |
vectorString | string | The full CVSS vector string. |
severity | SeverityInfo | An object containing the severity label and colors. |
origin | string | The origin URL of the Quant application, used for building links. |
Sources: src/lib/embed.ts:74-81
The generated widget also includes UTM parameters in its "View on Quant" link for analytics purposes.
Sources: src/lib/constants.ts:51-55, src/lib/embed.ts:339-345
Score Manager: Bulk Export and Import
The Score Manager provides functionality to export the entire history of saved scores to a JSON file and import scores from such a file. This is useful for backups, migrating data between browsers, or sharing a collection of assessments.
Sources: src/components/ScoreHistory.tsx:206-224, 619-689
Export History
The exportHistory function serializes the array of ScoreHistoryEntry objects stored in the component's state into a formatted JSON string. It then creates a Blob, generates an object URL, and programmatically clicks a temporary anchor (<a>) element to trigger a file download. The filename is prefixed with cvss-history- followed by a timestamp.
Sources: src/components/ScoreHistory.tsx:619-632, src/lib/constants.ts:100
Import History
The importHistory function handles file uploads. When a user selects a JSON file:
- A
FileReaderreads the file content as text. - The content is parsed into a JavaScript array.
- The function validates that the imported data is an array.
- To prevent duplicates, it filters the imported entries, keeping only those whose
vectorStringdoes not already exist in the current history. - Valid new entries are assigned a new unique ID and added to the top of the history list.
- The updated history is saved back to
localStorage.
Sources: src/components/ScoreHistory.tsx:634-689
The following diagram illustrates the import/export sequence.
Summary
The exporting and sharing features in Quant are comprehensive, covering single-use sharing, website integration, and long-term data management. By leveraging client-side technologies like the Clipboard API, localStorage, and dynamic HTML generation, the application provides powerful collaboration and documentation tools without compromising user privacy. These features are central to making Quant a practical and effective tool for security professionals and developers.
Sources: README.md:61-72, src/components/FAQAccordion.tsx:35-49