feat: Add vulnerability tab on report view (#111)

Author: SimYunSup

packages/node-modules-inspector/build.config.ts

@@ -23,6 +23,7 @@ export default defineBuildConfig({
   rollup: {
     inlineDependencies: [
       '@antfu/utils',
+      'semver',
     ],
   },
 })

packages/node-modules-inspector/src/app/components/display/PackageSpec.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { PackageNode } from 'node-modules-tools'
 import { computed } from 'vue'
-import { getDeprecatedInfo } from '../../state/payload'
+import { getDeprecatedInfo, getVulnerability } from '../../state/payload'
 
 const props = defineProps<{
   pkg: PackageNode
 }>()
 
 const deprecation = computed(() => getDeprecatedInfo(props.pkg))
+const vulnerability = computed(() => getVulnerability(props.pkg))
 </script>
 
 <template>
@@ -32,7 +33,12 @@ const deprecation = computed(() => getDeprecatedInfo(props.pkg))
       op-fade
       :version="props.pkg.version"
       prefix="@"
-      :class="{ 'text-red line-through': deprecation?.current }"
+      :class="{
+        'text-red line-through': deprecation?.current || vulnerability?.level === 'critical',
+        'text-orange line-through': vulnerability?.level === 'high',
+        'text-yellow line-through': vulnerability?.level === 'moderate',
+        'text-gray line-through': vulnerability?.level === 'low',
+      }"
     />
   </span>
 </template>

packages/node-modules-inspector/src/app/components/display/VulnerabilityMessage.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PackageNode } from 'node-modules-tools'
+import { computed } from 'vue'
+import { getVulnerability } from '../../state/payload'
+
+const props = withDefaults(defineProps<{
+  pkg: PackageNode
+  showTitle?: boolean
+}>(), {
+  showTitle: true,
+})
+
+const vulnerability = computed(() => getVulnerability(props.pkg))
+</script>
+
+<template>
+  <a
+    v-if="vulnerability"
+    px3 py2 block
+    :href="vulnerability.url"
+    :class="vulnerability.level !== 'critical' ? 'badge-color-orange' : 'badge-color-red'"
+    target="_blank"
+  >
+    <div
+      v-if="showTitle"
+      flex="~ gap-1 items-center"
+      text-sm font-bold
+      :class="vulnerability.level !== 'critical' ? 'text-orange' : 'text-red'"
+    >
+      <div :class="vulnerability.level !== 'critical' ? 'i-ph-warning-circle-duotone' : 'i-ph-warning-duotone'" flex-none />
+      <div rounded-full font-mono>
+        Package has vulnerability
+      </div>
+    </div>
+    <div text-sm>
+      {{ vulnerability.title }}
+    </div>
+  </a>
+</template>

packages/node-modules-inspector/src/app/components/report/Vulnerability.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { PackageNode } from 'node-modules-tools'
+import { useRouter } from '#app/composables/router'
+import { DisplayDateBadge } from '#components'
+import { computed, nextTick } from 'vue'
+import { selectedNode } from '../../state/current'
+import { filters } from '../../state/filters'
+import { getVulnerability, payloads } from '../../state/payload'
+
+const router = useRouter()
+
+const vulnerabilities = computed(() => {
+  const result: PackageNode[] = []
+
+  payloads.filtered.packages.forEach((pkg) => {
+    const vulnerability = getVulnerability(pkg)
+    if (!vulnerability) {
+      return
+    }
+
+    result.push(pkg)
+  })
+
+  return result
+})
+
+function showGraph(pkg: PackageNode) {
+  filters.state.focus = null
+  filters.state.why = [pkg.spec]
+  selectedNode.value = pkg
+  nextTick(() => {
+    router.push({ path: '/graph', hash: location.hash })
+  })
+}
+</script>
+
+<template>
+  <template v-if="vulnerabilities.length">
+    <div badge-color-orange flex="~ gap-2 items-center" rounded-lg p2 my2 mt5 px3>
+      <div i-ph-warning-duotone flex-none />
+      <span>
+        Vulnerabilities in packages usually indicate security risks or misbehaviors.
+        Please upgrade to the supported versions or migrate to alternatives.
+      </span>
+    </div>
+
+    <UiSubTitle>
+      <span>Vulnerable Packages</span>
+      <DisplayNumberBadge :number="vulnerabilities.length" rounded-full text-sm color="badge-color-red" />
+    </UiSubTitle>
+    <div grid="~ cols-minmax-250px gap-4">
+      <div
+        v-for="pkg of vulnerabilities" :key="pkg.spec"
+        border="~ base rounded-lg" bg-glass
+        flex="~ col"
+        cursor-pointer
+        :class="selectedNode === pkg ? 'border-primary ring-4 ring-primary:20' : ''"
+        @click="selectedNode = pkg"
+      >
+        <div flex="~ items-center gap-2" border="b base" px2 py1>
+          <h2 font-mono flex-auto pl2>
+            <DisplayPackageSpec :pkg="pkg" />
+          </h2>
+          <button
+            p1 rounded-full op-fade hover:bg-active hover:text-primary hover:op100 flex="~ items-center"
+            title="Show Graph"
+            @click="showGraph(pkg)"
+          >
+            <div i-ph-graph-duotone text-lg />
+          </button>
+        </div>
+        <DisplayVulnerabilityMessage
+          :pkg="pkg"
+          :show-title="false"
+          class="bg-transparent!" pointer-events-none
+        />
+        <div flex="~ justify-between items-end w-full" mt-auto p2>
+          <DisplayDateBadge :pkg rounded-full text-xs />
+          <DisplayModuleType :pkg text-xs />
+        </div>
+      </div>
+    </div>
+  </template>
+  <template v-else>
+    <UiEmptyState
+      type="checkmark"
+      title="No Vulnerable Packages"
+      message="Great! your packages are secure."
+    />
+  </template>
+</template>

