From a5edda967990c9d4ee9879fd0e8698336e38476c Mon Sep 17 00:00:00 2001
From: OM MISHRA <152969928+howwohmm@users.noreply.github.com>
Date: Mon, 23 Mar 2026 17:04:28 +0530
Subject: [PATCH] feat(ui): flag git and https dependencies

Add visual warning icon next to dependencies that use URL-based version
specifiers (git:, https:, github:user/repo, etc.) instead of the npm
registry. These bypass npm registry integrity checks and can be
manipulated.

- Add isUrlDependency() utility in shared/utils/version-source.ts
- Detect all non-registry protocols: git:, git+https:, git+ssh:, http:,
  https:, file:, github:, gist:, bitbucket:, gitlab:, and user/repo
  shorthand
- Show unlink icon with i18n tooltip in all dependency sections
  (dependencies, peer dependencies, optional dependencies)
- Add unit tests with 100% coverage for the detection function

Closes #1084

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/components/Package/Dependencies.vue       | 76 +++++++++++++++----
 i18n/locales/en.json                          |  1 +
 i18n/schema.json                              |  3 +
 shared/utils/version-source.ts                | 21 +++++
 test/unit/shared/utils/version-source.spec.ts | 76 +++++++++++++++++++
 5 files changed, 161 insertions(+), 16 deletions(-)
 create mode 100644 shared/utils/version-source.ts
 create mode 100644 test/unit/shared/utils/version-source.spec.ts

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 7f3836214f..012ab45dfe 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
+import { isUrlDependency } from '#shared/utils/version-source'
 import { getOutdatedTooltip, getVersionClass } from '~/utils/npm/outdated-dependencies'
 
 const { t } = useI18n()
@@ -168,6 +169,19 @@ const numberFormatter = useNumberFormatter()
             >
               <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
             </LinkBase>
+            <TooltipApp
+              v-if="isUrlDependency(version)"
+              class="shrink-0 text-amber-700 dark:text-amber-500"
+              :text="$t('package.dependencies.url_dependency')"
+            >
+              <button
+                type="button"
+                class="inline-flex items-center justify-center p-2 -m-2"
+                :aria-label="$t('package.dependencies.url_dependency')"
+              >
+                <span class="i-lucide:unlink w-3 h-3" aria-hidden="true" />
+              </button>
+            </TooltipApp>
             <LinkBase
               :to="packageRoute(dep, version)"
               class="block truncate"
@@ -234,14 +248,29 @@ const numberFormatter = useNumberFormatter()
               {{ $t('package.dependencies.optional') }}
             </TagStatic>
           </div>
-          <LinkBase
-            :to="packageRoute(peer.name, peer.version)"
-            class="block truncate max-w-[30%]"
-            :title="peer.version"
-            dir="ltr"
-          >
-            {{ peer.version }}
-          </LinkBase>
+          <span class="flex items-center gap-1 max-w-[30%]" dir="ltr">
+            <TooltipApp
+              v-if="isUrlDependency(peer.version)"
+              class="shrink-0 text-amber-700 dark:text-amber-500"
+              :text="$t('package.dependencies.url_dependency')"
+            >
+              <button
+                type="button"
+                class="inline-flex items-center justify-center p-2 -m-2"
+                :aria-label="$t('package.dependencies.url_dependency')"
+              >
+                <span class="i-lucide:unlink w-3 h-3" aria-hidden="true" />
+              </button>
+            </TooltipApp>
+            <LinkBase
+              :to="packageRoute(peer.name, peer.version)"
+              class="block truncate"
+              :title="peer.version"
+              dir="ltr"
+            >
+              {{ peer.version }}
+            </LinkBase>
+          </span>
         </li>
       </ul>
       <button
@@ -291,14 +320,29 @@ const numberFormatter = useNumberFormatter()
           <LinkBase :to="packageRoute(dep)" class="block max-w-[80%] break-words" dir="ltr">
             {{ dep }}
           </LinkBase>
-          <LinkBase
-            :to="packageRoute(dep, version)"
-            class="block truncate"
-            :title="version"
-            dir="ltr"
-          >
-            {{ version }}
-          </LinkBase>
+          <span class="flex items-center gap-1" dir="ltr">
+            <TooltipApp
+              v-if="isUrlDependency(version)"
+              class="shrink-0 text-amber-700 dark:text-amber-500"
+              :text="$t('package.dependencies.url_dependency')"
+            >
+              <button
+                type="button"
+                class="inline-flex items-center justify-center p-2 -m-2"
+                :aria-label="$t('package.dependencies.url_dependency')"
+              >
+                <span class="i-lucide:unlink w-3 h-3" aria-hidden="true" />
+              </button>
+            </TooltipApp>
+            <LinkBase
+              :to="packageRoute(dep, version)"
+              class="block truncate"
+              :title="version"
+              dir="ltr"
+            >
+              {{ version }}
+            </LinkBase>
+          </span>
         </li>
       </ul>
       <button
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index f03ed84bf1..30bc4d84e8 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -454,6 +454,7 @@
       "outdated_minor": "{count} minor version behind (latest: {latest}) | {count} minor versions behind (latest: {latest})",
       "outdated_patch": "Patch update available (latest: {latest})",
       "has_replacement": "This dependency has suggested replacements",
