fix(nuxt): reject script-capable protocols in <NuxtLink> href

danielroe · danielroe · commit 0103ce06fbbb · 2026-06-02T14:07:03.000+01:00
Refs: GHSA-934w-87qh-qr26
diff --git a/packages/nuxt/src/app/components/nuxt-link.ts b/packages/nuxt/src/app/components/nuxt-link.ts
@@ -13,7 +13,7 @@ import type {
 } from 'vue'
 import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, resolveComponent, shallowRef, unref } from 'vue'
 import type { RouteLocation, RouteLocationRaw, Router, RouterLink, RouterLinkProps, UseLinkReturn, useLink } from 'vue-router'
-import { hasProtocol, joinURL, parseQuery, withTrailingSlash, withoutTrailingSlash } from 'ufo'
+import { hasProtocol, isScriptProtocol, joinURL, parseQuery, withTrailingSlash, withoutTrailingSlash } from 'ufo'
 import { preloadRouteComponents } from '../composables/preload'
 import { onNuxtReady } from '../composables/ready'
 import { encodeRoutePath, navigateTo, resolveRouteObject, useRouter } from '../composables/router'
@@ -28,6 +28,28 @@ import { hashMode } from '#build/router.options.mjs'
 
 const firstNonUndefined = <T> (...args: (T | undefined)[]) => args.find(arg => arg !== undefined)
 
