@heyramzi/ui 3.9.0 → 3.9.1

package/dist/lib/safe-href.js

@@ -0,0 +1,13 @@
+// WHY: Svelte writes an href into the page as given, and following an <a href="javascript:...">
+// (or setting location to one) runs that script in the page's origin, with the viewer's session.
+const SCRIPT_SCHEME = /^(?:javascript|vbscript):/i;
+/**
+* The href as given, or undefined when following it would run script. App routes, https,
+* mailto and app schemes like descript: pass, so a link a component builds from data stays a link.
+*/
+export function safeHref(href) {
+	if (!href) return undefined;
+	// WHY: the URL parser drops tabs, newlines and leading spaces or control bytes, so " java\tscript:" is javascript:.
+	const probe = [...href].filter((c) => c.charCodeAt(0) > 32 && c.charCodeAt(0) !== 127).join("");
+	return SCRIPT_SCHEME.test(probe) ? undefined : href;
+}

package/dist/record/fields.js

@@ -4,6 +4,20 @@ import { formatDay, formatMoney } from "./format.js";
 function hasOptions(field) {
 	return field.type === "choice" || field.type === "multi";
 }
+const WEB_PROTOCOLS = new Set([
+	"http:",
+	"https:",
+	"mailto:"
+]);
+/** A url field's link: http, https or mailto only. Anything else, javascript: above all, shows as text. */
+function webLink(text) {
+	try {
+		const url = new URL(text);
+		return WEB_PROTOCOLS.has(url.protocol) ? url.href : undefined;
+	} catch {
+		return undefined;
+	}
+}
 function isEmpty(value) {
 	return value == null || value === "" || Array.isArray(value) && value.length === 0;
 }