+      "url_dependency": "This dependency uses a URL instead of the npm registry, bypassing integrity checks",
       "vulnerabilities_count": "{count} vulnerability | {count} vulnerabilities"
     },
     "peer_dependencies": {
diff --git a/i18n/schema.json b/i18n/schema.json
index e1ae6a54eb..d0e694eb63 100644
--- a/i18n/schema.json
+++ b/i18n/schema.json
@@ -1366,6 +1366,9 @@
             "has_replacement": {
               "type": "string"
             },
+            "url_dependency": {
+              "type": "string"
+            },
             "vulnerabilities_count": {
               "type": "string"
             }
diff --git a/shared/utils/version-source.ts b/shared/utils/version-source.ts
new file mode 100644
index 0000000000..540cd7c65b
--- /dev/null
+++ b/shared/utils/version-source.ts
@@ -0,0 +1,21 @@
+/**
+ * Detect whether a dependency version specifier points to a URL or Git source
+ * rather than the npm registry.
+ *
+ * These bypass npm registry integrity checks and can be manipulated.
+ * @see https://docs.npmjs.com/cli/v11/configuring-npm/package-json#git-urls-as-dependencies
+ * @see https://docs.npmjs.com/cli/v11/configuring-npm/package-json#urls-as-dependencies
+ */
+export function isUrlDependency(version: string): boolean {
+  // npm: protocol aliases are safe (resolved from the registry)
+  if (version.startsWith('npm:')) return false
+
+  // Protocols: git:, git+https:, git+ssh:, git+http:, https:, http:, file:
+  if (/^[a-z][a-z+]*:/i.test(version)) return true
+
+  // GitHub shorthand: user/repo or user/repo#ref
+  // Also matches github:, gist:, bitbucket:, gitlab: (already caught above by protocol check)
+  if (/^[^@][^/]*\/[^/]+/.test(version)) return true
+
+  return false
+}
diff --git a/test/unit/shared/utils/version-source.spec.ts b/test/unit/shared/utils/version-source.spec.ts
new file mode 100644
index 0000000000..4ef766370a
--- /dev/null
+++ b/test/unit/shared/utils/version-source.spec.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest'
+import { isUrlDependency } from '#shared/utils/version-source'
+
+describe('version-source', () => {
+  describe('isUrlDependency', () => {
+    it('returns false for semver ranges', () => {
+      expect(isUrlDependency('^1.0.0')).toBe(false)
+      expect(isUrlDependency('~2.3.4')).toBe(false)
+      expect(isUrlDependency('>=1.0.0 <2.0.0')).toBe(false)
+      expect(isUrlDependency('*')).toBe(false)
+      expect(isUrlDependency('1.0.0')).toBe(false)
+      expect(isUrlDependency('2.0.0-beta.1')).toBe(false)
+    })
+
+    it('returns false for npm: protocol aliases', () => {
+      expect(isUrlDependency('npm:other-pkg@^1.0.0')).toBe(false)
+      expect(isUrlDependency('npm:@scope/pkg@2.0.0')).toBe(false)
+    })
+
+    it('returns true for git: protocol', () => {
+      expect(isUrlDependency('git://github.com/user/repo.git')).toBe(true)
+    })
+
+    it('returns true for git+https: protocol', () => {
+      expect(isUrlDependency('git+https://github.com/user/repo.git')).toBe(true)
+    })
+
+    it('returns true for git+ssh: protocol', () => {
+      expect(isUrlDependency('git+ssh://git@github.com:user/repo.git')).toBe(true)
+    })
+
+    it('returns true for git+http: protocol', () => {
+      expect(isUrlDependency('git+http://github.com/user/repo.git')).toBe(true)
+    })
+
+    it('returns true for https: URLs', () => {
+      expect(isUrlDependency('https://github.com/user/repo/tarball/main')).toBe(true)
+    })
+
+    it('returns true for http: URLs', () => {
+      expect(isUrlDependency('http://example.com/pkg.tgz')).toBe(true)
+    })
+
+    it('returns true for file: protocol', () => {
+      expect(isUrlDependency('file:../local-pkg')).toBe(true)
+      expect(isUrlDependency('file:./packages/my-lib')).toBe(true)
+    })
+
+    it('returns true for GitHub shorthand (user/repo)', () => {
+      expect(isUrlDependency('user/repo')).toBe(true)
+      expect(isUrlDependency('user/repo#branch')).toBe(true)
+      expect(isUrlDependency('user/repo#semver:^1.0.0')).toBe(true)
+    })
+
+    it('returns true for github: prefix', () => {
+      expect(isUrlDependency('github:user/repo')).toBe(true)
+    })
+
+    it('returns true for gist: prefix', () => {
+      expect(isUrlDependency('gist:11081aaa281')).toBe(true)
+    })
+
+    it('returns true for bitbucket: prefix', () => {
+      expect(isUrlDependency('bitbucket:user/repo')).toBe(true)
+    })
+
+    it('returns true for gitlab: prefix', () => {
+      expect(isUrlDependency('gitlab:user/repo')).toBe(true)
+    })
+
+    it('returns false for scoped packages in semver ranges', () => {
+      // Scoped packages start with @ so they won't match the user/repo pattern
+      expect(isUrlDependency('@scope/pkg')).toBe(false)
+    })
+  })
+})