+/**
+ * Reject URL strings that would resolve to a script-capable protocol when used as the
+ * `href` of an anchor element. Returns the value unchanged when safe, or `null`.
+ *
+ * The denylist is delegated to `ufo`'s `isScriptProtocol` so it stays in sync with the
+ * check used by `navigateTo` (currently `javascript:`, `data:`, `vbscript:`, `blob:`).
+ * ASCII whitespace and control characters are stripped first because browser URL
+ * parsers tolerate them before the scheme, and `view-source:` is peeled recursively
+ * because Chromium resolves it transparently to the inner URL.
+ */
+function sanitizeExternalHref (value: string): string | null {
+  let candidate = value.replace(/[\u0000-\u001f\s]+/g, '')
+  while (candidate.toLowerCase().startsWith('view-source:')) {
+    candidate = candidate.slice('view-source:'.length)
+  }
+  const colon = candidate.indexOf(':')
+  if (colon > 0 && isScriptProtocol(candidate.slice(0, colon + 1))) {
+    return null
+  }
+  return value
+}
+
 const NuxtLinkDevKeySymbol: InjectionKey<boolean> = Symbol('nuxt-link-dev-key')
 
 /**
@@ -116,7 +138,7 @@ export interface NuxtLinkOptions extends
 
 type NuxtLinkDefaultSlotProps<CustomProp extends boolean = false> = CustomProp extends true
   ? {
-      href: string
+      href: string | null
       navigate: (e?: MouseEvent) => Promise<void>
       prefetch: (nuxtApp?: NuxtApp) => Promise<void>
       route: (RouteLocation & { href: string }) | undefined
@@ -215,14 +237,16 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
     const href = computed(() => {
       const effectiveTrailingSlash = unref(props.trailingSlash) ?? options.trailingSlash
       if (!to.value || isAbsoluteUrl.value || isHashLinkWithoutHashMode(to.value)) {
-        return to.value as string
+        const raw = to.value as string
+        return typeof raw === 'string' ? sanitizeExternalHref(raw) : raw
       }
 
       if (isExternal.value) {
         const path = typeof to.value === 'object' && 'path' in to.value ? resolveRouteObject(to.value) : to.value
         // separately resolve route objects with a 'name' property and without 'path'
         const href = typeof path === 'object' ? router.resolve(path).href : path
-        return applyTrailingSlashBehavior(href, effectiveTrailingSlash)
+        const safe = typeof href === 'string' ? sanitizeExternalHref(href) : href
+        return safe === null ? null : applyTrailingSlashBehavior(safe, effectiveTrailingSlash)
       }
 
       if (typeof to.value === 'object') {
@@ -243,10 +267,17 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
       isExactActive: link?.isExactActive ?? computed(() => to.value === router.currentRoute.value.path),
       route: link?.route ?? computed(() => router.resolve(to.value)),
       async navigate (_e?: MouseEvent) {
+        if (href.value === null) {
+          if (import.meta.dev) {
+            console.warn(`[${componentName}] refused to navigate to a URL with a script-capable protocol.`)
+          }
+          return
+        }
         await navigateTo(href.value, { replace: unref(props.replace), external: isExternal.value || hasTarget.value })
       },
-    } satisfies ReturnType<typeof useLink> & {
+    } satisfies Omit<ReturnType<typeof useLink>, 'href'> & {
       to: ComputedRef<RouteLocationRaw>
+      href: ComputedRef<string | null>
       hasTarget: ComputedRef<boolean | null | undefined>
       isAbsoluteUrl: ComputedRef<boolean>
       isExternal: ComputedRef<boolean>
@@ -372,6 +403,8 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
 
         if (prefetched.value) { return }
 
+        if (href.value === null) { return }
+
         prefetched.value = true
 
         const path = typeof to.value === 'string'
@@ -520,7 +553,7 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
             event.preventDefault()
 
             try {
-              const encodedHref = encodeRoutePath(href.value)
+              const encodedHref = encodeRoutePath(href.value ?? '')
               return await (props.replace ? router.replace(encodedHref) : router.push(encodedHref))
             } finally {
               // Focus the target element for hash links to restore accessibility behavior
diff --git a/packages/nuxt/test/nuxt-link.test.ts b/packages/nuxt/test/nuxt-link.test.ts
@@ -150,6 +150,67 @@ describe('nuxt-link:propsOrAttributes', () => {
         expect(nuxtLink({ to: { path: '/to' }, external: true }, { trailingSlash: 'append' }).props.href).toBe('/to/')
         expect(nuxtLink({ to: '/to', external: true }, { trailingSlash: 'append' }).props.href).toBe('/to/')
       })
+
+      it('strips script-capable protocols from auto-detected external links', () => {
+        const cases = [
+          'javascript:alert(1)',
+          ' javascript:alert(1)',
+          'JAVASCRIPT:alert(1)',
+          'java\tscript:alert(1)',
+          'data:text/html,<script>alert(1)</script>',
+          'vbscript:msgbox(1)',
+          'view-source:javascript:alert(1)',
+          'view-source:view-source:javascript:alert(1)',
+          'blob:https://example.test/abc',
+        ]
+        for (const to of cases) {
+          expect(nuxtLink({ to }).props.href, to).toBe(null)
+        }
+      })
+
+      it('strips script-capable protocols when the caller forces `external: true`', () => {
+        const cases = [
+          'javascript:alert(1)',
+          '\u0001javascript:alert(1)',
+          '\tjavascript:alert(1)',
+          'data:text/html,<script>alert(1)</script>',
+          'view-source:javascript:alert(1)',
+        ]
+        for (const to of cases) {
+          expect(nuxtLink({ to, external: true }).props.href, to).toBe(null)
+        }
+      })
+
+      it('preserves safe external href values', () => {
+        const safe = [
+          'https://nuxtjs.org',
+          'http://nuxtjs.org',
+          '//nuxtjs.org',
+          'mailto:hello@nuxtjs.org',
+          'tel:0123456789',
+          'ftp://example.test/file',
+        ]
+        for (const to of safe) {
+          expect(nuxtLink({ to }).props.href, to).toBe(to)
+        }
+      })
+
+      it('strips script-capable protocols passed through the `custom` slot', () => {
+        let received: { href: string | null } | undefined
+        const component = defineNuxtLink({ componentName: 'NuxtLink' })
+        ;(component as any).setup(
+          { to: 'javascript:alert(1)', custom: true },
+          {
+            slots: {
+              default: (slotProps: { href: string | null }) => {
+                received = slotProps
+                return null
+              },
+            },
+          },
+        )()
+        expect(received?.href).toBe(null)
+      })
     })
 
     describe('target', () => {
@@ -463,6 +524,14 @@ describe('nuxt-link:useLink', () => {
     expect(navigateToMock).toHaveBeenCalledWith('/about', { replace: true, external: false })
   })
 
+  it('navigate() skips links with a script-capable protocol', async () => {
+    navigateToMock.mockClear()
+    const component = defineNuxtLink({ componentName: 'NuxtLink' })
+    const link = component.useLink({ to: 'javascript:alert(1)' })
+    await link.navigate()
+    expect(navigateToMock).not.toHaveBeenCalled()
+  })
+
   it('applies trailingSlash with Ref `to`', () => {
     const component = defineNuxtLink({ componentName: 'NuxtLink', trailingSlash: 'append' })
     const to = ref('/about')
