From 55780fa9a8d3b95e103c5f5222f6a42e9cf278df Mon Sep 17 00:00:00 2001 From: Fuwn Date: Mon, 1 Jun 2026 12:57:57 +0000 Subject: fix(security): escape badge source/designer to close stored XSS classifySource/classifyDesigner built 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. --- src/lib/User/BadgeWall/BadgePreview.svelte | 75 ++++++------------------------ src/lib/User/BadgeWall/badgeLinks.test.ts | 70 ++++++++++++++++++++++++++++ src/lib/User/BadgeWall/badgeLinks.ts | 56 ++++++++++++++++++++++ 3 files changed, 141 insertions(+), 60 deletions(-) create mode 100644 src/lib/User/BadgeWall/badgeLinks.test.ts create mode 100644 src/lib/User/BadgeWall/badgeLinks.ts (limited to 'src/lib/User/BadgeWall') 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 `${name}`; -}; - -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 `@${name}`; -}; - const onClick = (event: MouseEvent) => { event.preventDefault(); @@ -148,18 +107,14 @@ const onClick = (event: MouseEvent) => { {#if selectedBadge.designer} {$locale().badgePreview?.designer} - - {@html classifyDesigner(selectedBadge.designer)} + {@const designerLink = classifyDesigner(selectedBadge.designer)} + {#if designerLink.href} + + @{designerLink.label} + + {:else} + @{designerLink.label} + {/if}
{/if} @@ -181,13 +136,13 @@ const onClick = (event: MouseEvent) => { {#if selectedBadge.source} {$locale().badgePreview?.source} - {#if selectedBadge.source.startsWith('http')} - - {@html classifySource(selectedBadge.source)} + {@const sourceLink = classifySource(selectedBadge.source)} + {#if sourceLink.href} + + {sourceLink.label} + {:else} - {selectedBadge.source} + {sourceLink.label} {/if}
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,").href).toBeNull(); + expect(classifySource("not a url").href).toBeNull(); + }); + + it("never produces a usable href for an html-injection payload", () => { + const payload = 'http://x">'; + 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 = '">'; + 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 }; +}; -- cgit v1.2.3