packages/node-modules-inspector/src/app/pages/report/[...report].vue

@@ -22,6 +22,10 @@ const selected = computed(() => params.report?.[0] || 'all')
       <div i-ph-warning-duotone />
       Deprecated
     </NuxtLink>
+    <NuxtLink btn-action as="button" :to="{ path: '/report/vulnerabilities', hash: location.hash }" active-class="text-red bg-red:5">
+      <div i-ph-warning-duotone />
+      Vulnerabilities
+    </NuxtLink>
     <NuxtLink btn-action as="button" :to="{ path: '/report/multiple-versions', hash: location.hash }" active-class="text-primary bg-primary:5">
       <div i-ph-copy-duotone />
       Multiple Versions
@@ -51,6 +55,7 @@ const selected = computed(() => params.report?.[0] || 'all')
   <ReportTransitiveDeps v-if="selected === 'dependencies' || selected === 'all'" />
   <ReportUsedBy v-if="selected === 'dependencies' || selected === 'all'" />
   <ReportInstallSize v-if="selected === 'install-size' || selected === 'all'" />
+  <ReportVulnerability v-if="selected === 'vulnerabilities' || selected === 'all'" />
   <ReportPublishTime v-if="selected === 'time' || selected === 'all'" />
   <ReportDeprecated v-if="selected === 'deprecated' || selected === 'all'" />
   <ReportEngines v-if="selected === 'node-engines' || selected === 'all'" />

packages/node-modules-inspector/src/app/state/payload.ts

@@ -245,6 +245,11 @@ export function getDeprecatedInfo(input: PackageNode | string) {
   }
 }
 
+export function getVulnerability(input: PackageNode | string) {
+  const meta = getNpmMeta(input)
+  return meta?.vulnerability || null
+}
+
 export const totalWorkspaceSize = computed(() => {
   return Array.from(payloads.available.packages).reduce((acc, pkg) => acc + (pkg.resolved.installSize?.bytes || 0), 0)
 })

packages/node-modules-inspector/src/shared/version-info.ts

@@ -4,6 +4,7 @@ import type { ListPackagesNpmMetaLatestOptions, ListPackagesNpmMetaOptions } fro
 import { getLatestVersion, getLatestVersionBatch } from 'fast-npm-meta'
 import pLimit from 'p-limit'
 import { isNpmMetaLatestValid } from './utils'
+import { addPackagesNpmVulnerabilityMeta } from './vulnerable-info'
 
 const HOUR = 1000 * 60 * 60
 const DAY = HOUR * 24
@@ -83,7 +84,7 @@ export async function getPackagesNpmMeta(
     map.set(spec, meta)
     await storage.setItem(spec, meta)
   })
-
+  await addPackagesNpmVulnerabilityMeta(packages, options)
   if (missing.size) {
     console.warn('Failed to get npm meta for:', [...missing])
   }

packages/node-modules-inspector/src/shared/vulnerable-info.ts