@@ -107,7 +121,7 @@ export function fieldRow(field, value, ctx = {}) {
 				break;
 			case "url":
 				row.value = String(value).replace(/^https?:\/\/(www\.)?/, "").replace(/\/$/, "");
-				row.href = String(value);
+				row.href = webLink(String(value));
 				break;
 			case "email":
 				row.value = String(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/charts/dashboard/data-table.svelte

@@ -42,6 +42,7 @@
 	 * optional pager. A row opens by `rowHref` or `onRowClick`, stretched over the row from the lead.
 	 */
 	import { cn } from "../../lib/utils.js";
+	import { safeHref } from "../../lib/safe-href.js";
 	import RatingChip from "./rating-chip.svelte";
 	import Hint from "./hint.svelte";
 	import {
@@ -216,7 +217,7 @@
 					<tr class={cn(dataTrClass, "group", opens && "relative cursor-pointer")}>
 						<td class={cn(dataTdClass, "py-3")}>
 							{#if rowHref}
-								<a href={rowHref(row)} class={stretch}>{@render lead(row)}</a>
+								<a href={safeHref(rowHref(row))} class={stretch}>{@render lead(row)}</a>
 							{:else if onRowClick}
 								<button type="button" class={stretch} onclick={() => onRowClick(row)}>
 									{@render lead(row)}

package/src/components/data-table/row-context-menu.svelte

@@ -6,6 +6,7 @@
 	import { HoldToConfirm } from "../hold-to-confirm/index.js";
 	import { ArrowUpRight, Copy, LinkSimple, Trash } from "phosphor-svelte";
 	import { copyText } from "../copy/clipboard.js";
+	import { safeHref } from "../../lib/safe-href.js";
 	import type { Snippet } from "svelte";
 	import { MENU_KEYS, openMenuFromKey } from "./menu-key.js";
 
@@ -42,7 +43,8 @@
 	// FUNCTIONS
 	// =========================
 	function handleOpen() {
-		if (href) window.location.href = href;
+		const target = safeHref(href);
+		if (target) window.location.href = target;
 	}
 
 	// WHY the whole URL and not the path: what leaves this menu is pasted into a
@@ -68,7 +70,7 @@
 		{/snippet}
 	</ContextMenu.Trigger>
 	<ContextMenu.Content class="w-48">
-		{#if href}
+		{#if safeHref(href)}
 			<ContextMenu.Item onclick={handleOpen}>
 				<ArrowUpRight aria-hidden="true" size={14} />
 				Open

package/src/components/open-in/open-in.svelte

@@ -25,6 +25,7 @@
 	// =========================
 	import { ArrowSquareOut } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
+	import { safeHref } from "../../lib/safe-href.js";
 	import { buttonVariants } from "../../shadcn/button/index.js";
 
 	// =========================
@@ -78,7 +79,7 @@
 	onkeydown={(e) => e.stopPropagation()}
 >
 	<a
-		{href}
+		href={safeHref(href)}
 		target="_blank"
 		rel="noopener noreferrer"
 		aria-label={action}

package/src/inbox/thread-inbox.svelte

@@ -38,6 +38,7 @@
 	} from "../thread/index.js";
 	import InboxCard from "../work/inbox/inbox-card.svelte";
 	import { whenOf } from "../work/inbox/inbox-logic.js";
+	import { safeHref } from "../lib/safe-href.js";
 	import type { InboxItem, InboxVerdict } from "../work/inbox/inbox-types.js";
 	import {
 		NO_FILTER,
@@ -490,8 +491,8 @@
 								<Check aria-hidden="true" />{labels.clear}
 							</Button>
 						{/if}
-						{#if current.subject.href}
-							<Button size="sm" variant="ghost" href={current.subject.href}>
+						{#if safeHref(current.subject.href)}
+							<Button size="sm" variant="ghost" href={safeHref(current.subject.href)}>
 								<ArrowSquareOut aria-hidden="true" />{labels.open}
 							</Button>
 						{/if}

package/src/lib/safe-href.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vite-plus/test";
+import { safeHref } from "./safe-href.js";
+
+describe("safeHref", () => {
+  it.each([
+    "/clients/42",
+    "#notes",
+    "https://example.com/a?b=1",
+    "mailto:hi@example.com",
+    "tel:+33123456789",
+    "descript://project/abc",
+  ])("keeps %s, which runs no script", (href) => {
+    expect(safeHref(href)).toBe(href);
+  });
+
+  // The record url finding's payload, and the spellings the URL parser reads as the same scheme.
+  it.each([
+    "javascript:alert(document.domain)",
+    "JavaScript:alert(1)",
+    " javascript:alert(1)",
+    "java\tscript:alert(1)",
+    "java\nscript:alert(1)",
+    "\u0001javascript:alert(1)",
+    "vbscript:msgbox(1)",
+  ])("drops %j, which runs script when followed", (href) => {
+    expect(safeHref(href)).toBeUndefined();
+  });
+
+  it("treats a missing href as no link", () => {
+    expect(safeHref(null)).toBeUndefined();
+    expect(safeHref(undefined)).toBeUndefined();
+    expect(safeHref("")).toBeUndefined();
+  });
+});

package/src/lib/safe-href.ts

@@ -0,0 +1,14 @@
+// WHY: Svelte writes an href into the page as given, and following an <a href="javascript:...">
+// (or setting location to one) runs that script in the page's origin, with the viewer's session.
+const SCRIPT_SCHEME = /^(?:javascript|vbscript):/i;
+
+/**
+ * The href as given, or undefined when following it would run script. App routes, https,
+ * mailto and app schemes like descript: pass, so a link a component builds from data stays a link.
+ */
+export function safeHref(href: string | null | undefined): string | undefined {
+  if (!href) return undefined;
+  // WHY: the URL parser drops tabs, newlines and leading spaces or control bytes, so " java\tscript:" is javascript:.
+  const probe = [...href].filter((c) => c.charCodeAt(0) > 32 && c.charCodeAt(0) !== 127).join("");
+  return SCRIPT_SCHEME.test(probe) ? undefined : href;
+}

package/src/record/fields.ts

@@ -15,6 +15,18 @@ function hasOptions(field: FieldDef): field is Extract<FieldDef, { type: "choice
 
 export type FieldValues = Record<string, FieldValue | undefined>;
 
+const WEB_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+
+/** A url field's link: http, https or mailto only. Anything else, javascript: above all, shows as text. */
+function webLink(text: string): string | undefined {
+  try {
+    const url = new URL(text);
+    return WEB_PROTOCOLS.has(url.protocol) ? url.href : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 function isEmpty(value: FieldValue | undefined): boolean {
   return value == null || value === "" || (Array.isArray(value) && value.length === 0);
 }
@@ -144,7 +156,7 @@ export function fieldRow(
         row.value = String(value)
           .replace(/^https?:\/\/(www\.)?/, "")
           .replace(/\/$/, "");
-        row.href = String(value);
+        row.href = webLink(String(value));
         break;
       case "email":
         row.value = String(value);

package/src/record/info-list.svelte

@@ -14,6 +14,7 @@
 	import { TagsInput } from "../components/tags-input/index.js";
 	import StatusBadge from "../status/status-badge.svelte";
 	import { resolveLabels, type InfoRow, type RecordLabels } from "./types.js";
+	import { safeHref } from "../lib/safe-href.js";
 
 	// =========================
 	// PROPS
@@ -171,9 +172,9 @@
 		<StatusBadge tone={row.tone} capitalize={false} class="w-fit max-w-full"
 			>{row.value}</StatusBadge
 		>
-	{:else if row.href && row.value}
+	{:else if safeHref(row.href) && row.value}
 		<a
-			href={row.href}
+			href={safeHref(row.href)}
 			title={row.value}
 			class={cn(
 				"min-w-0 truncate text-sm font-medium underline-offset-2 hover:underline",

package/src/record/info-list.test.ts

@@ -0,0 +1,26 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import InfoList from "./info-list.svelte";
+
+describe("InfoList", () => {
+  // A host can fill InfoRow.href itself, so the list checks the scheme at the anchor too.
+  it("draws a javascript: href as plain text and keeps an https one a link", () => {
+    const target = document.createElement("div");
+    document.body.appendChild(target);
+    const app = mount(InfoList, {
+      target,
+      props: {
+        rows: [
+          { label: "Website", value: "click me", href: "javascript:alert(document.domain)" },
+          { label: "Docs", value: "example.com", href: "https://example.com/" },
+        ],
+      },
+    });
+    flushSync();
+    const hrefs = [...target.querySelectorAll("a")].map((a) => a.getAttribute("href"));
+    expect(hrefs).toEqual(["https://example.com/"]);
+    expect(target.textContent).toContain("click me");
+    void unmount(app);
+    target.remove();
+  });
+});

package/src/record/next-up.svelte

@@ -10,6 +10,7 @@
 	import { formatRange } from "./format.js";
 	import { todayIso } from "../work/dates.js";
 	import { resolveLabels, type RecordLabels, type RecordNext } from "./types.js";
+	import { safeHref } from "../lib/safe-href.js";
 
 	// =========================
 	// PROPS
@@ -61,8 +62,8 @@
 				>{when}</span
 			>
 		{/if}
-		{#if next.href}
-			<a href={next.href} class="min-w-0 truncate underline-offset-2 hover:underline"
+		{#if safeHref(next.href)}
+			<a href={safeHref(next.href)} class="min-w-0 truncate underline-offset-2 hover:underline"
 				>{next.label}</a
 			>
 		{:else}

package/src/record/project-list.svelte

@@ -3,6 +3,7 @@
 	// IMPORTS
 	// =========================
 	import { cn } from "../lib/utils.js";
+	import { safeHref } from "../lib/safe-href.js";
 	import { Progress } from "../shadcn/progress/index.js";
 	import { TONE_TEXT } from "../lib/tone.js";
 	import StatusBadge from "../status/status-badge.svelte";
@@ -115,10 +116,11 @@
 	<ul class={cn("flex flex-col gap-1", className)}>
 		{#each projects as project (project.id)}
 			{@const active = project.id === activeId}
+			{@const href = safeHref(project.href)}
 			<li>
-				{#if project.href}
+				{#if href}
 					<a
-						href={project.href}
+						{href}
 						aria-current={active ? "page" : undefined}
 						class={cn(
 							"flex flex-col gap-1.5 rounded-lg px-2 py-2 transition-colors any-pointer-coarse:py-3",

package/src/record/record-header.svelte

@@ -8,6 +8,7 @@
 	import type { Tone } from "../lib/tone.js";
 	import StatusBadge from "../status/status-badge.svelte";
 	import { gutterClass } from "./gutter.js";
+	import { safeHref } from "../lib/safe-href.js";
 
 	// =========================
 	// PROPS
@@ -45,7 +46,7 @@
 <header class={cn("flex flex-col gap-2 border-b border-border py-3", gutterClass, className)}>
 	{#if parent}
 		<a
-			href={parent.href}
+			href={safeHref(parent.href)}
 			class="-ml-1 inline-flex min-h-6 w-fit max-w-full items-center gap-0.5 rounded-sm text-sm text-muted-foreground transition-colors hover:text-foreground any-pointer-coarse:min-h-11"
 		>
 			<CaretLeft class="size-3.5 shrink-0" aria-hidden="true" />

package/src/record/record-timeline.svelte

@@ -14,6 +14,7 @@
 	import { DEFAULT_RECORD_FILTERS, DEFAULT_RECORD_KINDS } from "./kinds.js";
 	import { formatDayHeader, formatMoney, formatTime } from "./format.js";
 	import { measureClamp } from "./measure-clamp.js";
+	import { safeHref } from "../lib/safe-href.js";
 	import {
 		dayRelation,
 		eventsForFilter,
@@ -172,9 +173,9 @@
 										{@render custom(event)}
 									{:else}
 										<p class="text-sm leading-snug font-medium wrap-anywhere">
-											{#if event.href}
+											{#if safeHref(event.href)}
 												<a
-													href={event.href}
+													href={safeHref(event.href)}
 													class="-my-1 inline-block py-1 underline-offset-2 hover:underline"
 													>{event.title}</a
 												>
@@ -235,7 +236,7 @@
 										{#if showProject && event.projectName}
 											<Badge
 												variant="outline"
-												href={event.projectHref ?? undefined}
+												href={safeHref(event.projectHref)}
 												class="max-w-48 truncate"
 											>
 												{event.projectName}

package/src/record/record.test.ts

@@ -423,6 +423,25 @@ describe("fields", () => {
     expect(saved).toEqual([["budget", 9000]]);
   });
 
+  // The audit's finding: a url field rendered whatever scheme an editor saved as a live link.
+  it("links a url field only to http, https or mailto, and shows anything else as text", () => {
+    const site: FieldDef = { key: "site", label: "Website", type: "url" };
+    expect(fieldRow(site, "https://www.example.com/").href).toBe("https://www.example.com/");
+    expect(fieldRow(site, "http://example.com").href).toBe("http://example.com/");
+    expect(fieldRow(site, "mailto:hi@example.com").href).toBe("mailto:hi@example.com");
+    for (const hostile of [
+      "javascript:alert(document.domain)",
+      " javascript:alert(1)",
+      "java\tscript:alert(1)",
+      "data:text/html,<script>alert(1)</script>",
+      "vbscript:msgbox(1)",
+    ]) {
+      const row = fieldRow(site, hostile);
+      expect(row.href).toBeUndefined();
+      expect(row.value).toBe(hostile);
+    }
+  });
+
   it("leaves a row read-only when no onSave is given, and empty values undrawn", () => {
     const row = fieldRow(size, null);
     expect(row.onSave).toBeUndefined();

package/src/record/where-we-are.svelte

@@ -11,6 +11,7 @@
 	import { formatAge } from "./format.js";
 	import { measureClamp } from "./measure-clamp.js";
 	import { resolveLabels, type RecordLabels } from "./types.js";
+	import { safeHref } from "../lib/safe-href.js";
 
 	// =========================
 	// PROPS
@@ -74,9 +75,9 @@
 			>
 				<span class="font-medium text-foreground">{t.whereWeAre}</span>
 				{#if project}
-					{#if project.href}
+					{#if safeHref(project.href)}
 						<a
-							href={project.href}
+							href={safeHref(project.href)}
 							class="font-medium text-foreground underline-offset-2 hover:underline"
 							>{project.name}</a
 						>

package/src/thread/thread-events.svelte

@@ -2,6 +2,7 @@
 	import * as TraceUI from "../shadcn/trace/index.js";
 	import { TagChip } from "../components/chip/index.js";
 	import type { ThreadEvent } from "./types.js";
+	import { safeHref } from "../lib/safe-href.js";
 
 	interface Props {
 		events: ThreadEvent[];
@@ -34,8 +35,9 @@
 				{#if event.record}
 					{@const record = event.record}
 					{@const [before, after] = split(event)}
-					{before}{#if record.href}<a
-							href={record.href}
+					{@const recordHref = safeHref(record.href)}
+					{before}{#if recordHref}<a
+							href={recordHref}
 							class="rounded-sm align-middle outline-none focus-visible:shadow-[var(--ring-focus)]"
 							><TagChip>
 								{#snippet icon()}{#if record.icon}{@const RecordIcon = record.icon}<RecordIcon

package/src/triage/triage-task.svelte

@@ -2,6 +2,7 @@
 	import { Button } from "../shadcn/button/index.js";
 	import StatusBadge from "../status/status-badge.svelte";
 	import { cn } from "../lib/utils.js";
+	import { safeHref } from "../lib/safe-href.js";
 	import {
 		DEFAULT_TRIAGE_TASK_LABELS,
 		type TriageOutcome,
@@ -72,7 +73,7 @@
 			<StatusBadge tone={outcome.tone} capitalize={false}>{outcome.label}</StatusBadge>
 			{#if task}
 				<a
-					href={task.url}
+					href={safeHref(task.url)}
 					target="_blank"
 					rel="noreferrer"
 					class="text-primary min-w-0 text-xs [overflow-wrap:anywhere] hover:underline"

package/src/work/inbox/inbox-card.svelte

@@ -32,6 +32,7 @@
 	import { FolderSimple } from "phosphor-svelte";
 	import { Copied } from "../../components/copy/copied.svelte.js";
 	import type { InboxDraftEdits, InboxItem, InboxVerdict } from "./inbox-types.js";
+	import { safeHref } from "../../lib/safe-href.js";
 
 	interface Props {
 		item: InboxItem;
@@ -261,9 +262,9 @@
 					{/if}
 					<span class={FACT}>
 						<!-- The linked record is a chip inside the line, a link when the project has a page. -->
-						{#if item.project.href}
+						{#if safeHref(item.project.href)}
 							<a
-								href={item.project.href}
+								href={safeHref(item.project.href)}
 								class={workLooks.chipLink}
 								aria-label="Project: {item.project.name}"
 							>

package/src/work/inbox/inbox-trace.svelte

@@ -2,6 +2,7 @@
 	import { Brain } from "phosphor-svelte";
 	import * as Trace from "../../shadcn/trace/index.js";
 	import type { InboxTrace } from "./inbox-types.js";
+	import { safeHref } from "../../lib/safe-href.js";
 
 	interface Props {
 		trace: InboxTrace;
@@ -30,12 +31,13 @@
 	</Trace.CollapsibleTrigger>
 	<Trace.CollapsibleContent class="mt-3 mb-0 ml-0 border-l-2 pr-0 pl-3">
 		<div class="flex flex-col gap-3">
-			{#if label || trace.source.href}
+			{#if label || safeHref(trace.source.href)}
 				<p class="text-foreground">
 					{label}
-					{#if trace.source.href}
-						<a href={trace.source.href} class="text-foreground underline underline-offset-2"
-							>Open source</a
+					{#if safeHref(trace.source.href)}
+						<a
+							href={safeHref(trace.source.href)}
+							class="text-foreground underline underline-offset-2">Open source</a
 						>
 					{/if}
 				</p>