fix(security): escape badge source/designer to close stored XSS

classifySource/classifyDesigner built <a> markup by raw-interpolating
user-controlled badge fields and rendered it via {@html}, enabling
stored XSS on public badge walls (any visitor who opened a crafted
badge). Extract them into badgeLinks.ts returning {href,label} with
http(s)-only href validation, render via escaped Svelte bindings, and
add regression tests.

3 files changed, 141 insertions, 60 deletions

diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte
index d630de3e..c381fd53 100644
--- a/src/lib/User/BadgeWall/BadgePreview.svelte
+++ b/src/lib/User/BadgeWall/BadgePreview.svelte
@@ -7,6 +7,7 @@ import { cdn, thumbnail } from "$lib/Utility/image";
 import root from "$lib/Utility/root";
 import { databaseTimeToDate } from "$lib/Utility/time";
 import locale from "$stores/locale";
+import { classifyDesigner, classifySource } from "./badgeLinks";
 
 export let selectedBadge: Badge | undefined;
 export let onNext: () => void = () => undefined;
@@ -52,48 +53,6 @@ onMount(() => {
 	};
 });
 
-const classifySource = (source: string) => {
-	let name = source;
-	const sourceLower = source.toLowerCase();
-
-	if (sourceLower.includes("pixiv.net")) {
-		name = "Pixiv";
-	} else if (
-		sourceLower.includes("twitter.com") ||
-		sourceLower.includes("x.com")
-	) {
-		name = "X (Twitter)";
-	} else if (sourceLower.includes("zerochan.net")) {
-		name = "Zerochan";
-	} else if (sourceLower.includes("imgur.com")) {
-		name = "Imgur";
-	} else if (sourceLower.includes("lofter.com")) {
-		name = "Lofter";
-	}
-
-	return `<a href="${source}" target="_blank">${name}</a>`;
-};
-
-const classifyDesigner = (designer: string) => {
-	let name = designer;
-	let userLink = designer;
-	const designerLower = designer.toLowerCase();
-	const anilistUser = designer.match(
-		/https?:\/\/anilist\.co\/user\/([^/]+)\/?/,
-	);
-
-	if (anilistUser) {
-		name = anilistUser[1];
-	} else if (designerLower.startsWith("@")) {
-		name = designer.replace("@", "");
-		userLink = `https://anilist.co/user/${name}/`;
-	} else if (!designerLower.startsWith("http")) {
-		userLink = `https://anilist.co/user/${name}/`;
-	}
-
-	return `<a href="${userLink}" target="_blank">@${name}</a>`;
-};
-
 const onClick = (event: MouseEvent) => {
 	event.preventDefault();
 
@@ -148,18 +107,14 @@ const onClick = (event: MouseEvent) => {
       {#if selectedBadge.designer}
         <b>{$locale().badgePreview?.designer}</b>
 
-        <!-- {#if selectedBadge.designer.startsWith('http')}
-				<a href={selectedBadge.designer} target="_blank">
-					{selectedBadge.designer}
-				</a>
-			{:else if selectedBadge.designer.startsWith('@')}
-				<a href="https://anilist.co/user/{selectedBadge.designer.replace('@', '')}" target="_blank">
-					{selectedBadge.designer}
-				</a>
-			{:else}
-				{selectedBadge.designer}
-			{/if} -->
-        {@html classifyDesigner(selectedBadge.designer)}
+        {@const designerLink = classifyDesigner(selectedBadge.designer)}
+        {#if designerLink.href}
+          <a href={designerLink.href} target="_blank" rel="noopener noreferrer">
+            @{designerLink.label}
+          </a>
+        {:else}
+          @{designerLink.label}
+        {/if}
 
         <br />
       {/if}
@@ -181,13 +136,13 @@ const onClick = (event: MouseEvent) => {
       {#if selectedBadge.source}
         <b>{$locale().badgePreview?.source}</b>
 
-        {#if selectedBadge.source.startsWith('http')}
-          <!-- <a href={selectedBadge.source} target="_blank">
-					{selectedBadge.source}
-				</a> -->
-          {@html classifySource(selectedBadge.source)}
+        {@const sourceLink = classifySource(selectedBadge.source)}
+        {#if sourceLink.href}
+          <a href={sourceLink.href} target="_blank" rel="noopener noreferrer">
+            {sourceLink.label}
+          </a>
         {:else}
-          {selectedBadge.source}
+          {sourceLink.label}
         {/if}
 
         <br />
diff --git a/src/lib/User/BadgeWall/badgeLinks.test.ts b/src/lib/User/BadgeWall/badgeLinks.test.ts
new file mode 100644
index 00000000..301288ec
--- /dev/null
+++ b/src/lib/User/BadgeWall/badgeLinks.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import { classifyDesigner, classifySource } from "./badgeLinks";
+
+describe("classifySource", () => {
+	it("labels known hosts and keeps the original href", () => {
+		expect(classifySource("https://www.pixiv.net/en/artworks/1")).toEqual({
+			href: "https://www.pixiv.net/en/artworks/1",
+			label: "Pixiv",
+		});
+		expect(classifySource("https://x.com/someone")).toEqual({
+			href: "https://x.com/someone",
+			label: "X (Twitter)",
+		});
+	});
+
+	it("falls back to the raw url as label for unknown hosts", () => {
+		expect(classifySource("https://example.com/art")).toEqual({
+			href: "https://example.com/art",
+			label: "https://example.com/art",
+		});
+	});
+
+	it("rejects non-http(s) and malformed urls (href becomes null)", () => {
+		expect(classifySource("javascript:alert(1)").href).toBeNull();
+		expect(classifySource("data:text/html,<script>1</script>").href).toBeNull();
+		expect(classifySource("not a url").href).toBeNull();
+	});
+
+	it("never produces a usable href for an html-injection payload", () => {
+		const payload = 'http://x"><img src=x onerror=alert(document.cookie)>';
+		const result = classifySource(payload);
+
+		expect(result.href).toBeNull();
+		expect(result.label).toBe(payload);
+	});
+});
+
+describe("classifyDesigner", () => {
+	it("extracts the username from an anilist profile url", () => {
+		expect(classifyDesigner("https://anilist.co/user/fuwn/")).toEqual({
+			href: "https://anilist.co/user/fuwn/",
+			label: "fuwn",
+		});
+	});
+
+	it("builds an anilist link from an @handle", () => {
+		expect(classifyDesigner("@fuwn")).toEqual({
+			href: "https://anilist.co/user/fuwn/",
+			label: "fuwn",
+		});
+	});
+
+	it("builds an anilist link from a bare name", () => {
+		expect(classifyDesigner("fuwn")).toEqual({
+			href: "https://anilist.co/user/fuwn/",
+			label: "fuwn",
+		});
+	});
+
+	it("forces an html-injection payload into the anilist path, never its own scheme/host", () => {
+		const payload = '"><img src=x onerror=alert(document.cookie)>';
+		const result = classifyDesigner(payload);
+
+		expect(
+			result.href === null ||
+				result.href.startsWith("https://anilist.co/user/"),
+		).toBe(true);
+		expect(result.label).toBe(payload);
+	});
+});
diff --git a/src/lib/User/BadgeWall/badgeLinks.ts b/src/lib/User/BadgeWall/badgeLinks.ts
new file mode 100644
index 00000000..92cbe6ce
--- /dev/null
+++ b/src/lib/User/BadgeWall/badgeLinks.ts
@@ -0,0 +1,56 @@
+export interface BadgeLink {
+	href: string | null;
+	label: string;
+}
+
+const safeHttpUrl = (value: string): string | null => {
+	try {
+		const url = new URL(value);
+
+		return url.protocol === "http:" || url.protocol === "https:" ? value : null;
+	} catch {
+		return null;
+	}
+};
+
+export const classifySource = (source: string): BadgeLink => {
+	let label = source;
+	const sourceLower = source.toLowerCase();
+
+	if (sourceLower.includes("pixiv.net")) {
+		label = "Pixiv";
+	} else if (
+		sourceLower.includes("twitter.com") ||
+		sourceLower.includes("x.com")
+	) {
+		label = "X (Twitter)";
+	} else if (sourceLower.includes("zerochan.net")) {
+		label = "Zerochan";
+	} else if (sourceLower.includes("imgur.com")) {
+		label = "Imgur";
+	} else if (sourceLower.includes("lofter.com")) {
+		label = "Lofter";
+	}
+
+	return { href: safeHttpUrl(source), label };
+};
+
+export const classifyDesigner = (designer: string): BadgeLink => {
+	let name = designer;
+	let userLink = designer;
+	const designerLower = designer.toLowerCase();
+	const anilistUser = designer.match(
+		/https?:\/\/anilist\.co\/user\/([^/]+)\/?/,
+	);
+
+	if (anilistUser) {
+		name = anilistUser[1];
+	} else if (designerLower.startsWith("@")) {
+		name = designer.replace("@", "");
+		userLink = `https://anilist.co/user/${name}/`;
+	} else if (!designerLower.startsWith("http")) {
+		userLink = `https://anilist.co/user/${name}/`;
+	}
+
+	return { href: safeHttpUrl(userLink), label: name };
+};