@@ -0,0 +1,176 @@
+import type { AuditLevelString, NpmMeta } from 'node-modules-tools'
+import type { ListPackagesNpmMetaOptions } from './types'
+import pLimit from 'p-limit'
+import { satisfies } from 'semver'
+
+interface AuditReport {
+  id: string
+  url: string
+  title: string
+  severity: AuditLevelString
+  vulnerable_versions: string
+  cwe: string[]
+  cvss: any
+}
+
+interface ResolvedVulnerability {
+  name: string
+  title: string
+  version: string
+  url: string
+  level: AuditLevelString
+}
+
+const AuditLevel: Record<AuditLevelString, number> = {
+  low: 1,
+  moderate: 2,
+  high: 3,
+  critical: 4,
+}
+
+const registry = 'https://registry.npmjs.org'
+
+async function getVulnerabilitiesBatch(dependencies: string[]): Promise<(ResolvedVulnerability | null)[]> {
+  const payload: Record<string, Set<string>> = {}
+  const dependencyInfo = [] as { name: string, version: string }[]
+  for (const dependency of dependencies) {
+    const depVersionIndex = dependency.indexOf('@', 1)
+    const depName = dependency.slice(0, depVersionIndex).replace(/\//g, '__')
+    const depVersion = dependency.slice(depVersionIndex + 1)
+    dependencyInfo.push({ name: depName, version: depVersion })
+    if (payload[depName]) {
+      payload[depName].add(depVersion)
+    }
+    else {
+      payload[depName] = new Set([depVersion])
+    }
+  }
+  const body = {} as Record<string, string[]>
+  for (const depName in payload) {
+    if (!payload[depName]) {
+      continue
+    }
+    body[depName] = Array.from(payload[depName])
+  }
+  const result = await fetch(`${registry}/-/npm/v1/security/advisories/bulk`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    mode: 'no-cors',
+    body: JSON.stringify(body),
+  })
+  if (!result.ok) {
+    throw new Error(`Failed to fetch vulnerabilities: ${result.status} ${result.statusText}`)
+  }
+  const report = (await result.json()) as Record<string, AuditReport[]>
+  return dependencyInfo.map(({ name, version }) => {
+    let highestVulnerability: ResolvedVulnerability | null = null
+    if (!report[name]) {
+      return null
+    }
+    report[name].forEach((vulnerability) => {
+      const isVulnerable = satisfies(version, vulnerability.vulnerable_versions)
+      const level = AuditLevel[vulnerability.severity]
+      if (isVulnerable && (!highestVulnerability || level > AuditLevel[highestVulnerability.level])) {
+        highestVulnerability = {
+          name,
+          version,
+          title: vulnerability.title,
+          url: vulnerability.url,
+          level: vulnerability.severity,
+        }
+      }
+    })
+    return highestVulnerability
+  })
+}
+
+async function fetchBatch(
+  specs: string[],
+  onResult: (result: ResolvedVulnerability) => void,
+) {
+  const promises: Promise<void>[] = []
+  const missingSpecs = new Set<string>()
+  const BATCH_SIZE = 100
+  const limit = pLimit(100)
+
+  for (let i = 0; i < specs.length; i += BATCH_SIZE) {
+    const queue = specs.slice(i, i + BATCH_SIZE)
+    promises.push(limit(async () => {
+      try {
+        const result = await getVulnerabilitiesBatch(queue)
+        Object.entries(result).forEach(([_, r], idx) => {
+          if (r !== null) {
+            onResult(r)
+          }
+          else {
+            missingSpecs.add(queue[idx]!)
+          }
+        })
+      }
+      catch {
+        for (const spec of queue)
+          missingSpecs.add(spec)
+      }
+    }))
+  }
+
+  await Promise.all(promises)
+
+  // If batch failed, try to get publish date one by one
+  if (missingSpecs.size) {
+    await Promise.all(
+      Array.from(missingSpecs).map(spec => limit(async () => {
+        try {
+          const result = await getVulnerabilitiesBatch([spec])
+          if (result[0] !== null && result[0] !== undefined) {
+            onResult(result[0])
+          }
+          if ('publishedAt' in result && result.publishedAt) {
+            missingSpecs.delete(spec)
+          }
+        }
+        catch {
+
+        }
+      })),
+    )
+  }
+
+  return {
+    missing: missingSpecs,
+  }
+}
+
+export async function addPackagesNpmVulnerabilityMeta(
+  packages: string[],
+  options: ListPackagesNpmMetaOptions,
+) {
+  const { storageNpmMeta: storage } = options
+
+  const map = new Map<string, any>()
+  const unknown = packages
+  const {
+    missing,
+  } = await fetchBatch(unknown, async (r) => {
+    const spec = `${r.name}@${r.version}`
+    const oldMeta = await storage.getItem(spec)
+    if (oldMeta) {
+      const meta: NpmMeta = {
+        ...oldMeta,
+        vulnerability: {
+          title: r.title,
+          url: r.url,
+          level: r.level,
+        },
+      }
+      map.set(spec, meta)
+      await storage.setItem(spec, meta)
+    }
+  })
+
+  if (missing.size) {
+    console.warn('Failed to get npm meta for:', [...missing])
+  }
+}