@tschk/moonshine-router 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tschk/moonshine-router",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Renderer-neutral route graph and matcher with optional React navigation",
   "license": "ISC",
   "type": "module",
@@ -16,8 +16,8 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@tschk/moonshine": "^0.3.2",
-    "@tschk/moonshine-framework": "^0.3.2"
+    "@tschk/moonshine": "^0.3.4",
+    "@tschk/moonshine-framework": "^0.3.4"
   },
   "devDependencies": {
     "@types/bun": "1.3.14",

package/src/graph.ts

@@ -48,6 +48,21 @@ function compareMatches(
   return 0;
 }
 
+/**
+ * First path segment, or null when it is absent or percent-encoded. Callers use
+ * it to skip routes that begin with a different literal segment; decoding is
+ * the identity for segments without `%`, so the comparison is exact.
+ */
+function firstSegment(pathname: string): string | null {
+  let start = 0;
+  while (start < pathname.length && pathname.charCodeAt(start) === 47) start++;
+  if (start >= pathname.length) return null;
+  let end = pathname.indexOf("/", start);
+  if (end === -1) end = pathname.length;
+  const part = pathname.slice(start, end);
+  return part.includes("%") ? null : part;
+}
+
 export type RouteMatch<T = RouteDefinition> = {
   route: T;
   path: string;
@@ -59,27 +74,31 @@ export function matchRoutes<T extends RouteDefinition>(
   graph: RouteGraph<T>,
   pathname: string,
 ): RouteMatch<T> | null {
-  const matches: {
+  const first = firstSegment(pathname);
+  let best: {
     route: T;
     pattern: string;
     params: Record<string, string>;
     score: number[];
-  }[] = [];
+  } | null = null;
 
   for (const { route, compiled } of graph.routes) {
+    if (first !== null) {
+      const head = compiled.segments[0];
+      if (head && head.kind === "static" && head.value !== first) continue;
+    }
     const m = compiled.match(pathname);
     if (!m) continue;
-    matches.push({
+    const candidate = {
       route,
       pattern: compiled.pattern,
       params: m.params,
       score: m.score,
-    });
+    };
+    if (best === null || compareMatches(candidate, best) < 0) best = candidate;
   }
 
-  if (matches.length === 0) return null;
-  matches.sort(compareMatches);
-  const best = matches[0]!;
+  if (best === null) return null;
   return {
     route: best.route,
     path: pathname,

package/src/index.ts

@@ -20,6 +20,7 @@ export {
   useRouter,
   MoonshineRouter,
   Link,
+  safeHref,
 } from "./navigation.js";
 export type {
   MoonshineRouterInstance,

package/src/navigation.ts

@@ -4,6 +4,7 @@ import {
   createElement,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
   useSyncExternalStore,
@@ -162,12 +163,18 @@ export function MoonshineRouter(props: MoonshineRouterProps): ReactNode {
     typeof window === "undefined" || props.path !== undefined,
   );
 
-  const graph = createRouteGraph<InternalRoute>(
-    props.routes.map((route) => ({
-      ...route,
-      id: route.id ?? route.path,
-      file: route.file ?? "",
-    })),
+  // Compiling every pattern is a sizeable share of this component's render, and
+  // the result depends only on the route list.
+  const graph = useMemo(
+    () =>
+      createRouteGraph<InternalRoute>(
+        props.routes.map((route) => ({
+          ...route,
+          id: route.id ?? route.path,
+          file: route.file ?? "",
+        })),
+      ),
+    [props.routes],
   );
 
   useEffect(() => {
@@ -207,6 +214,35 @@ export function MoonshineRouter(props: MoonshineRouterProps): ReactNode {
   );
 }
 
+function stripControls(value: string): string {
+  let out = "";
+  for (const ch of value) {
+    const code = ch.charCodeAt(0);
+    if (code <= 0x1f || code === 0x7f) continue;
+    out += ch;
+  }
+  return out;
+}
+
+const SAFE_SCHEMES = new Set(["http:", "https:", "mailto:", "tel:", "ftp:"]);
+
+/**
+ * A scheme-bearing href reaches the browser on modifier/middle click, where
+ * the click handler deliberately does nothing, so `javascript:` and friends
+ * would execute. Allow relative targets and known-safe schemes only.
+ */
+export function safeHref(href: string): string {
+  // Browsers strip embedded control characters before parsing the scheme, so
+  // strip them here too or "java\tscript:" would slip past the check.
+  const trimmed = stripControls(href).trim();
+  if (trimmed === "") return "#";
+  // Leading "/", "?", "#" are unambiguously relative and cannot carry a scheme.
+  if (/^[/?#]/.test(trimmed)) return trimmed;
+  const scheme = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.exec(trimmed);
+  if (!scheme) return trimmed;
+  return SAFE_SCHEMES.has(scheme[0].toLowerCase()) ? trimmed : "#";
+}
+
 /** Anchor that uses client-side navigation. */
 export function Link(props: {
   href: string;
@@ -215,10 +251,11 @@ export function Link(props: {
   replace?: boolean;
 }): ReactNode {
   const nav = useNavigate();
+  const href = safeHref(props.href);
   return createElement(
     "a",
     {
-      href: props.href,
+      href,
       className: props.className,
       onClick: (event: MouseEvent) => {
         if (
@@ -232,7 +269,7 @@ export function Link(props: {
           return;
         }
         event.preventDefault();
-        nav(props.href, { replace: props.replace });
+        nav(href, { replace: props.replace });
       },
     },
     props.children,

package/test/link.test.tsx

@@ -0,0 +1,38 @@
+import { describe, expect, test } from "bun:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Link, safeHref } from "../src/navigation";
+
+function hrefOf(href: string): string {
+  const html = renderToStaticMarkup(createElement(Link, { href }, "go"));
+  return /href="([^"]*)"/.exec(html)?.[1] ?? "";
+}
+
+describe("safeHref", () => {
+  test("neutralizes script-bearing schemes", () => {
+    expect(safeHref("javascript:alert(1)")).toBe("#");
+    expect(safeHref("JavaScript:alert(1)")).toBe("#");
+    expect(safeHref("  javascript:alert(1)")).toBe("#");
+    expect(safeHref("java\tscript:alert(1)")).toBe("#");
+    expect(safeHref("data:text/html,<script>alert(1)</script>")).toBe("#");
+    expect(safeHref("vbscript:msgbox(1)")).toBe("#");
+    expect(safeHref("")).toBe("#");
+  });
+
+  test("preserves relative and known-safe absolute targets", () => {
+    expect(safeHref("/users/1")).toBe("/users/1");
+    expect(safeHref("users/1")).toBe("users/1");
+    expect(safeHref("?q=1")).toBe("?q=1");
+    expect(safeHref("#anchor")).toBe("#anchor");
+    expect(safeHref("//example.com/x")).toBe("//example.com/x");
+    expect(safeHref("https://example.com/x")).toBe("https://example.com/x");
+    expect(safeHref("mailto:a@b.c")).toBe("mailto:a@b.c");
+  });
+});
+
+describe("Link", () => {
+  test("does not render a script-bearing href", () => {
+    expect(hrefOf("javascript:alert(1)")).toBe("#");
+    expect(hrefOf("/ok")).toBe("/ok");
+  });
+});