⚡ perf(ui): memoize safe URL computation for vulnerability list

Compute toSafeExternalUrl once per vulnerability in a computed property
instead of calling it per v-if/v-bind in the template loop.

Author: s-b-e-n-s-o-n

ui/src/views/SecurityView.vue

@@ -149,6 +149,13 @@ const selectedImageVulns = computed(() => {
   return vulnerabilitiesByImage.value[selectedImage.value.image] || [];
 });
 
+const selectedImageVulnsWithSafeUrl = computed(() =>
+  selectedImageVulns.value.map((vuln) => ({
+    ...vuln,
+    safePrimaryUrl: toSafeExternalUrl(vuln.primaryUrl),
+  })),
+);
+
 function openDetail(summary: ImageSummary) {
   const vulnerabilities = vulnerabilitiesByImage.value[summary.image] || [];
   openSbomDetail({
@@ -627,7 +634,7 @@ onUnmounted(() => {
 
           <!-- Vulnerability list -->
           <div class="divide-y" :style="{ borderColor: 'var(--dd-border)' }">
-            <div v-for="vuln in selectedImageVulns" :key="vuln.id + vuln.package"
+            <div v-for="vuln in selectedImageVulnsWithSafeUrl" :key="vuln.id + vuln.package"
                  class="px-4 py-3 hover:dd-bg-hover transition-colors">
               <div class="flex items-center gap-2 mb-1.5">
                 <AppIcon :name="severityIcon(vuln.severity)" :size="12"
@@ -647,7 +654,7 @@ onUnmounted(() => {
                 <span v-else class="ml-auto text-2xs dd-text-muted">No fix</span>
               </div>
               <div
-                v-if="vuln.title || vuln.target || toSafeExternalUrl(vuln.primaryUrl)"
+                v-if="vuln.title || vuln.target || vuln.safePrimaryUrl"
                 class="ml-5 mt-1.5 space-y-1"
               >
                 <div v-if="vuln.title" class="text-2xs dd-text">
@@ -658,8 +665,8 @@ onUnmounted(() => {
                   <span class="font-mono dd-text">{{ vuln.target }}</span>
                 </div>
                 <a
-                  v-if="toSafeExternalUrl(vuln.primaryUrl)"
-                  :href="toSafeExternalUrl(vuln.primaryUrl) || undefined"
+                  v-if="vuln.safePrimaryUrl"
+                  :href="vuln.safePrimaryUrl"
                   target="_blank"
                   rel="noopener noreferrer"
                   class="inline-flex text-2xs underline hover:no-underline break-all"

ui/tests/views/SecurityView.spec.ts

@@ -7,8 +7,9 @@ const mockGetContainerSbom = vi.fn();
 const mockGetSecurityRuntime = vi.fn();
 const mockIsMobile = { value: false };
 const mockWindowNarrow = { value: false };
-const { mockComputeSecurityDelta } = vi.hoisted(() => ({
+const { mockComputeSecurityDelta, mockToSafeExternalUrl } = vi.hoisted(() => ({
   mockComputeSecurityDelta: vi.fn(),
+  mockToSafeExternalUrl: vi.fn(),
 }));
 
 vi.mock('@/services/container', () => ({
@@ -37,6 +38,19 @@ vi.mock('@/utils/container-mapper', async () => {
   };
 });
 
+vi.mock('@/views/security/securityViewUtils', async () => {
+  const actual = await vi.importActual<typeof import('@/views/security/securityViewUtils')>(
+    '@/views/security/securityViewUtils',
+  );
+  return {
+    ...actual,
+    toSafeExternalUrl: (...args: Parameters<typeof actual.toSafeExternalUrl>) => {
+      mockToSafeExternalUrl(...args);
+      return actual.toSafeExternalUrl(...args);
+    },
+  };
+});
+
 import { mount } from '@vue/test-utils';
 import { clearIconCache, updateSettings } from '@/services/settings';
 import SecurityView from '@/views/SecurityView.vue';
@@ -465,6 +479,44 @@ describe('SecurityView', () => {
       expect(w.find('a[href="https://avd.aquasec.com/nvd/cve-2026-9999"]').exists()).toBe(true);
     });
 
+    it('computes safe vulnerability URLs once per vulnerability instead of per binding', async () => {
+      mockContainers([
+        makeContainer({
+          id: 'container-1',
+          displayName: 'nginx',
+          security: {
+            scan: {
+              vulnerabilities: [
+                {
+                  id: 'CVE-2026-9999',
+                  severity: 'CRITICAL',
+                  packageName: 'openssl',
+                  installedVersion: '3.0.0',
+                  fixedVersion: '3.0.10',
+                  title: 'OpenSSL buffer overflow',
+                  target: 'usr/lib/libcrypto.so',
+                  primaryUrl: 'https://avd.aquasec.com/nvd/cve-2026-9999',
+                },
+              ],
+            },
+          },
+        }),
+      ]);
+
+      const w = factory();
+      await vi.waitFor(() => expect(mockGetSecurityVulnerabilityOverview).toHaveBeenCalledOnce());
+      await flushPromises();
+
+      const vm = w.vm as any;
+      vm.openDetail(vm.filteredSummaries[0]);
+      await flushPromises();
+
+      expect(mockToSafeExternalUrl).toHaveBeenCalledTimes(1);
+      expect(mockToSafeExternalUrl).toHaveBeenCalledWith(
+        'https://avd.aquasec.com/nvd/cve-2026-9999',
+      );
+    });
+
     it('does not render vulnerability links for disallowed URL protocols', async () => {
       mockContainers([
         makeContainer({