Vulnerability Scanner Report
blocksecuritySnyk and Trivy style CVE vulnerability scanner report and dependency security audit with severity breakdown cards, CVSS metrics, package version diffs, advisory inspection drawer, and automated remediation PR actions.
Installation
$pnpm dlx uipkge-ng@latest add vulnerability-scanner-report$npx uipkge-ng@latest add vulnerability-scanner-report$yarn dlx uipkge-ng@latest add vulnerability-scanner-report$bunx uipkge-ng@latest add vulnerability-scanner-reportManifest:
https://uipkge.dev/r/angular/vulnerability-scanner-report.jsonInstalls to:src/app/components/blocks/vulnerability-scanner-report/Variants
Loading interactive previews…
Loading interactive previews…
Schema
Type aliases exported from this item's source. Use these to shape the data you pass in.
CveIteminterface CveItem {
id: string
title: string
cwe: string
severity: CveSeverity
cvssScore: number
cvssVector: string
pkgName: string
installedVersion: string
fixedVersion: string
exploitStatus: ExploitStatus
exploitLabel: string
attackVector: string
attackComplexity: string
privilegesRequired: string
userInteraction: string
description: string
impact: string
remediationDiff: {
removed: string
added: string
}
patchCommand: string
advisoryUrl: string
}Files installed (2)
src/app/components/blocks/vulnerability-scanner-report/vulnerability-scanner-report.component.ts46.8 kB
// Snyk / Trivy style CVE vulnerability scanner report and dependency security audit: // severity breakdown cards, CVSS metrics, package version diffs, advisory inspection // drawer, and automated remediation PR actions. Port of the React block 1:1. import { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core' import { AlertCircle, AlertTriangle, Check, CheckCircle2, Copy, Download, ExternalLink, FileCode2, GitPullRequest, Info, LucideAngularModule, Package, RefreshCw, Search, ShieldAlert, ShieldCheck, } from 'lucide-angular' import { cn } from '@/lib/utils' import { UiBadgeComponent } from '@/ui/badge/badge.component' import { UiButtonComponent } from '@/ui/button/button.component' import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component' import { UiInputComponent } from '@/ui/input/input.component' import { UiProgressComponent } from '@/ui/progress/progress.component' import { UiSelectComponent, UiSelectContentComponent, UiSelectItemComponent, UiSelectTriggerComponent, UiSelectValueComponent, } from '@/ui/select/select.component' import { UiSheetCloseComponent, UiSheetComponent, UiSheetContentComponent, UiSheetDescriptionComponent, UiSheetFooterComponent, UiSheetHeaderComponent, UiSheetTitleComponent, } from '@/ui/sheet/sheet.component' import { UiTableBodyComponent, UiTableCellComponent, UiTableComponent, UiTableHeadComponent, UiTableHeaderComponent, UiTableRowComponent, } from '@/ui/table/table.component' export type CveSeverity = 'critical' | 'high' | 'medium' | 'low' export type ExploitStatus = 'poc' | 'none' export interface CveItem { id: string title: string cwe: string severity: CveSeverity cvssScore: number cvssVector: string pkgName: string installedVersion: string fixedVersion: string exploitStatus: ExploitStatus exploitLabel: string attackVector: string attackComplexity: string privilegesRequired: string userInteraction: string description: string impact: string remediationDiff: { removed: string added: string } patchCommand: string advisoryUrl: string } const defaultCveItems: CveItem[] = [ { id: 'CVE-2026-38419', title: 'Prototype Pollution via mergeCustomizer in lodash', cwe: 'CWE-1321', severity: 'high', cvssScore: 8.4, cvssVector: 'CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:H/A:N', pkgName: 'lodash', installedVersion: '4.17.20', fixedVersion: '4.17.22+', exploitStatus: 'poc', exploitLabel: 'Proof of Concept available', attackVector: 'Network (Remote)', attackComplexity: 'Low', privilegesRequired: 'None', userInteraction: 'None', description: 'A prototype pollution vulnerability in lodash prior to 4.17.22 allows unauthenticated remote attackers to modify Object.prototype properties via crafted JSON payloads, leading to denial of service or potential remote code execution.', impact: 'Critical data integrity failure and property tampering across server runtime objects.', remediationDiff: { removed: ' "lodash": "^4.17.20",', added: ' "lodash": "^4.17.22",', }, patchCommand: 'npm install lodash@^4.17.22 --save-exact', advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-38419', }, { id: 'CVE-2026-29401', title: 'Server-Side Request Forgery (SSRF) bypass in axios redirect handler', cwe: 'CWE-918', severity: 'high', cvssScore: 7.8, cvssVector: 'CVSS:3.1/AV:N/AC:L/PR:N/UI:R/S:C/C:H/I:N/A:N', pkgName: 'axios', installedVersion: '1.6.2', fixedVersion: '1.7.9+', exploitStatus: 'poc', exploitLabel: 'Proof of Concept available', attackVector: 'Network (Remote)', attackComplexity: 'Low', privilegesRequired: 'None', userInteraction: 'Required', description: 'Axios versions <=1.6.8 improperly preserve sensitive Authorization and Cookie headers during cross-origin HTTP 302/307 redirects, exposing upstream credentials to untrusted third-party endpoints.', impact: 'Authorization bearer token leakage to arbitrary redirect targets.', remediationDiff: { removed: ' "axios": "^1.6.2",', added: ' "axios": "^1.7.9",', }, patchCommand: 'npm install axios@^1.7.9 --save-exact', advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-29401', }, { id: 'CVE-2026-10492', title: 'Arbitrary File Overwrite via hardlink traversal in tar', cwe: 'CWE-59', severity: 'medium', cvssScore: 6.5, cvssVector: 'CVSS:3.1/AV:L/AC:L/PR:N/UI:R/S:U/C:N/I:H/A:H', pkgName: 'tar', installedVersion: '6.1.11', fixedVersion: '6.2.1+', exploitStatus: 'none', exploitLabel: 'No known exploit', attackVector: 'Local Archive Extraction', attackComplexity: 'Low', privilegesRequired: 'None', userInteraction: 'Required', description: 'The tar package before 6.2.1 is vulnerable to arbitrary file write outside the extraction destination directory when untrusted tar archives contain hardlinks pointing to symlinked directories.', impact: 'Arbitrary filesystem overwrite upon unpacking unvetted tarball artifacts.', remediationDiff: { removed: ' "tar": "^6.1.11",', added: ' "tar": "^6.2.1",', }, patchCommand: 'npm install tar@^6.2.1 --save-exact', advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-10492', }, { id: 'CVE-2026-84920', title: 'Signature verification bypass via algorithm confusion in jsonwebtoken', cwe: 'CWE-347', severity: 'medium', cvssScore: 6.1, cvssVector: 'CVSS:3.1/AV:N/AC:H/PR:N/UI:N/S:U/C:H/I:L/A:N', pkgName: 'jsonwebtoken', installedVersion: '8.5.1', fixedVersion: '9.0.2+', exploitStatus: 'poc', exploitLabel: 'Proof of Concept available', attackVector: 'Network (Remote)', attackComplexity: 'High', privilegesRequired: 'None', userInteraction: 'None', description: 'When jwt.verify() is executed without explicit algorithms whitelisting, attackers can forge unsigned tokens or switch asymmetric RS256 keys to symmetric HMAC evaluation with public certs.', impact: 'Unauthorized identity impersonation and claim forgery.', remediationDiff: { removed: ' "jsonwebtoken": "^8.5.1",', added: ' "jsonwebtoken": "^9.0.2",', }, patchCommand: 'npm install jsonwebtoken@^9.0.2 --save-exact', advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-84920', }, { id: 'CVE-2026-18933', title: 'Regular Expression Denial of Service (ReDoS) in micromatch', cwe: 'CWE-1333', severity: 'medium', cvssScore: 5.3, cvssVector: 'CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:N/I:N/A:L', pkgName: 'micromatch', installedVersion: '4.0.5', fixedVersion: '4.0.8+', exploitStatus: 'none', exploitLabel: 'No known exploit', attackVector: 'Network (Remote)', attackComplexity: 'Low', privilegesRequired: 'None', userInteraction: 'None', description: 'A backtracking exponential regular expression in micromatch path globbing allows attackers sending crafted nested brace expressions to cause catastrophic CPU exhaustion and event loop freeze.', impact: 'Node.js main thread event-loop starvation and service unresponsiveness.', remediationDiff: { removed: ' "micromatch": "^4.0.5",', added: ' "micromatch": "^4.0.8",', }, patchCommand: 'npm install micromatch@^4.0.8 --save-exact', advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-18933', }, { id: 'CVE-2026-04192', title: 'Information disclosure in child process error serialization in cross-spawn', cwe: 'CWE-209', severity: 'low', cvssScore: 3.7, cvssVector: 'CVSS:3.1/AV:L/AC:H/PR:L/UI:N/S:U/C:L/I:N/A:N', pkgName: 'cross-spawn', installedVersion: '7.0.3', fixedVersion: '7.0.6+', exploitStatus: 'none', exploitLabel: 'No known exploit', attackVector: 'Local Environment', attackComplexity: 'High', privilegesRequired: 'Low', userInteraction: 'None', description: 'Under verbose debug logging configurations, command environment variables containing auth tokens may be included in uncaught spawn error stacks printed to stdout.', impact: 'Accidental leakage of process environment credentials in CI runner logs.', remediationDiff: { removed: ' "cross-spawn": "^7.0.3",', added: ' "cross-spawn": "^7.0.6",', }, patchCommand: 'npm install cross-spawn@^7.0.6 --save-exact', advisoryUrl: 'https://nvd.nist.gov/vuln/detail/CVE-2026-04192', }, ] @Component({ changeDetection: ChangeDetectionStrategy.Eager, selector: 'ui-vulnerability-scanner-report, [ui-vulnerability-scanner-report]', standalone: true, // React renders the root <div> itself: the host stays out of layout and `class` goes to the root. host: { '[attr.class]': '"contents"' }, imports: [ LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent, UiInputComponent, UiProgressComponent, UiSelectComponent, UiSelectContentComponent, UiSelectItemComponent, UiSelectTriggerComponent, UiSelectValueComponent, UiSheetCloseComponent, UiSheetComponent, UiSheetContentComponent, UiSheetDescriptionComponent, UiSheetFooterComponent, UiSheetHeaderComponent, UiSheetTitleComponent, UiTableBodyComponent, UiTableCellComponent, UiTableComponent, UiTableHeadComponent, UiTableHeaderComponent, UiTableRowComponent, ], template: ` <div data-slot="vulnerability-scanner-report" [class]="rootClass"> <!-- Header Section --> <div class="border-border/80 bg-card text-card-foreground flex flex-col gap-4 rounded-xl border p-4 shadow-xs sm:p-5 lg:flex-row lg:items-center lg:justify-between" > <div class="space-y-1.5"> <div class="flex flex-wrap items-center gap-2.5"> <div class="bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-lg border" > <lucide-icon [img]="ShieldAlert" class="text-warning size-4.5" /> </div> <div> <div class="flex flex-wrap items-center gap-2"> <h1 class="text-foreground text-base font-semibold tracking-tight sm:text-lg">{{ targetRepo() }}</h1> <span ui-badge variant="warning" class="gap-1 text-xs font-medium"> <span class="bg-warning size-1.5 rounded-full"></span> {{ grade() }} · {{ gradeSummary() }} </span> </div> <div class="text-muted-foreground flex flex-wrap items-center gap-2 pt-0.5 text-xs"> <span>{{ currentLastScanned() }}</span> <span class="opacity-40">·</span> <span class="font-mono">{{ targetBranch() }}</span> <span class="opacity-40">·</span> <span class="font-mono">{{ baseImage() }}</span> <span class="opacity-40">·</span> <span>{{ totalDeps().toLocaleString() }} dependencies audited</span> </div> </div> </div> </div> <div class="flex flex-wrap items-center gap-2 self-start sm:gap-2.5 lg:self-center"> <button ui-button aria-label="Download attachment" variant="outline" size="sm" class="h-8 gap-1.5 text-xs font-medium shadow-xs" (click)="exportSbom()" > @if (exportSuccess()) { <lucide-icon [img]="Check" class="text-success size-3.5" /> } @else { <lucide-icon [img]="Download" class="size-3.5" /> } <span>{{ exportSuccess() ? 'SBOM Exported' : 'Export SBOM (SPDX)' }}</span> </button> <button ui-button variant="default" size="sm" class="h-8 gap-1.5 text-xs font-medium shadow-xs" [disabled]="isScanning()" (click)="triggerRescan()" > <lucide-icon [img]="RefreshCw" [class]="rescanIconClass" /> <span>{{ isScanning() ? 'Scanning Container...' : 'Trigger Re-scan' }}</span> </button> </div> </div> <!-- Active Scan Progress Track --> @if (isScanning()) { <div class="border-primary/20 bg-primary/5 space-y-1.5 rounded-lg border p-3"> <div class="flex items-center justify-between gap-x-2 text-xs font-medium"> <span class="text-primary flex items-center gap-1.5"> <lucide-icon [img]="Search" class="size-3.5" /> Running AST & SBOM vulnerability correlation against NVD & OSV databases... </span> <span class="text-muted-foreground font-mono">{{ scanProgress() }}%</span> </div> <ui-progress [value]="scanProgress()" class="h-1.5" /> </div> } <!-- 4 CVE Severity Summary Cards --> <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4"> <!-- Critical Card --> <div ui-card [class]="severityCardClass('critical')" (click)="toggleSeverityFilter('critical')"> <div ui-card-content class="p-4"> <div class="flex items-start justify-between"> <div class="space-y-1"> <p class="text-muted-foreground text-xs font-medium tracking-wider uppercase">Critical Severity</p> <div class="flex items-baseline gap-2"> <span class="text-foreground font-mono text-2xl font-bold tracking-tight"> {{ summaryCounts().critical }} </span> <span class="text-success text-xs font-medium">0 CVEs</span> </div> </div> <div class="border-success/20 bg-success/10 text-success flex size-8 items-center justify-center rounded-lg border" > <lucide-icon [img]="ShieldCheck" class="size-4.5" /> </div> </div> <div class="border-border/50 text-muted-foreground mt-3 flex items-center justify-between gap-x-2 border-t pt-2 text-xs" > <span class="text-success font-medium">Zero critical exposures</span> <span class="font-mono text-xs">CVSS 9.0–10.0</span> </div> </div> </div> <!-- High Card --> <div ui-card [class]="severityCardClass('high')" (click)="toggleSeverityFilter('high')"> <div ui-card-content class="p-4"> <div class="flex items-start justify-between"> <div class="space-y-1"> <p class="text-muted-foreground text-xs font-medium tracking-wider uppercase">High Severity</p> <div class="flex items-baseline gap-2"> <span class="text-foreground font-mono text-2xl font-bold tracking-tight"> {{ summaryCounts().high }} </span> <span class="text-destructive text-xs font-medium">2 CVEs</span> </div> </div> <div class="border-destructive/20 bg-destructive/10 text-destructive flex size-8 items-center justify-center rounded-lg border" > <lucide-icon [img]="AlertTriangle" class="size-4.5" /> </div> </div> <div class="border-border/50 text-muted-foreground mt-3 flex items-center justify-between gap-x-2 border-t pt-2 text-xs" > <span class="text-destructive font-medium">Actionable patches ready</span> <span class="font-mono text-xs">CVSS 7.0–8.9</span> </div> </div> </div> <!-- Medium Card --> <div ui-card [class]="severityCardClass('medium')" (click)="toggleSeverityFilter('medium')"> <div ui-card-content class="p-4"> <div class="flex items-start justify-between"> <div class="space-y-1"> <p class="text-muted-foreground text-xs font-medium tracking-wider uppercase">Medium Severity</p> <div class="flex items-baseline gap-2"> <span class="text-foreground font-mono text-2xl font-bold tracking-tight"> {{ summaryCounts().medium }} </span> <span class="text-warning text-xs font-medium">5 CVEs</span> </div> </div> <div class="border-warning/20 bg-warning/10 text-warning flex size-8 items-center justify-center rounded-lg border" > <lucide-icon [img]="AlertCircle" class="size-4.5" /> </div> </div> <div class="border-border/50 text-muted-foreground mt-3 flex items-center justify-between gap-x-2 border-t pt-2 text-xs" > <span class="text-warning font-medium">3 in direct dependencies</span> <span class="font-mono text-xs">CVSS 4.0–6.9</span> </div> </div> </div> <!-- Low Card --> <div ui-card [class]="severityCardClass('low')" (click)="toggleSeverityFilter('low')"> <div ui-card-content class="p-4"> <div class="flex items-start justify-between"> <div class="space-y-1"> <p class="text-muted-foreground text-xs font-medium tracking-wider uppercase">Low Severity</p> <div class="flex items-baseline gap-2"> <span class="text-foreground font-mono text-2xl font-bold tracking-tight"> {{ summaryCounts().low }} </span> <span class="text-info text-xs font-medium">12 CVEs</span> </div> </div> <div class="border-info/20 bg-info/10 text-info flex size-8 items-center justify-center rounded-lg border" > <lucide-icon [img]="Info" class="size-4.5" /> </div> </div> <div class="border-border/50 text-muted-foreground mt-3 flex items-center justify-between gap-x-2 border-t pt-2 text-xs" > <span class="text-info font-medium">Informational & debug</span> <span class="font-mono text-xs">CVSS 0.1–3.9</span> </div> </div> </div> </div> <!-- Filter & Search Toolbar --> <div class="flex flex-col gap-2.5 sm:flex-row sm:items-center sm:justify-between"> <div class="flex flex-1 flex-wrap items-center gap-2"> <div class="relative w-full sm:w-72"> <lucide-icon [img]="Search" class="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" /> <ui-input [value]="searchQuery()" (valueChange)="searchQuery.set($event)" placeholder="Search CVE, package, or CWE..." class="h-8 pl-8 text-xs" /> </div> <!-- Severity Filter Select --> <ui-select [value]="severityFilter()" (valueChange)="severityFilter.set($event)"> <button ui-select-trigger class="h-8 w-36 text-xs capitalize"> <ui-select-value placeholder="All Severities" /> </button> <ui-select-content align="start"> <ui-select-item value="all">All Severities</ui-select-item> <ui-select-item value="critical">Critical (0)</ui-select-item> <ui-select-item value="high">High (2)</ui-select-item> <ui-select-item value="medium">Medium (5)</ui-select-item> <ui-select-item value="low">Low (12)</ui-select-item> </ui-select-content> </ui-select> <!-- Exploitability Filter Select --> <ui-select [value]="exploitFilter()" (valueChange)="exploitFilter.set($event)"> <button ui-select-trigger class="h-8 w-44 text-xs"> <ui-select-value placeholder="All Exploit Status" /> </button> <ui-select-content align="start"> <ui-select-item value="all">All Exploit Status</ui-select-item> <ui-select-item value="poc">PoC Available</ui-select-item> <ui-select-item value="none">No Known Exploit</ui-select-item> </ui-select-content> </ui-select> @if (severityFilter() !== 'all' || exploitFilter() !== 'all' || searchQuery()) { <button ui-button variant="ghost" size="sm" class="text-muted-foreground hover:text-foreground h-8 px-2 text-xs" (click)="resetFilters()" > Reset filters </button> } </div> <div class="text-muted-foreground flex items-center gap-2 text-xs"> <span> Showing <strong class="text-foreground font-mono">{{ filteredItems().length }}</strong> of {{ items().length }} audited vulnerabilities </span> </div> </div> <!-- Vulnerability Table Card --> <div ui-card class="border-border/80 bg-card text-card-foreground overflow-hidden shadow-xs"> <div class="overflow-x-auto"> <table ui-table> <thead ui-table-header> <tr ui-table-row class="hover:bg-transparent"> <th ui-table-head class="min-w-[220px]">Vulnerability / CVE</th> <th ui-table-head class="min-w-[130px]">Severity</th> <th ui-table-head class="min-w-[160px]">Affected Package</th> <th ui-table-head class="min-w-[170px]">Remediation Fixed</th> <th ui-table-head class="min-w-[180px]">Exploitability</th> <th ui-table-head class="min-w-[180px] text-right">Actions</th> </tr> </thead> <tbody ui-table-body> @for (item of filteredItems(); track item.id) { <tr ui-table-row class="hover:bg-muted/40 cursor-pointer transition-colors" (click)="openAdvisory(item)" > <!-- Vulnerability / CVE --> <td ui-table-cell class="py-3 align-top"> <div class="space-y-1"> <div class="flex items-center gap-2"> <span class="text-foreground font-mono text-xs font-semibold hover:underline"> {{ item.id }} </span> <span ui-badge variant="outline" class="px-1.5 py-0 font-mono text-xs"> {{ item.cwe }} </span> </div> <p class="text-muted-foreground line-clamp-1 max-w-[220px] text-xs">{{ item.title }}</p> </div> </td> <!-- Severity & CVSS Score --> <td ui-table-cell class="py-3 align-top"> <div class="space-y-1"> @if (item.severity === 'critical') { <span ui-badge variant="destructive" class="gap-1 font-mono text-xs font-medium"> <lucide-icon [img]="AlertCircle" class="size-3" /> CVSS {{ item.cvssScore }} Critical </span> } @else if (item.severity === 'high') { <span ui-badge class="border-destructive/20 bg-destructive/10 text-destructive gap-1 font-mono text-xs font-medium" > <lucide-icon [img]="AlertTriangle" class="size-3" /> CVSS {{ item.cvssScore }} High </span> } @else if (item.severity === 'medium') { <span ui-badge variant="warning" class="gap-1 font-mono text-xs font-medium"> <lucide-icon [img]="AlertCircle" class="size-3" /> CVSS {{ item.cvssScore }} Med </span> } @else { <span ui-badge variant="info" class="gap-1 font-mono text-xs font-medium"> <lucide-icon [img]="Info" class="size-3" /> CVSS {{ item.cvssScore }} Low </span> } <p class="text-muted-foreground font-mono text-xs">v3.1 Vector</p> </div> </td> <!-- Affected Package & Version --> <td ui-table-cell class="py-3 align-top"> <div class="flex items-center gap-2"> <lucide-icon [img]="Package" class="text-muted-foreground size-3.5 shrink-0" /> <div class="min-w-0"> <p class="text-foreground truncate font-mono text-xs font-medium">{{ item.pkgName }}</p> <p class="text-muted-foreground font-mono text-xs">v{{ item.installedVersion }}</p> </div> </div> </td> <!-- Remediation Fixed Version --> <td ui-table-cell class="py-3 align-top"> <div class="space-y-1"> <div class="border-success/20 bg-success/10 text-success inline-flex items-center gap-1 rounded-md border px-2 py-0.5 font-mono text-xs font-medium" > <lucide-icon [img]="CheckCircle2" class="text-success size-3" /> {{ item.fixedVersion }} </div> <p class="text-muted-foreground text-xs">Upgrade ready</p> </div> </td> <!-- Exploitability Status --> <td ui-table-cell class="py-3 align-top"> <div class="flex items-center gap-1.5"> <span [class]="exploitDotClass(item)"></span> <span [class]="exploitLabelClass(item)"> {{ item.exploitLabel }} </span> </div> </td> <!-- Row Action Buttons --> <td ui-table-cell class="py-3 text-right align-top" (click)="$event.stopPropagation()"> <div class="flex items-center justify-end gap-1.5"> <button ui-button variant="ghost" size="sm" class="text-muted-foreground hover:text-foreground h-7 px-2.5 text-xs" (click)="openAdvisory(item)" > View Advisory </button> @if (!fixedPrs()[item.id]) { <button ui-button variant="outline" size="sm" class="h-7 gap-1 px-2.5 text-xs font-medium shadow-xs" (click)="handleAutoFix(item.id)" > <lucide-icon [img]="GitPullRequest" class="size-3" /> Auto-Fix PR </button> } @else { <span ui-badge variant="success" class="h-7 gap-1 px-2.5 text-xs font-medium"> <lucide-icon [img]="Check" class="size-3" /> PR #849 Opened </span> } </div> </td> </tr> } @if (filteredItems().length === 0) { <tr ui-table-row> <td ui-table-cell [attr.colspan]="6" class="h-32 text-center"> <div class="flex flex-col items-center justify-center gap-1.5"> <lucide-icon [img]="ShieldCheck" class="text-success size-7" /> <p class="text-foreground text-sm font-medium">No matching vulnerabilities found</p> <p class="text-muted-foreground text-xs">All packages satisfy the active filter constraints.</p> </div> </td> </tr> } </tbody> </table> </div> <!-- Table Footer Metadata --> <div class="border-border/60 bg-muted/20 text-muted-foreground flex flex-col gap-2 border-t px-4 py-2.5 text-xs sm:flex-row sm:items-center sm:justify-between" > <div class="flex items-center gap-3"> <span class="flex items-center gap-1"> <span class="bg-success size-2 rounded-full"></span> NVD Sync Live </span> <span class="opacity-40">·</span> <span>CVSS Score Engine: v3.1 Specification</span> </div> <div class="flex items-center gap-2 font-mono"> <span>Target hash: 9a20bf183</span> </div> </div> </div> <!-- Detailed CVE Advisory Drawer / Sheet --> <div ui-sheet [open]="isDrawerOpen()" (openChange)="onDrawerOpenChange($event)"> <div ui-sheet-content class="w-full space-y-6 overflow-y-auto p-6 sm:max-w-xl md:max-w-2xl"> @if (selectedCve(); as sel) { <div ui-sheet-header class="space-y-2 p-0 text-left"> <div class="flex items-center justify-between gap-3 pr-6"> <div class="flex items-center gap-2"> @if (sel.severity === 'critical') { <span ui-badge variant="destructive" class="font-mono text-xs font-semibold"> CRITICAL {{ sel.cvssScore }} </span> } @else if (sel.severity === 'high') { <span ui-badge class="border-destructive/20 bg-destructive/10 text-destructive font-mono text-xs font-semibold" > HIGH {{ sel.cvssScore }} </span> } @else if (sel.severity === 'medium') { <span ui-badge variant="warning" class="font-mono text-xs font-semibold"> MEDIUM {{ sel.cvssScore }} </span> } @else { <span ui-badge variant="info" class="font-mono text-xs font-semibold">LOW {{ sel.cvssScore }}</span> } <span ui-badge variant="outline" class="font-mono text-xs"> {{ sel.cwe }} </span> </div> <a [href]="sel.advisoryUrl" target="_blank" rel="noopener noreferrer" class="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-xs" > <span>NVD Source</span> <lucide-icon [img]="ExternalLink" class="size-3" /> </a> </div> <h2 ui-sheet-title class="text-lg font-bold tracking-tight">{{ sel.id }}</h2> <p ui-sheet-description class="text-foreground/80 text-xs font-medium"> {{ sel.title }} </p> </div> <div class="space-y-5 text-xs"> <!-- CVSS 3.1 Metrics Grid --> <div class="border-border/80 bg-muted/30 space-y-3 rounded-lg border p-3.5"> <div class="flex items-center justify-between gap-x-2"> <span class="text-muted-foreground font-medium">CVSS v3.1 Base Score</span> <span class="text-foreground font-mono text-sm font-bold">{{ sel.cvssScore }} / 10.0</span> </div> <ui-progress [value]="sel.cvssScore * 10" class="h-2" /> <div class="grid grid-cols-2 gap-2.5 pt-1 text-xs sm:grid-cols-4"> <div class="bg-card border-border/60 rounded-md border p-2"> <p class="text-muted-foreground text-xs">Attack Vector</p> <p class="text-foreground mt-0.5 truncate font-medium">{{ sel.attackVector }}</p> </div> <div class="bg-card border-border/60 rounded-md border p-2"> <p class="text-muted-foreground text-xs">Complexity</p> <p class="text-foreground mt-0.5 font-medium">{{ sel.attackComplexity }}</p> </div> <div class="bg-card border-border/60 rounded-md border p-2"> <p class="text-muted-foreground text-xs">Privileges</p> <p class="text-foreground mt-0.5 font-medium">{{ sel.privilegesRequired }}</p> </div> <div class="bg-card border-border/60 rounded-md border p-2"> <p class="text-muted-foreground text-xs">Interaction</p> <p class="text-foreground mt-0.5 font-medium">{{ sel.userInteraction }}</p> </div> </div> <!-- CVSS Vector String --> <div class="border-border/50 text-muted-foreground flex items-center justify-between gap-x-2 border-t pt-2 font-mono text-xs" > <span class="truncate">{{ sel.cvssVector }}</span> </div> </div> <!-- Description & Technical Impact --> <div class="space-y-2"> <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase"> Vulnerability Overview </h3> <p class="text-foreground text-xs leading-relaxed">{{ sel.description }}</p> </div> <div class="space-y-2"> <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Technical Impact</h3> <div class="bg-card border-border/80 text-foreground/90 rounded-md border p-3 text-xs"> {{ sel.impact }} </div> </div> <!-- Package Path & Version Comparison --> <div class="space-y-2"> <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Dependency State</h3> <div class="grid grid-cols-1 gap-2.5 sm:grid-cols-2"> <div class="border-destructive/30 bg-destructive/5 rounded-md border p-3"> <p class="text-destructive text-xs font-medium">Installed Version</p> <p class="text-foreground mt-0.5 font-mono font-bold"> {{ sel.pkgName }}@{{ sel.installedVersion }} </p> <p class="text-muted-foreground mt-1 text-xs">Direct dependency in package.json</p> </div> <div class="border-success/30 bg-success/5 rounded-md border p-3"> <p class="text-success text-xs font-medium">Remediation Target</p> <p class="text-foreground mt-0.5 font-mono font-bold"> {{ sel.pkgName }}@{{ sel.fixedVersion }} </p> <p class="text-muted-foreground mt-1 text-xs">Non-breaking patch update</p> </div> </div> </div> <!-- Remediation Code Diff --> <div class="space-y-2"> <div class="flex items-center justify-between gap-x-2"> <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase"> package.json Patch Diff </h3> <span class="text-muted-foreground font-mono text-xs">package.json</span> </div> <div class="overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner"> <div class="text-muted-foreground flex items-center gap-2 border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5 text-xs" > <lucide-icon [img]="FileCode2" class="size-3.5" /> <span>dependencies</span> </div> <div class="space-y-1 p-3 text-xs leading-relaxed select-text"> <div class="bg-destructive/15 text-destructive rounded-xs px-1.5 py-0.5"> - {{ sel.remediationDiff.removed }} </div> <div class="bg-success/15 text-success rounded-xs px-1.5 py-0.5"> + {{ sel.remediationDiff.added }} </div> </div> </div> </div> <!-- Remediation CLI Command Box --> <div class="space-y-2"> <div class="flex items-center justify-between gap-x-2"> <h3 class="text-muted-foreground text-xs font-semibold tracking-wider uppercase"> CLI Remediation Command </h3> <button ui-button variant="ghost" size="xs" class="h-6 gap-1 px-2 text-xs" (click)="copyCommand(sel.id, sel.patchCommand)" > @if (copiedCveId() === sel.id) { <lucide-icon [img]="Check" class="text-success size-3" /> } @else { <lucide-icon [img]="Copy" class="size-3" /> } <span>{{ copiedCveId() === sel.id ? 'Copied' : 'Copy command' }}</span> </button> </div> <div class="border-border bg-muted/60 flex items-center justify-between gap-x-2 rounded-md border px-3 py-2 font-mono text-xs" > <span class="text-foreground truncate">{{ sel.patchCommand }}</span> </div> </div> </div> <div ui-sheet-footer class="border-border/80 flex flex-row items-center justify-end gap-2 border-t pt-4"> <button ui-button ui-sheet-close variant="outline" size="sm" class="text-xs">Close</button> @if (!fixedPrs()[sel.id]) { <button ui-button variant="default" size="sm" class="gap-1.5 text-xs font-medium" (click)="handleAutoFix(sel.id)" > <lucide-icon [img]="GitPullRequest" class="size-3.5" /> Open Auto-Fix Pull Request </button> } @else { <span ui-badge variant="success" class="h-8 gap-1.5 px-3 text-xs font-medium"> <lucide-icon [img]="Check" class="size-3.5" /> PR #849 Created & Assigned </span> } </div> } </div> </div> </div> `, }) export class UiVulnerabilityScannerReportComponent { protected readonly AlertCircle = AlertCircle protected readonly AlertTriangle = AlertTriangle protected readonly Check = Check protected readonly CheckCircle2 = CheckCircle2 protected readonly Copy = Copy protected readonly Download = Download protected readonly ExternalLink = ExternalLink protected readonly FileCode2 = FileCode2 protected readonly GitPullRequest = GitPullRequest protected readonly Info = Info protected readonly Package = Package protected readonly RefreshCw = RefreshCw protected readonly Search = Search protected readonly ShieldAlert = ShieldAlert protected readonly ShieldCheck = ShieldCheck @Input('class') className?: string @Input('targetRepo') set targetRepoInput(v: string | undefined) { if (v !== undefined) this.targetRepo.set(v) } @Input('targetBranch') set targetBranchInput(v: string | undefined) { if (v !== undefined) this.targetBranch.set(v) } @Input('baseImage') set baseImageInput(v: string | undefined) { if (v !== undefined) this.baseImage.set(v) } @Input('lastScanned') set lastScannedInput(v: string | undefined) { if (v !== undefined) { this.lastScanned.set(v) this.currentLastScanned.set(v) } } @Input('grade') set gradeInput(v: string | undefined) { if (v !== undefined) this.grade.set(v) } @Input('gradeSummary') set gradeSummaryInput(v: string | undefined) { if (v !== undefined) this.gradeSummary.set(v) } @Input('totalDeps') set totalDepsInput(v: number | undefined) { if (v !== undefined) this.totalDeps.set(v) } @Input('items') set itemsInput(v: CveItem[] | undefined) { if (v !== undefined) this.items.set(v.map((i) => ({ ...i }))) } readonly targetRepo = signal('uipkge / core-registry:v2.4') readonly targetBranch = signal('main (git:a4f891b)') readonly baseImage = signal('node:22-alpine3.20') readonly lastScanned = signal('Scanned 12m ago via Trivy v0.52') readonly grade = signal('Grade B+') readonly gradeSummary = signal('2 High CVEs') readonly totalDeps = signal(1284) readonly items = signal<CveItem[]>(defaultCveItems.map((i) => ({ ...i }))) readonly searchQuery = signal('') readonly severityFilter = signal<string>('all') readonly exploitFilter = signal<string>('all') readonly isScanning = signal(false) readonly scanProgress = signal(100) readonly currentLastScanned = signal('Scanned 12m ago via Trivy v0.52') readonly selectedCve = signal<CveItem | null>(null) readonly isDrawerOpen = signal(false) readonly copiedCveId = signal<string | null>(null) readonly fixedPrs = signal<Record<string, boolean>>({}) readonly exportSuccess = signal(false) private copyTimer: ReturnType<typeof setTimeout> | undefined private scanTimers: ReturnType<typeof setTimeout>[] = [] private scanInterval: ReturnType<typeof setInterval> | undefined readonly summaryCounts = computed(() => { const list = this.items() return { critical: list.filter((i) => i.severity === 'critical').length, high: list.filter((i) => i.severity === 'high').length, medium: 5, low: 12, total: list.length, } }) readonly filteredItems = computed(() => { const query = this.searchQuery().trim().toLowerCase() const sev = this.severityFilter() const exp = this.exploitFilter() return this.items().filter((item) => { const matchesSeverity = sev === 'all' || item.severity === sev const matchesExploit = exp === 'all' || item.exploitStatus === exp const matchesSearch = !query || item.id.toLowerCase().includes(query) || item.pkgName.toLowerCase().includes(query) || item.title.toLowerCase().includes(query) || item.cwe.toLowerCase().includes(query) return matchesSeverity && matchesExploit && matchesSearch }) }) get rootClass(): string { return cn('w-full space-y-5', this.className) } get rescanIconClass(): string { return cn('size-3.5', this.isScanning() && 'animate-spin') } severityCardClass(sev: string): string { return cn( 'border-border/80 bg-card text-card-foreground hover:border-border cursor-pointer shadow-xs transition-colors', this.severityFilter() === 'critical' && sev === 'critical' && 'border-success/50 ring-success ring-2', this.severityFilter() === 'high' && sev === 'high' && 'border-destructive/50 ring-destructive ring-2', this.severityFilter() === 'medium' && sev === 'medium' && 'border-warning/50 ring-warning ring-2', this.severityFilter() === 'low' && sev === 'low' && 'border-info/50 ring-info ring-2', ) } exploitDotClass(item: CveItem): string { return cn( 'size-2 shrink-0 rounded-full', item.exploitStatus === 'poc' ? 'bg-warning animate-pulse' : 'bg-muted-foreground/50', ) } exploitLabelClass(item: CveItem): string { return cn('text-xs font-medium', item.exploitStatus === 'poc' ? 'text-warning' : 'text-muted-foreground') } toggleSeverityFilter(sev: string): void { this.severityFilter.update((prev) => (prev === sev ? 'all' : sev)) } resetFilters(): void { this.severityFilter.set('all') this.exploitFilter.set('all') this.searchQuery.set('') } triggerRescan(): void { if (this.isScanning()) return this.isScanning.set(true) this.scanProgress.set(15) this.scanInterval = setInterval(() => { this.scanProgress.update((prev) => (prev < 90 ? prev + 25 : prev)) }, 150) this.scanTimers.push( setTimeout(() => { if (this.scanInterval) clearInterval(this.scanInterval) this.scanProgress.set(100) this.isScanning.set(false) this.currentLastScanned.set('Scanned just now via Trivy v0.52') }, 800), ) } openAdvisory(cve: CveItem): void { this.selectedCve.set(cve) this.isDrawerOpen.set(true) } onDrawerOpenChange(open: boolean): void { this.isDrawerOpen.set(open) if (!open) this.selectedCve.set(null) } handleAutoFix(cveId: string): void { this.fixedPrs.update((prev) => ({ ...prev, [cveId]: true })) } copyCommand(cveId: string, command: string): void { if (typeof navigator !== 'undefined' && navigator.clipboard) { void navigator.clipboard.writeText(command) this.copiedCveId.set(cveId) clearTimeout(this.copyTimer) this.copyTimer = setTimeout(() => { if (this.copiedCveId() === cveId) this.copiedCveId.set(null) }, 2000) } } exportSbom(): void { const sbomData = { spdxVersion: 'SPDX-2.3', dataLicense: 'CC0-1.0', SPDXID: 'SPDXRef-DOCUMENT', name: 'uipkge-core-registry-sbom', documentNamespace: 'https://uipkge.dev/spdxdocs/core-registry-v2.4', creationInfo: { created: new Date().toISOString(), creators: ['Tool: Trivy-v0.52', 'Organization: UIPKGE Security Squad'], }, packages: this.items().map((item) => ({ name: item.pkgName, SPDXID: `SPDXRef-Package-${item.pkgName}`, versionInfo: item.installedVersion, downloadLocation: `https://registry.npmjs.org/${item.pkgName}/-/${item.pkgName}-${item.installedVersion}.tgz`, filesAnalyzed: false, securityVulnerabilities: [ { id: item.id, severity: item.severity.toUpperCase(), cvssScore: item.cvssScore, remediation: item.fixedVersion, }, ], })), } if (typeof document !== 'undefined') { const jsonStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(sbomData, null, 2)) const downloadAnchor = document.createElement('a') downloadAnchor.setAttribute('href', jsonStr) downloadAnchor.setAttribute('download', `sbom-spdx-core-registry-${new Date().toISOString().slice(0, 10)}.json`) document.body.appendChild(downloadAnchor) downloadAnchor.click() downloadAnchor.remove() this.exportSuccess.set(true) this.scanTimers.push( setTimeout(() => { this.exportSuccess.set(false) }, 2000), ) } } }src/app/components/blocks/vulnerability-scanner-report/index.ts0.2 kB
export { UiVulnerabilityScannerReportComponent, type CveItem, type CveSeverity, type ExploitStatus, } from './vulnerability-scanner-report.component'
Raw manifest:https://uipkge.dev/r/angular/vulnerability-scanner-report.json